Vue data中随意改一个属性视图就会更新吗

这篇文章主要讲解了“Vue data中随意改一个属性视图就会更新吗”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue data中随意改一个属性视图就会更新吗”吧！

先写个简单的 demo，其中 data 中有 4 个属性a,b,c,d，在模板中被利用到的属性只有a,b。看看是不是只有a,b才会调用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}}{{b}}</div>',});

在Vueinstance/state.js里面，会利用proxy把每个属性都 代理一遍

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)) {      // 代理对象的属性      proxy(vm, `_data`, key)    }  }  // observe data  observe(data, true )

利用defineReactive对data中的每个属性进行劫持

observe(data, true );// observeconst keys = Object.keys(obj);for (let i = 0; i < keys.length; i++) {  defineReactive(obj, keys[i]);}// defineReactiveObject.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: function reactiveGetter() {    const value = getter ? getter.call(obj) : val;    // 重点在这里，后续如果在模板中使用到的属性，都会被执行reactiveGetter函数    // 被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;        if (newVal === value || (newVal !== newVal && value !== value)) {      return;    }    if (setter) {      // 这里是处理computed set 函数      setter.call(obj, newVal);    } else {      val = newVal;    }    childOb = !shallow && observe(newVal);    // 如果我们在更改属性时，就会调用notify 异步更新视图    dep.notify();  },});

执行$mount进行视图挂载

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

$mount 是调用 Vue 原型上的方法, 重点是最后一句 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    if (!options.render) {    let template = options.template;    if (template) {      if (typeof template === 'string') {        if (template.charAt(0) === '#') {          template = idToTemplate(template);                    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) {      // 如果模板不存在，就创建一个默认的html模板      template = getOuterHTML(el);    }  }  // 重写了Vue.prototype.$mount ，最终调用缓存的mount方法完成对$mount的挂载  return mount.call(this, el, hydrating);};

这里mount调用了 mountComponent(this, el, hydrating) 方法，而 mountComponent是执行了 _render函数,最终_render是调用render 生成一个vnode。

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

最后一张图可以看到是render函数在渲染我们demo里面的template模板，最终只有a, b两个属性才会被Dep类收集起来。

感谢各位的阅读，以上就是“Vue data中随意改一个属性视图就会更新吗”的内容了，经过本文的学习后，相信大家对Vue data中随意改一个属性视图就会更新吗这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！