Vue3.0

vue3优势

性能更好，体积更小，TS支支
composition api：更好的代码组织（可以把业务逻辑块集中管理）、更好的逻辑复用、更好的类型推导

Vue3 和 React

vue options api 对应 react class component
vue composition api 对应 React hooks

Vue3 新特性

1. 允许没有根标签
2. 移除过滤器 filter
3. 移除 keyCode
4. 移除 v-on.native
5. 在子组件上声明自定义 emit 才认为是自定义事件

动画

• v-enter — v-enter-from
• v-leave-to — vl-eave-to
• v-leave — v-leave-from
• v-enter-to — v-enter-to

生命周期

beforeDestroy -> beforeunmount
destroyed -> unmouted

watch、watchEffect

import { watch } from 'vue'

监听一个 ref 基本类型数据： 非数组和数组形式均可
监听多个 ref 基本类型数据： newValue、oldValue 数组形式呈现

watch(
  data,
  // [data1,data2], // 监听多个 ref 基本属性
  (newValue, oldValue) => {},
  { immediate: true }
)

监听 ref 引用类型数据： 默认开启深度监视、无法正确的获取 oldValue

watch(
  objdata,
  (newValue, oldValue) => {
    console.log(oldValue.name) // 无法正确的获取 oldValue
  },
  { deep: true} // 必须设置
)

监听一个 reactive 基本类型数据 ：函数形式
监听多个 reactive 基本类型数据 ：数组形式

watch(
  () => data,
  // [() => data1, () => data2], // 监听多个 reactive 属性
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
)

监听多个 reactive 引用类型数据

watch(
  () => objdata,
  (newValue, oldValue) => {
    console.log(oldValue.name) // 无法正确的获取 oldValue
  },
  { deep: true} // 必须设置
)

watchEffect

不用指明监视属性，回调中用到什么属性即监视什么属性，默认开启 immediate:true

import { watchEffect } from 'vue'
watchEffect(() => {
  // ...
})