详解Vue的组件中data选项为什么必须是函数


Posted in Javascript onAugust 17, 2020

官方解释

data 必须是函数

构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:data 必须是函数。实际上,如果你这么做:

Vue.component('my-component', {
 template: '<span>{{ message }}</span>',
 data: {
 message: 'hello'
 }
})

那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数。但理解这种规则为何存在也是很有益处的,所以让我们先作个弊:

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 ```
 // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
 // 但是我们却给每个组件实例返回了同一个对象的引用
 ```
 data: function () {
 return data
 }
})
new Vue({
 el: '#example-2'
})

=============以下为个人理解,如果有误,请指出,谢谢指教

Vue.component('xxx',{
template:'{{counter}}',
data:function(){
return counter=0;
}
})

Vue在注册到全局/局部并生成实例时,它是具有自己的作用域的,也就是说

在template 字符串模板中如果存在一个变量名与VUE实例的变量名一致的时候,这个变量只会是组件中的变量,而不会是VUE的全局变量

比如

//以下代码中,组件中的count和Vue中的count是一样的变量名,但是在组件中只会显示0而不是2
Vue.component('simple-counter',{
    template:'<button>{{count}}</button>',
    data:function(){
     return count=0;

    }

   });
   vm=new Vue({
    el:'#example-2',
    data:{
     count:2

    }

   })

以上代码从原型链上理解

var component=function(){}//为了让组件有自己的作用域,它必须包含私有变量data,所以简单化的理解应该是这样的

var component=function(){
this.data=this.data();//存在私有的data属性
}

component.propotype.data=function(){
return {count:0}
}
//当我们在template中使用数据的时候,我们是调用的component的私有变量data
//如果我们不以函数的形式处理又会如何呢?
var component=function(){
//不存在私有的data属性
}
component.propotype.data= {count:0}
//此时,data不作为私有变量,就会有暴露的风险,而且,它指向的是{count:0}的引用,所以当重复创建组件的时候,component的data都指向了同一个引用。因此会相互影响。

如果不以原型链的形式处理,也可以不传入函数

function component(d) {

    this.data = d;
   }
var com = new component({
    count: 1
   });
   var com1 = new component({
    count: 1
   });

总结

到此这篇关于详解Vue的组件中data选项为什么必须是函数的文章就介绍到这了,更多相关Vue组件中data选项是函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
js实现一个简易计算器
Mar 30 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 #Javascript
openLayer4实现动态改变标注图标
Aug 17 #Javascript
openlayers4实现点动态扩散
Aug 17 #Javascript
Vue实现计算器计算效果
Aug 17 #Javascript
vue-model实现简易计算器
Aug 17 #Javascript
Vue实现手机计算器
Aug 17 #Javascript
Vuex实现购物车小功能
Aug 17 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
基于empty函数的判断详解
2013/06/17 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
基于python实现KNN分类算法
2020/04/23 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python多线程thread及模块使用实例
2020/04/28 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
幼儿园安全检查制度
2014/01/30 职场文书
学校四群教育实施方案
2014/06/12 职场文书
群众路线领导对照材料
2014/08/23 职场文书
爱心助学感谢信
2015/01/21 职场文书
监理中标通知书
2015/04/16 职场文书
雷锋电影观后感
2015/06/10 职场文书