组件中 data 定义对象和函数区别？

当我们定义好一个组件的时候， vue 最终都会通过 vue.extend() 构建成组件实例，这里我们采用构造函数的形式模拟。

<script>
// 模仿构造函数，定义data属性采用对象的形式
function Component() {}
Component.prototype.data = {
  count: 1,
// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();
// 当修改其中一个组件的中的data值的时候，另一个组件的data值会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>
分析： 产生上面的原因是两个组件实例共享同一内存地址，当修改 componentA 的时候，componentB 会同步发生改变。
如果采用函数的写法？
<script>
// 模仿构造函数，定义data属性采用函数的形式
function Component() {
  this.data = this.data();
Component.prototype.data = function () {
  return {
    count: 1,
// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();
// 当修改其中一个组件的中的data值的时候，另一个组件的data值不会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>
分析：这是由于，函数返回的对象地址并不相同，这样每个组件中 data 都是独立的，这样修改其中一个组件不会影响其他组件中的 data 值。
在根组件中 data 可以是函数或者对象，不会造成数据污染。
在组件中 data 必须是函数的写法，这样返回的组件实例中 data 都是独立的对象，不会发生数据污染。
vue 组件data用箭头函数行不行？
可以使用箭头函数，但是需要注意 this 指向。如果使用箭头函数，data 函数中的 this 不会指向 vue 实例，如果需要访问 vue 实例，可以通过 data 函数的参数来实现。
data: vm => ({ a: vm.myProp })
复制代码
  
分类：
 前端
 
标签：
 
前端前端框架Vue.js
 
话题：
 
码上掘金
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

        一枚前端小菜鸟 @ 地球村🌍