您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“怎么理解vue2.0响应式架构”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么理解vue2.0响应式架构”吧!
讲data 下面所有属性变为observable
来来来先看代码吧
class Vue { constructor(options) { this.$options = options this._data = options.data observer(options.data, this._update) this._update() } _update(){ this.$options.render() } } function observer(value, cb){ Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) } function defineReactive(obj, key, val, cb) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: ()=>{}, set:newVal=> { cb() } }) } var demo = new Vue({ el: '#demo', data: { text: 123, }, render(){ console.log("我要render了") } }) setTimeout(function(){ demo._data.text = 444 }, 3000)为了好演示我们只考虑最简单的情况，如果看了vue 源码分析之如何实现 observer 和 watcher可能就会很好理解，不过没关系，我们三言两语再说说，这段代码要实现的功能就是将
var demo = new Vue({ el: '#demo', data: { text: 123, }, render(){ console.log("我要render了") } })中data 里面所有的属性置于 observer，然后data里面的属性，比如 text 以改变，就引起_update()函数调用进而重新渲染，是怎样做到的呢，我们知道其实就是赋值的时候就要改变对吧，当我给data下面的text 赋值的时候 set 函数就会触发，这个时候 调用_update 就ok了，但是
setTimeout(function(){ demo._data.text = 444 }, 3000)demo._data.text没有demo.text用着爽，没关系，我们加一个代理
_proxy(key) { const self = this Object.defineProperty(self, key, { configurable: true, enumerable: true, get: function proxyGetter () { return self._data[key] }, set: function proxySetter (val) { self._data[key] = val } }) }然后在Vue的constructor加上下面这句
Object.keys(options.data).forEach(key => this._proxy(key))
***步先说到这里，我们会发现一个问题，data中任何一个属性的值改变，都会引起
_update的触发进而重新渲染，属性这显然不够精准啊
第二步，详细阐述***步为什么不够精准
比如考虑下面代码
new Vue({ template: ` <div> <section> <span>name:</span> {{name}} </section> <section> <span>age:</span> {{age}} </section> <div>`, data: { name: 'js', age: 24, height: 180 } }) setTimeout(function(){ demo.height = 181 }, 3000)template里面只用到了data上的两个属性name和age，但是当我改变height的时候，用***步的代码，会不会触发重新渲染?会!，但其实不需要触发重新渲染，这就是问题所在!!
第三步，上述问题怎么解决
简单说说虚拟 DOM
首先，template***都是编译成render函数的(具体怎么做，就不展开说了，以后我会说的)，然后render 函数执行完就会得到一个虚拟DOM，为了好理解我们写写最简单的虚拟DOM
function VNode(tag, data, children, text) { return { tag: tag, data: data, children: children, text: text } } class Vue { constructor(options) { this.$options = options const vdom = this._update() console.log(vdom) } _update() { return this._render.call(this) } _render() { const vnode = this.$options.render.call(this) return vnode } __h__(tag, attr, children) { return VNode(tag, attr, children.map((child)=>{ if(typeof child === 'string'){ return VNode(undefined, undefined, undefined, child) }else{ return child } })) } __toString__(val) { return val == null ? '' : typeof val === 'object' ? JSON.stringify(val, null, 2) : String(val); } } var demo = new Vue({ el: '#demo', data: { text: "before", }, render(){ return this.__h__('div', {}, [ this.__h__('span', {}, [this.__toString__(this.text)]) ]) } })我们运行一下，他会输出
{ tag: 'div', data: {}, children:[ { tag: 'span', data: {}, children: [ { children: undefined, data: undefined, tag: undefined, text: '' // 正常情况为 字符串 before，因为我们为了演示就不写代理的代码，所以这里为空 } ] } ] }这就是 虚拟最简单虚拟DOM,tag是html 标签名，data 是包含诸如 class 和 style 这些标签上的属性，childen就是子节点，关于虚拟DOM就不展开说了。
回到开始的问题，也就是说，我得知道，render 函数里面依赖了vue实例里面哪些变量(只考虑render 就可以，因为template 也会是帮你编译成render)。叙述有点拗口，还是看代码吧
var demo = new Vue({ el: '#demo', data: { text: "before", name: "123", age: 23 }, render(){ return this.__h__('div', {}, [ this.__h__('span', {}, [this.__toString__(this.text)]) ]) } })就像这段代码，render 函数里其实只依赖text，并没有依赖 name和 age,所以，我们只要text改变的时候
我们自动触发 render 函数 让它生成一个虚拟DOM就ok了(剩下的就是这个虚拟DOM和上个虚拟DOM做比对，然后操作真实DOM，只能以后再说了)，那么我们正式考虑一下怎么做
第三步，'touch' 拿到依赖
回到最上面那张图，我们知道data上的属性设置defineReactive后，修改data 上的值会触发 set。
那么我们取data上值是会触发 get了。
对，我们可以在上面做做手脚，我们先执行一下render，我们看看data上哪些属性触发了get，我们岂不是就可以知道 render 会依赖data 上哪些变量了。
然后我么把这些变量做些手脚，每次这些变量变的时候，我们就触发render。
上面这些步骤简单用四个子概括就是 计算依赖。
(其实不仅是render，任何一个变量的改别，是因为别的变量改变引起，都可以用上述方法，也就是computed 和 watch 的原理，也是mobx的核心)
***步，
我们写一个依赖收集的类，每一个data 上的对象都有可能被render函数依赖，所以每个属性在defineReactive
时候就初始化它，简单来说就是这个样子的
class Dep { constructor() { this.subs = [] } add(cb) { this.subs.push(cb) } notify() { console.log(this.subs); this.subs.forEach((cb) => cb()) } } function defineReactive(obj, key, val, cb) { const dep = new Dep() Object.defineProperty(obj, key, { // 省略 }) }然后，当执行render 函数去'touch'依赖的时候，依赖到的变量get就会被执行，然后我们就可以把这个 render 函数加到 subs 里面去了。
当我们，set 的时候 我们就执行 notify 将所有的subs数组里的函数执行，其中就包含render 的执行。
至此就完成了整个图，好我们将所有的代码展示出来
function VNode(tag, data, children, text) { return { tag: tag, data: data, children: children, text: text } } class Vue { constructor(options) { this.$options = options this._data = options.data Object.keys(options.data).forEach(key => this._proxy(key)) observer(options.data) const vdom = watch(this, this._render.bind(this), this._update.bind(this)) console.log(vdom) } _proxy(key) { const self = this Object.defineProperty(self, key, { configurable: true, enumerable: true, get: function proxyGetter () { return self._data[key] }, set: function proxySetter (val) { self._data.text = val } }) } _update() { console.log("我需要更新"); const vdom = this._render.call(this) console.log(vdom); } _render() { return this.$options.render.call(this) } __h__(tag, attr, children) { return VNode(tag, attr, children.map((child)=>{ if(typeof child === 'string'){ return VNode(undefined, undefined, undefined, child) }else{ return child } })) } __toString__(val) { return val == null ? '' : typeof val === 'object' ? JSON.stringify(val, null, 2) : String(val); } } function observer(value, cb){ Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) } function defineReactive(obj, key, val, cb) { const dep = new Dep() Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: ()=>{ if(Dep.target){ dep.add(Dep.target) } return val }, set: newVal => { if(newVal === val) return val = newVal dep.notify() } }) } function watch(vm, exp, cb){ Dep.target = cb return exp() } class Dep { constructor() { this.subs = [] } add(cb) { this.subs.push(cb) } notify() { this.subs.forEach((cb) => cb()) } } Dep.target = null var demo = new Vue({ el: '#demo', data: { text: "before", }, render(){ return this.__h__('div', {}, [ this.__h__('span', {}, [this.__toString__(this.text)]) ]) } }) setTimeout(function(){ demo.text = "after" }, 3000)我们看一下运行结果
好我们解释一下 Dep.target 因为我们得区分是，普通的get，还是在查找依赖的时候的get，
所有我们在查找依赖时候，我们将
function watch(vm, exp, cb){ Dep.target = cb return exp() }Dep.target 赋值，相当于 flag 一下，然后 get 的时候
get: () => { if (Dep.target) { dep.add(Dep.target) } return val },到此，相信大家对“怎么理解vue2.0响应式架构”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。