首頁猿問 ...

object.assign問題（vue相關(guān)）

JavaScript

寶慕林4294392 2019-03-20 19:18:09

<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所以點擊按鈕也不會更新視圖 //↓創(chuàng)建一個新的對象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把對象合并到新對象上，相當(dāng)于把合并對象的所有屬性重新聲明到新對象上所以自動綁了get和set，不知道有沒有理解錯~

查看完整描述

2 回答

ITMISS

TA貢獻(xiàn)1871條經(jīng)驗獲得超8個贊

這個和vue的observe實現(xiàn)源碼有關(guān)了，會觀察對象有沒有__ob__屬性，如果有就不會再去new Observer，如果沒有就會去new Observer， Object.assig不會拷貝__ob__(不可枚舉的)這個屬性
相關(guān)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);
    }
  };

反對回復(fù) 2019-03-20