难度级别:中高级及以上 提问概率:80%
在Vue项目中,App.vue下的每个子组件都会生成一个单独的Vue实例对象,但这些子对象都是通过通过vue.extend方法创建而来的,也就是说我们平时在项目中所定义的Vue组件,都有一个相同的父类对象。这样也就导致了,所有的子组件最终所指向的内存空间是相同的。
但我们的需求是,子组件间的data数据是互相独立的,不能互相干扰,虽然很多时候我们都希望通过组件间数据共享,达到一个组件内数据变更,其他组件的数据也响应式变更的效果,但这些却属于开发人员主动操作的范围。所以组件间一定不能出现不受开发人员控制,data数据自动互相影响的情况。
通过读源码文件src/core/util/options.js和src/core/instance/init.js可知,Vue项目入口文件的new Vue的data属性可以是一个对象,因为这个最外层Vue实例对象只被new一次,不会再被复用。而我们自定义的这些Vue业务组件,都会通过vue.extend创建子类实例对象,然后把我们在业务组件中定义的data数据依赖通过mergeOptions方