Vue3.0学习笔记（持续更新中......）

Vue3.0

1. Vue3. 0 六大亮点
   • Preformance：性能比 vue2.x 快
   • Tree shaking support：按需编译，体积比 vue2.x 小
   • Composition API：组合 API（类似 React Hooks）
   • Better TypeScript support：更好的 TS 支持
   • Custom Renderer API：暴露了自定义的 API
   • Fragment，Teleport（Protal）,Suspense：更先进的组件
2. Vue3. 0 是如何变快的?
   • diff 算法优化:
     • Vue2 中的虚拟 dom 是进行全量的对比
     • Vue3 新增了静态标记(PatchFlag),在与上次虚拟节点进行对比时候，只对比带有 patch flag 的节点,并且可以通过 flag 的信息得知当前节点要对比的具体内容
   • hoistStatic 静态提升
     • Vue2 中无论元素是否参与更新，每次都会重新创建，然后再渲染
     • Vue3 中对于不参与更新的元素，会做静态提升，只会被创建次， 在渲染时 直接复用即可
   • cachelHandlers 事件侦听器缓存
     • 默认情况下 FonClick 会被视为动态绑定，所以每次都会去追踪它的变化,但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
   • ssr 渲染
     • 当有大量静态的内容时候，这些内容会被当做纯字符串推进一 个 buffer 里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虛拟 dmo 来渲染的快上很多很多
     • 当静态内容大到一定量级时候， 会用 createStaticVNode 方法在客户端去生成个 static node,这些静态 node,会被直接 innerHtml,就不需要创建对象，然后根据对象渲染。
3. Vue3. 0 中的 setup()函数
   • setup()是组合 API 的入口函数，return 出需要使用的函数
   • 执行时间：setup() => beforeCreate() => Created()
   • 注意点
     1. 由于在setup()中还没有执行Created()，所以没有this -> this === undefined
     2. setup()只能是同步，不能是异步的
   • setup(props,context) 的两个参数
     • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
     • context：上下文对象
       • attrs: 值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性, 相当于 this.$attrs。
       • slots: 收到的插槽内容, 相当于 this.$slots。
       • emit: 分发自定义事件的函数, 相当于 this.$emit。
4. Vue3. 0 中的 reactive()函数
   • reactive()是 Vue3 中提供实现响应式数据的方法，通过 ES6 的 Proxy 来实现
   • 注意点：
     1. 参数必须是对象（JOSN Object/Array）
     2. 如果给 reactive 传递了其他数据结构，默认情况下修改数据页面不会自动更新，需要页面更新可以通过重新赋值的方式(基本数据结构不生效)
5. Vue3. 0 中的 ref()函数
   • ref() 也是 Vue3 中提供实现响应式数据的方法，实现对简单数据结构的监听
   • 本质：ref()的底层实现还是 reactive() ref(xx) => reactive((value:xx))
   • 注意点：
     1. 在 template 中使用 ref 的值不用通过 value 获取
     2. 在 script 中使用 ref 的值必须通过 value 获取
6. Vue3. 0 中的递归监听与非递归监听
   • 递归监听：reactive()，ref()

     消耗性能，多层级数据结构会监听每一层

   • 非递归监听：shallowReactive()，shallowRef()

     节省性能，多层级数据结构只会监听第一层

     • 可通过 triggerRef() 来触发非递归监听内层级属性更新界面
7. Vue3. 0 中的 toRow()函数
   • 作用：用来获取 reactive()和 ref()定义的响应式数据的原始数据
8. Vue3. 0 中的 markRow()函数
   • 作用：用来使数据不被追踪，不能将数据改成响应式
9. Vue3. 0 中的 toRef()函数
   • toRef 和 ref 一样，同样也是创建响应式数据的
   • 区别：
     1. ref 将对象中某属性变为响应式，修改时原数据不受影响
     2. toRef 会改变原数据
     3. toRef 创建的数据，改变时界面不会自动更新（存在疑惑)
   • 应用场景：性能优化
     • 想使创建的响应式数据与元数据关联起来
     • 更新响应式数据后，不想更新 UI
10. Vue3. 0 中的 toRefs()函数
    • toRef()只能接收两个参数，传递某对象多个属性值时会很麻烦
    • toRefs 与 toRef 区别
      1. toRefs 是避免 toRef 对多个属性操作繁琐
      2. toRefs 底层原理是使用 toRef 方法遍历对象属性值
11. Vue3. 0 中的 customRef()函数
    • customRef(track,trigger) 返回一个 ref 对象，可以显式的控制依赖追踪和触发响应
12. Vue3. 0 中的 readonly()系列函数
    • Vue3.0 中提供的这个 API，使得数据被保护，只读不可修改
    • 默认所有层数据都只读，若只限制第一层只读，可使用 shallowReadonly()
    • isReadonly() 用来检测数据创建来源是否是 readonly
    • 若进行修改，浏览器会提示操作失败，目标只读
13. Vue3. 0 中的 watch()监听

    watch(attr, (nV, oV) => {});
    // 监听某些属性
     watch([attr1,attr2,...], (nV, oV) => {});
    

    • 若监听的是 reactive 定义的响应式数据
      • 无法正确获得 oldValue
      • 强制开启了深度监视模式，deep 配置失效
      • 监听对象中的某个属性时()=>obj.xxx，deep 配置有效
14. Vue3. 0 中的 watchEffect()监听
    • watchEffect():不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
    • watchEffect 有点像 computed：
      • 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
      • 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。
15. Vue3. 0 中的生命周期
    • Vue3.0 中可以继续使用 Vue2.x 中的生命周期钩子，但有有两个被更名
      • beforeDestroy改名为 beforeUnmount
      • destroyed改名为 unmounted
    • Vue3.0 提供了 Composition API 形式的生命周期钩子，与 Vue2.x 中钩子对应关系如下：
      • beforeCreate===>setup()
      • created========>setup()
      • beforeMount ===>onBeforeMount
      • mounted========>onMounted
      • beforeUpdate===>onBeforeUpdate
      • updated =======>onUpdated
      • beforeUnmount =>onBeforeUnmount
      • unmounted =====>onUnmounted
16. Vue3. 0 中的响应式数据的判断
    • isRef: 检查一个值是否为一个 ref 对象
    • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
    • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
    • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
17. Vue3. 0 中的 Composition API 优势

    可以更加优雅的组织我们的代码、函数。让相关功能的代码更加有序的组织在一起。