vue3 知识点总结

知识点

setup 函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑卸载 setup 里就可以
ref 函数的使用，它是一个神奇的函数，要在template中使用的变量，必须用ref包装一下。
return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法。

如何选择 Ref()和 reactive()

Vue2.x 和 Vue3.x 生命周期对比

vue3组件执行同等功能优先于vue2执行
vue3项目 推荐使用vue3 的钩子函数

Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount 组件卸载之前执行
destroyed -> onUnmounted
activated -> onActivated 中切换组件(组件激活)
deactivated -> onDeactivated 中切换组件(组件不激活)
errorCaptured -> onErrorCaptured

vue3 新增钩子函数onRenderTracked 和 onRenderTriggered （主要用于调试）

对 event 对象属性的详细介绍：

• key 那边变量发生了变化
• newValue 更新后变量的值
• oldValue 更新前变量的值
• target 目前页面中的响应变量和函数

onRenderTracked((event) => {
   
  console.log("vue3   状态跟踪组件----------->onRenderTracked")</