vue3 VS vue2的踩坑记录

1. vue3中 filters过滤器不再被支持，使用方法调用或计算属性来替换。

2. vue3强制事件名称格式为："kebab-case"。

3. vue3禁止使用destroyed和beforeDestroy 生命周期钩子。使用beforeUnmount替换。

4. 现在VUE CLI 默认支持vue3, 不需要安装vue-cli-plugin-vue-next插件

5. 新的全局API： createApp ； use全局API在Vue3中不可再使用；

   // 新写法如下：
   const app = createApp(MyApp)
   app.use(VueRouter)
   

6. vue2在原型上全局设置方法Vue.prototype.$video = Video；vue3全局设置方法：app.config.globalProperties.$video = Video

7. vue3 添加了组合APIsetup
   选项API生命周期选项和组合API之间的映射

   • ~~beforeCreate~~ -> use setup()
   • ~~created~~ -> use setup()
   • beforeMount->onBeforeMount
   • mounted -> onMounted
   • beforeUpdate -> onBeforeUpdate
   • updated -> onUpdated
   • beforeUnmount -> onBeforeUnmount
   • unmounted-> onUnmounted
   • errorCaptured -> onErrorCaptured
   • renderTracked -> onRenderTracked
   • renderTriggered -> onRenderTriggered

8. 踩坑！！！ setup 不能在前面加个async， 页面会显示不出来

9. vue图片懒加载插件vue-lazyload不兼容, 报错代码: Vue.prototype.$Lazyload = lazy; 同上问题6

10. vue3 setup里获取vuex，用 useStore

11. getCurrentInstance 获取上下文ctx

12. vue3 的watch 默认就是深度监听