vue3 + typescript 前端vue.js

一、vue3 1、生命周期
生命周期的钩子函数添加了前缀on，销毁组件的方法更换了名字
beforeDestroy -> beforeUnmount
destroyed -> unmouted
2、全局变量

Vue.prototype.$http = ''//vue3 const app = createApp({}); app.config.globalProperties.$http = ''

3、vue实例化

//vue3 通过createApp创建vue实例化 createApp(App, {}).use(store).use(router).mount('#app')//vue2 const app = new Vue({ router, store, render: h => h(App) }).$mount('#app');

4、插槽

//vue2//具名作用域 //默认插槽//使用//vue3使用v-slot简写#//具名作用域 //默认插槽//使用 //同一个组件有多个插槽时，需要带上名称，防止插槽作用域混乱

5、自定义指令

// vue2 Vue.directive('focus',{ bind()//初始调用一次 update()// unbind()//解绑调用 inserted: function(e){ e.focus(); } })//vue3 const app = createApp({}); app.directive('focus',{ mounted(el){ el.focus() } })//调用

6、v-model升级
变更：自定义组件使用v-model，事件及名称发生变化，v-bind.async去掉了async
新增：同一组件可配置多个v-model
新增：可自定义v-model修饰符

// vue2//默认绑定在value属性上 // 如果需要对一个prop进行双向绑定，如dialog，外部可以控制组件显示或隐藏，组件内部关闭visible属性隐藏，同时将visible同步给外部，可以通过update:visiblethis.$emit('update:visible', false)// 父组件通过事件进行监听@update:visible/:visible.sync // vue3 // 需要绑定多个v-model，只需要给v-model传递一个参数

7、异步组件
vue3使用defineAsyncComponent定义异步组件，配置选项component替换为loader，loader函数本身不接收resolve和reject，且必须返回一个promise

8、组合式API
【vue3 + typescript】组合式API：
生命周期钩子函数、computed、watch、watchEffect
reactive、ref、toRefs
（1）setup vue3新增的选项，组件使用组合式API的入口
setup执行在beforeCreate之前。
接收两个参数：props、context

// props传入的属性，响应式的，因此不能用es6解构 setup(props) { const {name} = props; const t = reactive({count: 0})return { t } }

（2）ref、toRefs、readonly、reactive vue3通过ref、reactive定义数据
vue2在data里面定义数据
reactive 用于处理对象的双向绑定
ref 处理js或对象的双向绑定
在使用的时候person.name...，有时候会觉得很繁琐，可以通过解构后使用数据
toRefs用于将reactive对象转化为ref对象的普通对象
readonly用于防止数据被修改

setup(props) { const {name} = props; // 声明基本类型 const num = ref(0); const test = readonly(num); // 只读// 声明对象 const person = ref({name: 'haha'})// 使用reactive声明对象 const t = reactive({count: 0})return { num, person, ...toRefs(t) } }// 使用{{t.count}} {{person.name}} {{count}}

（3）生命钩子 vue3的生命钩子需要通过vue引入
注：breforeCreate、create被setup替代，但是vue也能够兼容使用。
同时vue新增了onRenderTracked、onRenderTriggered用于调试的方法

API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

使用：

setup(props) { onMounted(() => {}) }

（4）watch和watchEffect watch：用于监听数据源、并在回调中执行的作用

// source数据源 callback回调函数，option执行回调函数的选项（deep、immediate、flush） watch(source, callback,[options])

watchEffect：不需要手动传入依赖、会先执行一次自动收集依赖，只能获取更新后的值，无法获取到变化前的值
watchEffect(() = {console.log('123')})
9、Hooks
vue2使用mixin引入可复用的功能，当组件使用混入对象时，混入对象会注入组件的本身选项
vue3引入新的vue-hooks
引入原因：

跨组件难以复用
大组件、维护困难、颗粒度不好控制、组件嵌套层次太多影响性能
类组件、this不可控、不易理解
mixins 逻辑相互嵌套、mixin之间不易消费

优势：

允许hooks之前互相传值
组件之前重用状态逻辑
明确表明逻辑出处

10、数据响应
vue2是通过Object.defineProperty只能劫持对象的属性
给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式。如果遍历的属性也是对象，则需要深度遍历
vue3是Proxy 是直接代理对象、不需要遍历
11、Teleport
使用Teleport标签，可以指定dialog等组件渲染到特定的位置

----

12、片段（Fragment）
vue3 多个根节点
13.Tree-Shaking变化
nextTick是vue全局的api，vue3需要通过具名的方式引入。
Vue.nextTick() 是一个从 Vue 对象直接暴露出来的全局 API，其实 $nextTick() 只是 Vue.nextTick() 的一个简易包装，只是为了方便而把后者的回调函数的 this 绑定到了当前的实例。