关于vue实例

Question

1、在入口文件main.js里，会new一个总的Vue实例：

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

然后其他地方也会封装各种.vue的组件，代码运行时每个组件会产生一个vue实例，请问这些vue实例是同一个对象吗？

2、如果一个父组件复用了很多相同的子组件，这些子组件实例是同一个对象吗？

Answer 1

双越 2021-11-21 22:17:52

在我们代码沟通的时候，“对象”和“实例”是同一个意思，可以相互切换的。所以，你把你的题目中，所有的“对象”都改为“实例”。然后再阅读，就能明白了。

例如“这些子组件实例是同一个实例吗？”—— 当然不是，每 new 出一个都是独立唯一的。

• 提问者 慕先生5461412 #1

  既然都是独立的实例对象，那为什么组件里要讲data写成一个函数形式呢？

• 古塘春草梦 回复 提问者 慕先生5461412 #2

  看下这个例子，你可能会明白，data是挂在组件原型上，如果不写成函数，实例化后所有实例的data指向同一个内存地址。
  function VueCompnent() {}
  VueCompnent.prototype.data = {
    age: 12
  };
  var JackMa = new VueCompnent();
  var PonyMa = new VueCompnent();
  console.log(JackMa.data.age === PonyMa.data.age); // true
  JackMa.data.age = 13;
  console.log('JackMa ' + JackMa.data.age + '岁；' + 'PonyMa ' + PonyMa.data.age + '岁'); 
  // JackMa 13岁；PonyMa 13岁