# Vue3

# 新特性

# 新增三个组件

Fragment。支持多个根节点
Suspense。可以在组件渲染之前的等待时间显示指定内容
Teleport。可以让子组件能够在视觉上跳出父组件

# 新增指令v-memo

可以缓存 html 模板，比如 v-for 列表不会变化的就缓存，简单说就是用内存换时间

# 支持树摇

# Composition API

可以更好的逻辑复用和代码组织，同一功能的代码不至于像以前一样太分散，虽然Vue2中可以用minxin来实现复用代码，但也存在问题，比如方法或属性名会冲突，代码来源也不清楚等。

# Proxy代替Object.defineProperty

# 重构虚拟DOM

在编译时会将事件缓存、将slot编译为lazy函数、保存静态节点直接复用(静态提升)、以及添加静态标记、Diff算法使用最长递增子序列优化了对比流程，使得虚拟DOM生成速度大大提升。

# 支持在style标签中使用v-bind，给css绑定js变量

# 用setup代替beforeCreate和created这两个生命周期

# 新增了两个开发环境的钩子函数

onRenderTracked。在组件更新时，会跟踪组件里所有变量和方法的变化。
onRenderTriggered。在每次触发渲染时，会返回发生变化的新旧值，可以让我们进行有针对性调试。

# 不支持IE11

# 对TS的支持度更好

# watch和watchEffect的区别

# watch

需要明确监听哪个属性；触发时会返回新值和老值；也就是说第一次不会执行，只有变化时才会重新执行。

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

// 响应式对象
const boy = reactive({ age:18 })
watch(()=>boy.age, (newValue, oldValue)=>{ ... })

// 监听多个
watch( [name, ()=>boy.age], (newValue, oldValue)=>{ ... } )

# watchEffect

传入一个立即执行函数，默认第一次也会执行一次；不需要传入监听内容，会自动收集函数内的数据源作为依赖，在依赖变化的时候又会重新执行该函数，如果没有依赖就不会执。