营销型网站建设合同,打折网站模板,ui设计定义,腾讯做的购物网站目录 1#xff0c;总览2#xff0c;Observer3#xff0c;Dep4#xff0c;Watcher5#xff0c;Schedule 1#xff0c;总览
vue2官网参考 简单介绍下上图流程#xff1a;以 Data 为中心来说#xff0c;
Vue 会将传递给 Vue 实例的 data 选项#xff08;普通 js 对象总览2Observer3Dep4Watcher5Schedule 1总览
vue2官网参考 简单介绍下上图流程以 Data 为中心来说
Vue 会将传递给 Vue 实例的 data 选项普通 js 对象通过 Object.defineProperty 把这些 property 全部转为 getter/setter。当执行 render 函数时会触发用到的响应式数据的 gettergetter 会进行依赖收集并放到 Watcher 中。当修改被收集到 Watcher 中的响应式数据时会触发 settersetter 会通知 Watcher 来重新执行 render 函数更新DOM树同时再次进行第2步形成闭环重复整个流程。 template 模板最终也会被编译为 render 函数执行。参考虚拟DOM树生成流程 响应式数据的目标当对象本身或是属性发生变化时会运行一些函数最常见的是 render 函数。
具体实现vue 用到了几个核心部件。
ObserverDepWatcherSchedule
2Observer
目标将传递给 Vue 实例的 data 选项普通 js 对象转化为响应式对象。
为了实现这点Observer 把对象的每个属性通过 Object.defineProperty 转换为带有 getter/setter 的属性。这样当访问或修改这些属性时vue 就可以做一些事情了。 Observer 是 Vue 内部的构造器可以通过 Vue 提供的静态方法 Vue.observable(object) 间接使用该功能。 Vue.observable(object) 的使用场景参考这篇文章。 时间点发生在 beforeCreate 之后created之前。
具体实现递归遍历所有属性以完成深度的属性转换。 而由于只能遍历已有的属性所以无法监测到将来动态添加或删除的属性。因为提供了 $set 和 $delete 这2个实例方法。 对于数组为了监听那些可能改变数组内容的方法vue 更改了数组的隐式原型。
vue 处理过后的数组 this.arr.__proto__上有7个方法可以被监听到。同时 this.arr.__proto__.__proto__ 指向真正的数组原型来正常使用数组的其他方法。 注意直接修改数组的元素是无法触发更新的。比如this.arr[0] 1。但是修改数组中某一个元素对象的属性时是可以监听到的。比如 this.arr[0].name xxx 总之Observer 就是为了让一个对象属性的读取和赋值内部数组变化等都可以被感知到。
3Dep
作用和原理
Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个 Dep 实例一个列表每个 Dep 实例都可以做两件事
记录收集依赖当读取响应式对象的某个属性时它会进行依赖收集。派发更新当改变某个属性时它会派发更新。
function defineReactive(obj, key, val) {let Dep; // 依赖Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: () {// 被读取了将这个依赖收集起来Dep.depend();return val;},set: (newVal) {if (val newVal) {return;}val newVal;// 被改变了派发更新Dep.notify();},});
}举例
!-- 组件 --
templatedivdiv{{ obj.a }}/divdiv{{ arr }}/divbutton clickcount修改conut/button/div
/templatescript
// 会创建的 Dep 的元素
export default {data() {return {obj: { // Depa: 1, // Depb: 2},arr: [1, 23, 4], // Depcount: 0};},
};
/script因为模板中使用了 obj.a所以 obj 自身和 a 属性都会创建 Dep。count 不会创建是因为count其实并没有在模板中使用而事件在渲染时不会运行。
有个问题为什么要给对象自身也创建个 Dep直接给用到的属性创建不可以吗 不可以因为直接修改对象this.obj xxx或通过 this.$set(this.obj,c, 3) 或 this.$set(this.obj,a) 增删属性时都需要直接修改对象自身才能完成响应式更新。 所以最好一开始就定义好对象属性的初始值来避免使用 this.$set 或 this.$delete 来触发对象自身的 Dep。 因为使用 this.obj.a 直接触发属性 a 的 Dep 效率会更好。
对一个属性来说会收集依赖的有3个可能的位置因为都需要响应式更新或执行
模板也就是 render() 中。this.$watch() 中。computed() 中。
4Watcher
新的问题Dep 是如何知道谁在用我的换句话说是谁触发的 getter 后执行的 Dep.depend()。
比如某个函数执行时用到了响应式数据 aa 怎么知道是哪个函数用的自己
Vue的解决方式Vue 不会直接执行函数而是把函数交给一个叫 Watcher一个对象去执行。每个用到响应式数据的函数执行时都会创建一个 Watcher通过它来执行函数。 之后响应式数据变化时Dep 会通知对应的 Watcher去运行对应的函数来触发更新。 Watcher 大致原理
首先有一个全局变量。
在执行给它的函数之前将它的 this 赋值给这个全局变量。执行函数时会触发响应式数据的 getter 后执行的 Dep.depend()。在 Dep.depend() 的逻辑中会检查这个全局变量从而确定是哪个 Watcher。函数执行完后清空全局变量。
所以对于一个组件实例来说都至少对应一个 Watcher 它记录的是该组件的 render 函数。 Watcher 首先会运行一次 render 来收集依赖于是 render 函数中用到的响应式数据都会记录这个 Watcher。 之后响应式数据变化Dep 会通知这个 Watcher 来运行 render 函数触发更新重新渲染页面同时再次收集当前的依赖。
打印组件的 this Watcher 触发更新时会进行对比新旧虚拟DOM树完成对真实DOM的更新。具体原理参考diff 的原理
5Schedule
新的问题又出现了假如 render 函数中使用的响应式数据有多个 abcd那这些数据都会记录 Watcher之后一次性修改这4个时render 函数就会执行4次效率岂不是很低。
实际上Watcher 在收到派发更新的通知后不是立即执行对应的函数而是把自己交给一个叫Schedule调度器的东西。
调度器维护一个队列相同的 Watcher 仅会存在一次类似 Set。这些 Watcher 也不是立即执行而是把需要执行的 Watcher 放到事件循环的微队列中通过工具方法 nextTick 。 所以当响应式数据发生变化时执行的 render 函数是异步的。 整体流程 以上。
