再谈vue的响应式
再谈vue的响应式这次争取讲的明明白白
<div #app>name is {{this.name}}, age is {{this.age}</div>
const vm = new Vue({
el: '#app',
data: {
name: 'Jason',
age: 18,
}
})
整体流程(最核心):
-
调用beforeCreate钩子函数
-
拿到option中的data,将其交给Observer类变成响应式的数据
-
调用created钩子函数
-
判断有没有el属性,
-
有的话就调用$mount方法,将el传进去,这个函数里面会进行将模板编译为render函数(如果是运行时编译的话),然后调用render函数拿到最新地vnode,根据vnode进行遍历递归渲染页面
-
没有就啥也不干,就完事了
Vue.png
-
响应式(vue中通过Observer,Dep,Watcher配合scheduler调度器来实现,接下来会逐步引入这些概念)
什么是响应式数据?
响应式数据就是当我们给响应式数据重新赋值的时候,会自动执行某一些依赖这个响应式数据的函数
具体表现就是:
比如这里有一个对象,还有一个函数,我们把它叫做render函数吧
const obj = { name: "Jason", age: 18 } function render () { const div = document.querySelector('#app') div.innerHTML = `name is ${obj.name}, age is ${obj.age}` }
通过简单的观察,我们可以发现render函数执行的时候,使用到了obj的两个属性。
思考一下,如果说我们做这么一步操作
obj.age = 19
, 然后自动地执行了render函数,界面就会更新是不是就好像跟vue差不多了,数据一改变,视图自当更新!
然后我们再回过头看看上面那句话:
响应式数据就是当我们给响应式数据重新赋值的时候,会自动执行某一些依赖这个响应式数据的函数
是不是感觉好像明白了些什么~~
响应式数据怎么实现呢?
我们通过一个函数专门来做这件事,暂且就叫做Observer吧
这个函数接收一个普通的对象,然后再对这个对象进行一些处理,那么这个对象就变成了响应式对象
function Observer (data) { for (const prop in data) { let value = data[prop] Object.defineProperty(data, prop, { get() { // 虽然获取data[prop]的时候这里我可以知道,但是这里我要做啥? return value }, set(val) { value = val // 虽然给data[prop]赋值的时候我可以在这里知道,但是这里我要做啥? } }) } }
思考一下我们可以发现,在调用前面的render函数的时候,会用到响应式数据,就会触发getter
那么我们就可以在getter里面做文章了
function Observer (data) { for (const prop in data) { let value = data[prop] const dep = [] // 新增代码 Object.defineProperty(data, prop, { get() { // 有函数用到了我,我得将这个函数收集一下,但是收集到哪里去呢? // 我们给每一个属性分配一个数组dep容器,就放到这里面去 dep.push(render) // 新增代码 return value }, set(val) { value = val // 虽然给data[prop]赋值的时候我可以在这里知道,但是这里我要做啥? } }) } }
然后我们再思考,setter里面要干嘛呢?
setter执行,说明什么,说明有人要给这个属性重新赋值,那么我们需要怎么做?是不是把刚刚收集到的那个render函数拿出来执行一下就可以了
于是就有了以下代码:
function Observer (data) { for (const prop in data) { let value = data[prop] const dep = [] // 新增代码 Object.defineProperty(data, prop, { get() { // 有函数用到了我,我得将这个函数收集一下,但是收集到哪里去呢? // 我们给每一个属性分配一个数组dep容器,就放到这里面去 dep.push(render) // 新增代码 return value }, set(val) { value = val // 这里把刚刚getter收集到的依赖函数拿出来执行一遍 dep.forEach(item => { // 新增代码 item() }) } }) } }
现在,我们可以浅浅地模拟一下vue的源码:
function Observer(vm, data) { for (const prop in data) { let value = data[prop]; const dep = []; // 新增代码 Object.defineProperty(data, prop, { get() { // 有函数用到了我,我得将这个函数收集一下,但是收集到哪里去呢? // 我们给每一个属性分配一个数组dep容器,就放到这里面去 dep.push(vm._render); // 新增代码 return value; }, set(val) { value = val; // 这里把刚刚getter收集到的依赖函数拿出来执行一遍 dep.forEach((item) => { // 新增代码 item.call(vm); }); }, }); Object.defineProperty(vm, prop, { get() { return data[prop]; }, set(val) { data[prop] = val }, }); } } function Vue(options) { // 1\. 调用beforeCreate钩子函数 ... // 2\. 拿到option中的data,将其交给Observer类变成响应式的数据 Observer(this, options.data || {}); this._render = options.render; // 3\. 调用created钩子函数 ... // 4\. 判断有没有el属性 // if (options.el) { // this.$mount(options.el) // 这个代码就不实现了 // } // 我们将第四部简化一下 options.render.call(this); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id='app'></div> <script src="./my-vue.js"></script> <script> const vm = new Vue({ data: { name: "Jason", age: 18, }, render() { const div = document.querySelector("#app"); div.innerHTML = `name is ${this.name}, age is ${this.age}`; }, }); setTimeout(() => { vm.age = 19 }, 1000) </script> </body> </html>
强烈建议大家把上面的代码copy到编辑器中,然后运行看看效果,然后捋一下代码每一行是什么意思
引入Dep概念:
我们可以把依赖收集,派发更新这些操作专门抽离出一个类来处理
class Dep { constructor() { this.subs = []; } depend(target) { this.subs.push(target); } notify() { this.subs.forEach((sub) => { sub(); }); } }
然后把Observer函数里面的代码小改一下,就是下面这个样子:
class Dep { constructor() { this.subs = []; } depend(target) { this.subs.push(target); } notify() { this.subs.forEach((sub) => { sub(); }); } } function Observer(vm, data) { for (const prop in data) { let value = data[prop]; const dep = new Dep(); // 改动点 Object.defineProperty(data, prop, { get() { dep.depend(vm._render.bind(vm)); // 改动点 return value; }, set(val) { value = val; dep.notify(); // 改动点 }, }); Object.defineProperty(vm, prop, { get() { return data[prop]; }, set(val) { data[prop] = val; }, }); } } function Vue(options) { // 1\. 调用beforeCreate钩子函数 ... // 2\. 拿到option中的data,将其交给Observer类变成响应式的数据 Observer(this, options.data || {}); this._render = options.render; // 3\. 调用created钩子函数 ... // 4\. 判断有没有el属性 // if (options.el) { // this.$mount(options.el) // 这个代码就不实现了 // } // 我们将第四部简化一下 options.render.call(this); }
引入Watcher概念:
我们仔细想想会发现一个大问题,我们在依赖收集的时候,是不是把收集到的东西写死了,导致只能收集到render函数,不能收集到别的。
这里大家可能会想,我也不需要收集其他什么东西了啊,不就是render函数嘛。数据更新,视图自动更新,还有什么其他的东西嘛
大家可以看看如下代码:
const vm = new Vue({ el: "#app", data: { lastname: "老", firstname: "王", no: 1, }, computed: { fullname() { console.log("fullname"); return this.lastname + this.firstname; } }, methods: { console() { console.log(this.fullname) } }, render(h) { return h("p", [h("span", this.no)]); }, });
可以发现,我的视图只依赖no属性,你firstname,lastname变了跟我视图有什么关系,我并不需要更新视图。
虽然大家目前还不知道firstname变了需要干嘛,可以猜想应该是执行跟fullname这个计算属性有关的函数,但肯定不是执行render函数对吧。
总而言之,依赖收集的时候不能写死,而应该跟在获取这个属性的时候,所在的函数有关
那这句话又怎么理解呢?
是这样的,no属性在获取的时候是由于render函数调用,而firstname属性获取的时候,是由于fullname这个计算属性的调用,
那么他们应该分别收集render函数,fullname函数,而不能写死为render函数。
说了这么多,其实就是想引入Watcher这么一个概念
让watcher去管理这些属性到底应该收集什么东西,你在收集的时候,只管去收集一个固定的变量就好了,Wacther会去管理那个变量的值。
那具体应该怎么管理呢?
其实就是把那些要执行的函数不要直接去执行,而是交给Watcher去执行。
上代码:
class Watcher { // 新增代码 constructor(vm, fn) { this.vm = vm; this.getter = fn; this.get(); } get() { Dep.target = this; this.getter.call(this.vm); Dep.target = undefined; } update() { this.get(); } } class Dep { static target = undefined; // 改动点 constructor() { this.subs = []; } depend(target) { this.subs.push(target); } notify() { this.subs.forEach((sub) => { sub.update(); // 改动点 }); } } function Observer(vm, data) { for (const prop in data) { let value = data[prop]; const dep = new Dep(); Object.defineProperty(data, prop, { get() { if (Dep.target) { // 改动点 dep.depend(Dep.target); // 改动点 } return value; }, set(val) { value = val; dep.notify(); }, }); Object.defineProperty(vm, prop, { get() { return data[prop]; }, set(val) { data[prop] = val; }, }); } } function Vue(options) { // 1\. 调用beforeCreate钩子函数 ... // 2\. 拿到option中的data,将其交给Observer类变成响应式的数据 Observer(this, options.data || {}); this._render = options.render; // 3\. 调用created钩子函数 ... // 4\. 判断有没有el属性 // if (options.el) { // this.$mount(options.el) // 这个代码就不实现了 // } // 我们将第四部简化一下 // options.render.call(this); new Watcher(this, options.render); // 新增代码 }
强烈建议大家把上面的代码copy到编辑器中,然后运行看看效果,然后捋一下代码每一行是什么意思
那么到这里呢,关于vue的响应式的三个类的最最核心功能就讲完了,
虽然这一套流程还是有很多的缺陷,但是肯定能够帮助大家理解vue源码里面的主线。
其实大家好好捋捋,多看几遍,然后打打断点啥的,还是能够理解这一套流程的。
这里面的每一个类中,都有很多实现细节,我这里就不展开了,打算之后专门弄一个系列来讲这些细节部分,每一个细节可能都会用一篇文章来讲解。(先给自己挖个坑)
(调度器相关的nextTick好像还没讲到,尴尬,咱们先把这一套流程弄明白,下期再会也不迟)