vue3介绍

最新推荐文章于 2025-11-28 22:49:29 发布

原创最新推荐文章于 2025-11-28 22:49:29 发布 · 586 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 专栏收录该内容

16 篇文章

订阅专栏

Vue3带来了许多改进，包括基本兼容Vue2的代码、更快的初始渲染速度和更清晰的API。最大的变化是引入了组合式API，降低了代码耦合，提高了复用性。此外，生命周期钩子函数发生了变化，如beforeCreate替换为setup。Vue3还支持按需引用和自定义响应式数据处理。全局方法定义也有所改变，使用app.config.globalProperties进行设置。Vue3的这些特性使得开发更加高效和直观。

vue3介绍

特点
与vue2的不同
vue3

特点

基本兼容vue2代码
初始渲染更快
语义明确，书写简单，不用Vue再编译
按需引用（与vue2最大区别）
组合式api（更加接近原生js，更加直观，更有效的降低了代码耦合性）

与vue2的不同

启动方式

main.js文件
vue3：

var app = createApp(App);
app.use(store).use(router).mount('#app')

vue2：

import Vue from 'vue'
import App from './App.vue'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

全局方法定义

vue3：
main.js文件

app.config.globalProperties.$mysay = function(msg){alert(msg+"你好")}

home.vue

<button @click="$mysay('vue3')">点击</button>

结果：alert出 “vue3你好”
vue2：
main.js

Vue.prototype.$http = axios;

生命周期

vue2：
创建前后：beforeCreate(){ }， created(){ }
挂载前后：beforeMount(){ }， mounted(){ }
更新前后：beforeUpdate(){ }， updated(){ }
销毁前后：beforeDestroy(){ }， destroyed(){ }
vue3：
和vue2几乎一样，前面加一个on，可能会变，具体查看官方文档 vue3