Vue?data中隨意改一個(gè)屬性視圖就會(huì)更新嗎

這篇文章主要講解了“Vue data中隨意改一個(gè)屬性視圖就會(huì)更新嗎”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue data中隨意改一個(gè)屬性視圖就會(huì)更新嗎”吧！

先寫個(gè)簡(jiǎn)單的 demo，其中 data 中有 4 個(gè)屬性a,b,c,d，在模板中被利用到的屬性只有a,b?？纯词遣皇侵挥衋,b才會(huì)調(diào)用Dep收集起來呢？

new Vue({
  el: '#app',
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
      d: 4,
    };
  },
  created() {
    console.log(this.b);
    this.b = 'aaa';
  },
  template: '<div>Hello World{{a}}{}</div>',
});

在Vueinstance/state.js里面，會(huì)利用proxy把每個(gè)屬性都 代理一遍

const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      // 代理對(duì)象的屬性
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)

利用defineReactive對(duì)data中的每個(gè)屬性進(jìn)行劫持

observe(data, true /* asRootData */);

// observe
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  defineReactive(obj, keys[i]);
}

// defineReactive
Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter() {
    const value = getter ? getter.call(obj) : val;
    // 重點(diǎn)在這里，后續(xù)如果在模板中使用到的屬性，都會(huì)被執(zhí)行reactiveGetter函數(shù)
    // 被Dep類 收集起來
    if (Dep.target) {
      console.log(`${key} 屬性 被Dep類收集了`)
      dep.depend();
      if (childOb) {
        childOb.dep.depend();
        if (Array.isArray(value)) {
          dependArray(value);
        }
      }
    }
    return value;
  },
  set: function reactiveSetter(newVal) {
    const value = getter ? getter.call(obj) : val;
    /* eslint-disable no-self-compare */
    if (newVal === value || (newVal !== newVal && value !== value)) {
      return;
    }
    if (setter) {
      // 這里是處理computed set 函數(shù)
      setter.call(obj, newVal);
    } else {
      val = newVal;
    }
    childOb = !shallow && observe(newVal);
    // 如果我們?cè)诟膶傩詴r(shí)，就會(huì)調(diào)用notify 異步更新視圖
    dep.notify();
  },
});

執(zhí)行$mount進(jìn)行視圖掛載

if (vm.$options.el) {
  vm.$mount(vm.$options.el);
}

$mount 是調(diào)用 Vue 原型上的方法, 重點(diǎn)是最后一句 mount.call(this, el, hydrating)

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el);

  const options = this.$options;
  // resolve template/el and convert to render function
  /**
   * 查看render 函數(shù)是否存在？如果不存在就解析template模板
   * Vue渲染頁面時(shí)，有兩個(gè)方式 1. template，2. render，最終所有的模板類的都需要使用render去渲染
   */
  if (!options.render) {
    let template = options.template;
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template);
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            );
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML;
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this);
        }
        return this;
      }
    } else if (el) {
      // 如果模板不存在，就創(chuàng)建一個(gè)默認(rèn)的html模板
      template = getOuterHTML(el);
    }
  }
  // 重寫了Vue.prototype.$mount ，最終調(diào)用緩存的mount方法完成對(duì)$mount的掛載
  return mount.call(this, el, hydrating);
};

這里mount調(diào)用了 mountComponent(this, el, hydrating) 方法，而 mountComponent是執(zhí)行了 _render函數(shù),最終_render是調(diào)用render 生成一個(gè)vnode。

const { render, _parentVnode } = vm.$options;
vnode = render.call(vm._renderProxy, vm.$createElement);

最后一張圖可以看到是render函數(shù)在渲染我們demo里面的template模板，最終只有a, b兩個(gè)屬性才會(huì)被Dep類收集起來。

感謝各位的閱讀，以上就是“Vue data中隨意改一個(gè)屬性視圖就會(huì)更新嗎”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue data中隨意改一個(gè)屬性視圖就會(huì)更新嗎這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！