详解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 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
js实现图片轮播效果
Dec 19 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JavaScript之实现一个简单的Vue示例
Jan 17 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之PHP语法学习笔记1
2006/12/17 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
js静态方法与实例方法分析
2011/07/04 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python 接口测试response返回数据对比的方法
2018/02/11 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python属于解释型语言么
2020/06/15 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
电钳专业个人求职信
2014/01/04 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
高级编程求职信模板
2014/02/16 职场文书
小学作文评语大全
2014/04/21 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
奖金申请报告模板
2015/05/15 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书