详解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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
Terran热键控制
2020/03/14 星际争霸
PHP $_SERVER详解
2009/01/16 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
js数组的操作详解
2013/03/27 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
vuex学习之Actions的用法详解
2017/08/29 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
人机交互程序 python实现人机对话
2017/11/14 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python yield与实现方法代码分析
2018/02/06 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
接口可以包含哪些成员
2012/09/30 面试题
婚前协议书怎么写
2014/04/15 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
总结Python使用过程中的bug
2021/06/18 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server