vue阶段 总结

目录

计算和副作用

BeReactive: 将响应式的值绑定到UI

Options API => Composition API 【关注点分离】

watch总结

computed

钩子到生命周期的映射

组件封装

---

计算和副作用

• 用纯函数计算：计算页面的元素、层级关系、属性样式......
• 用Effect【副作用】提供：网络请求、Cookie操作、window操作、绑定事件、渲染......

UI = f(data) with effect[]

BeReactive: 将响应式的值绑定到UI

• Get Value
  • Track（追踪用到的组件）
• Value Changed
  • Trigger（通知所有用到的组件刷新）

 

Options API => Composition API 【关注点分离】

vue迭代时产生的proposal 提议：

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md

分离之前是耦合的

watch总结

• 封装副作用
• 依赖副作用（依赖reactive值变化时的trigger->触发副作用）【trigger是watch的副作用】
• 尽量用watch，不用watchEffect

computed

• 计算价值（可以用函数替代）
• 缓存价值（需要vue提供）
  • 依赖的ref发生变的时候触发执行

钩子到生命周期的映射

beforeCreate ->                         使用 setup()

created ->                                 使用 setup()

beforeMount ->                         onBeforeMount 【挂载前】

mounted ->                               onMounted【挂载】

beforeUpdate ->                       onBeforeUpdate【重新渲染前】

updated ->                                onUpdated【重新渲染】

beforeUnmount ->                    onBeforeUnmount【卸载前】

unmounted ->                           onUnmounted【卸载】

errorCaptured -> onErrorCaptured

renderTracked -> onRenderTracked

renderTriggered -> onRenderTriggered

activated -> onActivated【keep alive】

deactivated -> onDeactivated

蓝色部分是真正的生命周期

组件封装

• 展示组件 / 容器组件 （slot） 【根据属性去做】
• 样式（css-module）
• 输入组件 / 表单组件
  • 可以在vue体系外设计class【可以创建自己的语言】
• 修改vNode的props