Vue组件中数据选项必须是函数的原因是什么 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关Vue组件中数据选项必须是函数的原因是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>官方解释

数据必须是函数

构造Vue实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:数据必须是函数。实际上,如果你这么做:

Vue.component (& # 39; my-component& # 39;, { 　　模板:& # 39;& lt; span>{{消息}}& lt;/span> & # 39; 　　数据:{ 　　信息:& # 39;你好# 39; 　　} 　　})

那么Vue会停止运行,并在控制台发出警告,告诉你在组件实例中数据必须是一个函数。但理解这种规则为何存在也是很有益处的,所以让我们先作个弊:

& lt; div id=癳xample-2"比; 　　& lt; simple-counter> & lt;/simple-counter> 　　& lt; simple-counter> & lt;/simple-counter> 　　& lt; simple-counter> & lt;/simple-counter> 　　& lt;/div> 　　var data={计数器:0} 　　Vue.component (& # 39; simple-counter& # 39;, { 　　模板:& # 39;& lt;按钮v:点击=凹剖?=1“在{{柜台}}& lt;/button> & # 39; 　　' ' '//技术上的数据确是一个函数了,因此Vue不会警告,//但是我们却给每个组件实例返回了同一个对象的引用　　' ' ' 　　数据:函数(){ 　　返回数据　　} 　　}）　　新Vue ({ 　　艾尔:& # 39;# example-2& # 39; 　　})

=============以下为个人理解,如果有误,请指出,谢谢指教

Vue.component (& # 39; xxx # 39;, { 　　模板:& # 39;{{柜台}}& # 39; 　　数据:函数(){ 　　返回柜台=0; 　　} 　　})

Vue在注册到全局/局部并生成实例时,它是具有自己的作用域的,也就是说

在模板字符串模板中如果存在一个变量名与Vue实例的变量名一致的时候,这个变量只会是组件中的变量,而不会是Vue的全局变量

比如

//以下代码中,组件中的计数和Vue中的计数是一样的变量名,但是在组件中只会显示0而不是2 　　Vue.component (& # 39; simple-counter& # 39;, { 　　模板:& # 39;& lt; button>{{数}}& lt;/button> & # 39; 　　数据:函数(){ 　　返回数=0; 　　　　} 　　　　}）; 　　vm=new Vue ({ 　　艾尔:& # 39;# example-2& # 39; 　　数据:{ 　　数:2 　　　　} 　　　　})

以上代码从原型链上理解

=function () {}//var组件为了让组件有自己的作用域,它必须包含私有变量数据,所以简单化的理解应该是这样的
　　
　　var组件=function () {
　　this.data=https://www.yisu.com/zixun/this.data();//存在私有的数据属性
　　}
　　
　　component.propotype.data=function () {
　　返回{数:0}
　　}//当我们在模板中使用数据的时候,我们是调用的组件的私有变量数据//如果我们不以函数的形式处理又会如何呢?
　　var组件=function () {//不存在私有的数据属性
　　}
　　component.propotype。data={数:0}//此时,数据不作为私有变量,就会有暴露的风险,而且,它指向的是{数:0}的引用,所以当重复创建组件的时候,组件的数据都指向了同一个引用。因此会相互影响。

如果不以原型链的形式处理,也可以不传入函数

关于Vue组件中数据选项必须是函数的原因是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。