花儿飘呀飘呀 进来的你们都是最棒最棒的小孩 dont self-doubt
接下来魔仙带你们复习vue知识点好吗 简洁快速
vuex
集中管理所有组件状态
1.state 状态中心 你定义的状态
2.mutations 更改状态 可以设置状态
3.actions 异步更改状态 业务逻辑写在里面
4.getters 可派生状态 类似于计算属性 5.modules 将state分为很多模块 管理方便
watch/computed
watch：用于监听数据 没有缓存性 如果监听对象 把deep:true打开 但是这样会很消耗性能 优化使用字符串监听
computed：具有缓存性 当依赖的值发生变化会去重新计算 第一次加载时监听 不支持异步
template预编译 模版转换为渲染函数的过程是在项目构建过程中完成的 这个过程就是模版预编译
vue2/3区别
1.proxy代替Object.defineProperty
优点：
可以直接监听数组的数据变化
监听的目标为对象本身 无需遍历每个属性 直接实现对象的新增/删除
可拦截has apply ownkey13种方法
2.重构VNode
模版编译时优化 一些静态节点变为常量
-> `预编译的时候标记出可能变化的节点 这样diff可以直接跳过永不变化的节点 只对比变化的那一部分`
slot编译为lazy函数 slot渲染权给子组件
内联事件的提取并重用
3.新增组合式api 更好的逻辑复用
4.代码结构优化 便于tree shaking 体积更小
| vue2 | vue3 | 解释 |
|---|---|---|
| beforeCreate | setup替代 | 创建实例开始 |
| created | setup替代 | 实例创建完成✅ 属性绑定 还未生成真实dom |
| beforeMount | onBeforeMount | 模版编译/挂载之前 |
| mounted | onMounted | 创建实例完成 生成真实dom 并替换到dom🌲中 |
| beforeUpdate | onBeforeUpdate | 更新开始 通知所有依赖项更新ui |
| updated | onUpdated | 更新完成 |
| beforeDestroy | onBeforeUnMount | 销毁开始 删除组件自身并递归自组件 1.删除节点2.清除依赖3.解绑监听 |
| destroyed | onUnMounted | 销毁完成✅ |
| errorCaptured | onErrorCaptured | 组件错误时候 |
| onRenderTracked | 渲染被追踪 只用于开发 | |
| onRenderTriggered | 渲染被触发 只用于开发 |
