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,方便重用