|
昨日响应式原理总结：
1.要知道什么是响应式？zauvue2中响应式是如何实现的
2.数据劫持？对data遍历、递归添加getter/setter.(Object.defineProperty())
3.依赖收集？指令和响应式数据第一次接触时进行收集
4.Wacher ，异步更新队列，完成最终的DOM更新。
生命周期
vue生命周期分为四个阶段(常用的有8个，实际上vue总共有11个)
-
在beforeCreate之前，Vue做了两件事：methods声明、生命周期钩子函数声明 -
第一阶段 创建阶段（beforeCreate,created） -
created一般调接口，开启长连接 -
在创建阶段有data数据注入、data数据劫持：
- 1.遍历递归data选项，给每个声明式变量添加setter/getter
- 2.把劫持过变量都放在组件实列上
-
在created之后、beforeMount之前，vue做了下面这件事：
- 1.通过el、template寻找组件试图模板
- 2.把找到的template视图（带有指令的HTML字符串）编译成render函数
-
3第二阶段 挂载阶段 (beforeMount,mounted) -
mounted一般可以调接口、开启长连接、开定时器、执行一些与DOM的操作 -
在挂载阶段,beforeMount后mounted前vue做了下面这些事
- 根据render()渲染函数，生成”抽象语法树AST“，再把AST第一次被创建成"虚拟DOM（VNode）"（VNode是真实DOM的一种数据描述，它本质上是json格式的数据）
- 根据VNode创建真实DOM(背后有依赖收集、Watcher工作)把那些声明式变量都替换成真实数据
- 编译器第一次执行
-
第三阶段 更新阶段(beforeUpdate,updated) -
undated偶尔会用：与一个DOM有关的任务完成了，我们要做点事，可以这里做。 -
在第三阶段中在beforeUpdate和updated中当data数据发生变化时进入更新阶段
- 当vue上下文中data发生变化时，使用render()渲染函数再生成一个新的Vnode
- 使用diff运算，patch(‘old vnode’ , ‘new vnode’)找出两个Vnode之间最小差异。
- notify通知Watcher根据”依赖收集“再次更新真实DOM
- 虚拟DOM是MVVM的本质
-
第四阶段 销毁阶段(beforeDestroy,destroyed)
- ? 当调用$destroy()或者路由切换时，组件进入销毁阶段
- 在销毁中vue做了:1拆卸掉Watcher,所以DOM不可能再发生更新
- 拆卸掉当前组件的所有的子组件，所以这些子组件也都进入销毁阶段
- 卸载掉当前组件中的事件处理器
-
在beforeDestroy可以关闭长连接、关闭定时器、清除一些占内存的一些数据缓存
计算属性
计算属性 computed
- 作用：把复杂的表达式从视图模板抽离出来，放在计算属性中。 1.提高可阅读性 2.可提升性能
- 计算属性要定义在computed中，它本质是一个函数
- 计算属性是get操作，所以计算属性可以用在指令上。
- 计算属性可以当作一个响应式变量来来访问，在js中使用this访问
- 计算属性在计算过程中，与多个声明式变量相关时，只要有任意一个声明式变量发生变化，计算属性都会重新进行计算，无关的声明式变量发生变化，都不会重新计算
- 计算属性还可以用在v-model中，但v-model还具有set功能，所以计算属性要拆成get/set的写法
侦听器
侦听器（监听器）watch是vue组件的一个选项，不是响应式原理中的watcher
- 用于监听一个响应式变量（带有__ ob __）的变化.比如经常监听data、计算属性、vuex、$route等等的变化
- watch对象放的是函数，但不能用this访问。
- 当watch函数是箭头语法时，它的this就不再是当前组件实例了
总结：当我们需要根据某个变量的变化时，另一件事要工作时watch
柯里化：在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。
|