详解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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
vue构建动态表单的方法示例
Sep 22 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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
PHP4之真OO
2006/10/09 PHP
php调用c接口无错版介绍
2014/03/11 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
用javascript实现画板的代码
2007/09/05 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
用python做游戏的细节详解
2019/06/25 Python
学校门卫工作职责
2013/12/07 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
学校团代会开幕词
2016/03/04 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL