详解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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
JavaScript 指导方针
2007/04/05 Javascript
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
关于Js中new操作符的作用详解
2021/02/21 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python实现PID算法及测试的例子
2019/08/08 Python
python实现单链表的方法示例
2019/09/03 Python
Python super()方法原理详解
2020/03/31 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
任课老师推荐信范文
2013/11/24 职场文书
专升本个人自我评价
2013/12/22 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
中学校园广播稿
2015/08/18 职场文书
小学运动会开幕词
2016/03/04 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers