惊！为什么vue中的data必须是函数而不能是对象？

目录

 

原理分析         

源码分析

---

原理分析         

如果组件里直接将data定义为一个对象的话，那么在模板中多次复用该组件，组件中的data会指向同一个引用。改变一个组件中的data，会导致其他组件data中的数据被污染。

而如果使用函数的话，每个组件中的data就会有单独的引用，就不会存在变量污染的问题了

源码分析

在使用对象定义data时，模板编译后，会形成这样的一个render函数

function render() {
  with (this) {
    return _c('div', [_c('Counter'), _c('Counter')], 1)
  }
}

每一个 Counter 会被 _c 所调用，也就是 createElement， createElement 会直接拿着 Counter 上的 data 这个引用去创建一个组件。也就是所有的 Counter 组件实例上的 data 都指向同一个引用。

假设id为a的模板调用Count++ ，不仅a中的count会变化，b中使用的是相同的引用，也会跟随其发生变化。、