Vue3与vue2的不同点
全局注册(属性/方法)：
vue2:
Vue.prototype.xxx = xxx
vue3:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.name = '沐华'
.
在其他组件中调用:
template
Vue2 中只能有一个根节点，而 Vue3 中支持多个根节点
1
2
获取 DOM
Vue3 中获取 DOM 如下:
解除绑定
Vue2 中一般清除定时器、监听之类的操作有两种方法：
- 一是用
$once搭配hook: BeforeDestroy使用，这个 Vue3 不支持了 - 二是用
beforeDestroy / deactivated这俩钩子，Vue3 中只是把钩子函数重命名了一下
ref 和 reactive
这两都是用于创建响应式对象，ref 通常用于创建基础类型，reactive 通常用于创建响应式，这是官方推荐的，现实中也不尽然，有人也用 ref 来定义数组，也有人一个组件只定义一个 reactive，所有数据都放里面，就像 Vue2 的 data 一样，也有人都用
需要知道的有两点：
ref 如果传入的是引用类型，内部源码也是调用 reactive 来实现的
ref 返回的属性在 template 中使用，直接用就是了，但是在 JS 中使用，需要通过 .value 获取，如下。因为 ref 返回的是一个包装对象
{{ count }}
为什么 ref 要返回一个包装对象？Vue2 中 data 都是返回一个对象这都知道
因为对象引用类型，可以用来做代理或劫持，如果只返回基础类型的话，存储在栈中，执行栈里执行完就回收了，没有办法添加代理或劫持，自然就没办法追踪后续的变化，所以不得不返回一个对象，这样才能有响应式
toRef 和 toRefs
这两共同点就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性，如果不用这两直接解构的话是会丢失响应式效果的
主要就是方便我们使用直接变量 xxx，而不需要 data.xxx。并且我们修改 xxx 的时候也是直接修改源对象属性的
这两的区别：带 s 和不带 s，就是单数和复数嘛，意思就是取一个和取一堆咯
watch 与 watchEffect
watch
就是用来监听一个已有属性，发生变化的时候做某些操作，Vue2 中常用有如下三种写法
watch: {
userId: 'getData',
userName (newName, oldName) {
this.getData()
},
userInfo: {
handler (newVal, newVal) { this.getData() },
immediate: true,
deep: true
}
}而 Vue3 中监听的写法就丰富得多了
Vue3 的 watch 是一个函数，能接收三个参数，参数一是监听的属性，参数二是接收新值和老值的回调函数，参数三是配置项
关于副作用，watch 和后面说到的 watchEffect 是一样的。
在 watch 回调函数中能接收第三个参数 onInvalidate，为清除副作用的函数，首次触发监听的回调函数(handler)不会执行 onInvalidate，之后每次触发默认会先执行 onInvalidate
就是说默认它的执行机制在更新之前调用，比如如下代码，当 key 触发更新时会先打印 222 再打印 沐华，如果需要在更新之后调用，可以在 watch 第三个配置项中添加 flush: post，
// 回调函数接收一个参数，为清除副作用的函数
watch(key, (newKey, oldKey, onInvalidate) => {
console.log('沐华')
// 获取DOM默认获取到的是更新前的dom，如果是flush: post，可以获取到更新后的dom
console.log('DOM节点：', dom.innterHTML)
onInvalidate(() => {
console.log(2222)
})
}) onInvalidate 的使用场景就是：比如监听的回调函数(handler)里有一些异步操作，当再次触发 watch 的时候可以用它来对前面未完成的异步任务执行取消/忽略/重置/初始化某些操作，比如取消上一次触发 watch 时未完成的请求
watchEffect
Vue3 中除了 watch 还增加了一个 watchEffect。区别是：
watch 是对传入的一个或多个值进行监听，触发时会返回新值和老值，且默认第一次不会执行
watchEffect 是传入一个立即执行函数，所以默认第一次就会执行，且不需要传入监听内容，会自动收集函数内的数据源作为依赖，当依赖发生变化时会重新执行函数(有点像computed的味道)，而且不会返回新值和老值
清除副作用和副作用的刷新时机是一样的，区别是 watch 中会作为回调的第三个参数传入，watchEffect 中是回调函数的第一个参数
正常情况下组件销毁/卸载后这两都会自动停止监听，但也有例外，比如异步的方式，在 setTimeout 里创建的监听就都需要手动停止监听，停止方式如下
// 监听方法赋值
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要停止监听的时候，手动调用停止监听
unwatch()
unwatchEffect()watchEffect 使用：
watchEffect 如果需要修改配置项 flush 为 post 或 sync 时，可以直接使用别名，如下
watchEffect(() => {...}, {
flush: 'post',
})
// 和下面这个是一样的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
flush: 'sync',
})
// 和下面这个是一样的
watchSyncEffect(() => {})
Vue3 组件通信的方式
props + defineProps
defineEmits
defineExpose / ref （comp.value.xxx 获取子组件对外暴露的属性;// 调用子组件对外暴露的方法）
useAttrs
v-model(支持多个)
provide / inject
Vuex / Pinia
mitt （Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus，先安装 npm i mitt -S）