您好,登录后才能下订单哦!
这篇文章主要讲解了“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 /* asRootData */)
利用defineReactive对data中的每个属性进行劫持
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; // 重点在这里,后续如果在模板中使用到的属性,都会被执行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.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中随意改一个属性视图就会更新吗这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。