object.assign问题（vue相关）

Question

<template>
 <div>
    <div v-for="item in list2">{{item.name}}{{item.title}}</div>
    <button @click="change">按钮</button>
 </div></template><script type="text/ecmascript-6">export default {
  data() {    return {      list1: { name: "John", id: 1 },      list2: [],
    };
  },
  created() {    this.obj = this.list1    //Object.assign(this.obj,{title:'123'}) //←直接绑定到obj上不会给title绑定get和set所以点击按钮也不会更新视图  
    //↓创建一个新的对象title就能成功绑定get和set~这是什么原理，求解惑
    this.obj = Object.assign({},this.obj,{title:'123'}) 
    console.log(this.obj);    this.list2.push(this.obj)    console.log(this.list2);
  },  methods: {
    change(){      this.list2[0].title='harry'
    }
  }
};</script>

我的理解是vue会直接给新声明对象的所有属性自动绑定set和get~Object.assign把对象合并到新对象上，相当于把合并对象的所有属性重新声明到新对象上所以自动绑了get和set，不知道有没有理解错~

Answer 1

这个和vue的observe实现源码有关了，会观察对象有没有__ob__属性，如果有就不会再去new Observer，如果没有就会去new Observer， Object.assig不会拷贝__ob__(不可枚举的)这个属性相关vue源码如下  /**    * Attempt to create an observer instance for a value,    * returns the new observer if successfully observed,    * or the existing observer if the value already has one.    */   function observe(value, asRootData) {    if (!isObject(value) || value instanceof VNode) {      return     }    var ob;    // 检查是否有__ob__属性     if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {       ob = value.__ob__;     } else if (       shouldObserve &&       !isServerRendering() &&       (Array.isArray(value) || isPlainObject(value)) &&       Object.isExtensible(value) &&       !value._isVue     ) {       ob = new Observer(value);     }    if (asRootData && ob) {       ob.vmCount++;     }    return ob   }/**    * Observer class that is attached to each observed    * object. Once attached, the observer converts the target    * object's property keys into getter/setters that    * collect dependencies and dispatch updates.    */   var Observer = function Observer(value) {    this.value = value;    this.dep = new Dep();    this.vmCount = 0;    // 添加__ob__属性     def(value, '__ob__', this);    if (Array.isArray(value)) {      if (hasProto) {         protoAugment(value, arrayMethods);       } else {         copyAugment(value, arrayMethods, arrayKeys);       }      this.observeArray(value);     } else {      this.walk(value);     }   };