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

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount -> onBeforeUnmount
• unmounted -> onUnmounted

vue3

setup

在beforeCreate之前调用，里面的this不是当前实例
响应式数据：ref：值类型的数据；reactive：引用类型的数据
先import导入要用到的

点击删除

computed

watch监听单个对象

watchEffect监听

compositionApi

• 语义明确，书写简洁
• 不用通过Vue再编译
• 复用，低耦合性更强（没有this）
• 和react hooks异曲同工

自定义set

没有this，方便重用