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

约定不等于承诺〃 2022-04-11 13:41 277阅读 0赞

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++;}
    	}
    }

![浏览器报错如下][20181206161021752.png]  
示意我们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][https_www.jianshu.com_p_b821d3401314] 來源：简书

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

[20181206161021752.png]: /images/20220411/b5d73ff436384a2ea42fd7be2fa62b61.png
[https_www.jianshu.com_p_b821d3401314]: https://www.jianshu.com/p/b821d3401314
[20181206164439914.png]: /images/20220411/597583eb65eb434ca3379e215afdcfb8.png