Shulou(Shulou.com)06/02 Report--

This article mainly explains the "Vue data to change a property view will be updated", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "Vue data to change a property view will be updated" it!

First, write a simple demo, in which there are four attributes in data: a ~ b ~ d, and the only attribute used in the template is ~ b. See if only AMRO b calls Dep to collect it?

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

In Vueinstance/state.js, you will use proxy to proxy each attribute.

Const keys = Object.keys (data) const props = vm.$options.props const methods = vm.$options.methods let I = keys.length while (iMurray -) {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 Einstein.`, vm)} else if (! isReserved (key)) {/ / property of proxy object proxy (vm, `_ data`, key)}} / / observe data observe (data, true / * asRootData * /)

Using defineReactive to hijack every attribute in data

Observe (data, true / * asRootData * /); / / 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; /* eslint-disable no-self-compare */ 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 /** * 查看render 函数是否存在？如果不存在就解析template模板 * Vue渲染页面时，有两个方式 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[xss_clean]; } 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);

In the last picture, you can see that the render function is rendering the template template in our demo. In the end, only the an and b attributes will be collected by the Dep class.

Thank you for your reading, the above is the "Vue data to change a property view will be updated" of the content, after the study of this article, I believe that you will change a property view in Vue data will update this problem has a deeper understanding, the specific use of the need for you to practice verification. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.