vue3+typescript

1.vue31，lifecycle生命周期的钩子函数以on为前缀，销毁组件的方法改为名称beforeDestroy->beforeUnmountdestroyed->unmounted2，全局变量Vue.prototype。$http=''//vue3constapp=createApp({});app.config.globalProperties.$http=''3.vue实例化//vue3通过createApp创建vue实例化createApp(App,{}).use(store).use(router).mount('#app')//vue2constapp=newVue({router,store,render:h=>h(App)}).$mount('#app');4.slot//vue2

//使用//vue3使用v-slotshorthand#//使用//当同一个组件有多个slot时，需要带上名字，防止slot作用域混淆5.自定义指令//vue2Vue.directive('focus',{bind()//初始调用update()//unbind()//unbind调用inserted:function(e){e.focus();}})//vue3constapp=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-model7.异步组件vue3使用defineAsyncComponent来定义异步组件。配置选项组件被加载器取代。loader函数本身不接收resolve和reject，必须返回一个promise8.CombinedAPICombinedAPI:lifecyclehookfunction,computed,watch,watchEffectreactive,ref,toRefs(1)setupvue3的新选项，组件使用combinedAPI的入口setup在beforeCreate之前执行接收两个参数：props,context//props传入属性，responsive，所以不能用es6解构setup(props){const{name}=props;constt=reactive({count:0})return{t}}(2)ref,toRefs,readonly,reactivevue3通过ref定义数据，reactivevue2定义data中的数据reactive用于处理对象ref句柄的双向绑定js或者objects的双向绑定在使用person.name...的时候，有时候感觉很繁琐，可以使用解构后的数据toRefs将reactive对象转化为ref对象的普通对象readonly用来防止被修改的数据setup(props){const{name}=props;//声明基本类型constnum=ref(0);consttest=只读（num）；//只读//声明对象constperson=ref({name:'haha'})//使用响应式声明对象constt=reactive({count:0})return{num,person,...toRefs(t)}}//使用

{{t.count}}

{{person.name}}

{{count}}

(3)lifehookvue3的lifehook需要通过vue导入注意：breforeCreate和create被setup代替，vue也可以兼容使用。同时vue新增了onRenderTracked、onRenderTriggered用于调试的方法APIHookinsidesetupbeforeCreateNotneeded*createdNotneeded*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggeredactivatedonActivateddeactivatedonDeactivated使用：setup(props){onMounted(()=>{})}（4）watch和watchEffectwatch：用于监听数据source,andexecuteinthecallback的作用//source数据源回调回调函数，option执行回调函数的选项(deep,immediate,flush)watch(source,callback,[options])watchEffect:不需要手动传入dependencies，会先进行一次依赖的自动收集，只能获取到更新后的值，无法获取到变化前的值。watchEffect(()={console.log('123')})9.Hooksvue2使用mixin引入可复用函数，当组件使用mixed-in对象时，mixed-in对象会注入组件自己的optionvue3引入了一个newvue-hooks引入原因：大组件跨组件复用困难，维护困难，粒度控制不好，组件嵌套层级过多。性能组件，这个是不可控的，mixins逻辑相互嵌套不容易理解，mixins不好消费。优点：允许钩子在组件之前互相传值。状态逻辑清楚地表明了逻辑的来源。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绑定到当前实例。//vue2this.nextTick(()=>{})Vue.nextTick(()=>{})//vue3import{nextTick}from'vue';nextTick(()=>{})二、vite