Vue中组件的私有属性为什么必须定义为方法?

Vue中的组件必须定义为一个方法,因为不定义为方法会报错。。。
定义如下组件:

<template id="temp1">
	<div>
		<p>总共被点击了{{count}}次</p>
		<button @click="addcount">添加</button>
	</div>
</template>
var com ={
	data{
		count:0
	},
	template:'#temp1',
	methods:{
		addcount(){this.count++;}
	}
}

浏览器报错如下
示意我们data必须定义为一个function,因为组件的定义就是一个可以复用的代码块,为了节省重复开发而产生的,一个组件往往会复用很多次,但是我们理想的是每个被复用的组件在被我们使用的时候都是新的,这样才能更好地被我们控制,但是如果把data定义为对象的话,

我们大致可以通过js原型链来对比下

var Component = function() {}; 
Component.prototype.data = {demo: 123 }
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456

从上面可以看出,两个实例都引用同一个对象,其中一个改变的时候,另一个也发生改变。

此部分代码转载自 作者:feXiaojin 链接:https://www.jianshu.com/p/b821d3401314 來源:简书

因为对象在内存中是引用数据类型,多个复用的组件其中一个改变了组件的值,其他组件都会受到其影响,违背了组件的初衷。
但是如果是一个函数,每个函数都有其单独的作用域,多个组件互不影响。方便更好的使用!
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/New_Yao/article/details/84860706