详解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 相关文章推荐
javascript验证身份证完全方法具体实现
Nov 18 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
vue实现分页加载效果
Dec 24 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
js实现鼠标拖曳效果
Dec 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
ext form 表单提交数据的方法小结
2008/08/08 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python入门学习指南分享
2018/04/11 Python
Python单元测试简单示例
2018/07/03 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python async with和async for的使用
2019/06/20 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python 多线程中join()的作用
2020/10/29 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
电大毕业自我鉴定
2014/02/03 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
教师聘用意向书
2015/05/11 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers