生命周期:
整体变化不大,只是大部分生命周期钩子前+"on",功能是类似的。需要注意的是,Vue3在组合式API中使用生命周期钩子时需要先引入,Vue2在选项API中是可以直接使用的。
//Vue3 <script setup> import {{生命周期钩子}} from 'vue' 生命周期钩子(() => {}) //可以将不同的逻辑拆成多个相同的生命周期钩子,它会按照顺序执行不会被覆盖 </script> //Vue2 <script> export default{ 生命周期钩子(){} //直接调用 //如果书写相同的生命周期钩子,后面的会覆盖前面的 } </script>
根节点:
Vue2:只能存在一个根节点。
Vue3:可以存在多个根节点。
//Vue2 <template> <div> <!-- 唯一的根节点 --> <header></header> <main></main> <footer></footer> </div> </template> //Vue3 <template> <!-- 多个根节点 --> <header></header> <main></main> <footer></footer> </template>
API:
Vue2:选项API(Options API),一个逻辑会散乱在文件的不同位置,会导致代码的可读性变差,不易维护,当需要修改某个逻辑时,需要来回跳转文件位置。
Vue3:组合式API(Composition API),可将同一逻辑的内容写在一起,增强了代码的可读性。
响应式原理:
Vue2:Object.defineProperty
Vue3:proxy
事件缓存:
Vue3的cacheHandler
可在第一次渲染后缓存事件,相对Vue2无需每次渲染都传递一个新函数
参考文献地址:https://juejin.cn/post/7067413380922867725