详解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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
php如何获取Http请求
2020/04/30 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
微信小程序事件流原理解析
2019/11/27 Javascript
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python对excel文档的操作方法详解
2018/12/10 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python控制台实现交互式环境执行
2020/06/09 Python
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
淘宝好评语句大全
2014/12/31 职场文书
管理失职检讨书范文
2015/05/05 职场文书
党员证明信
2015/06/19 职场文书
python解析json数据
2022/04/29 Python