当前位置: 首页 > Web前端 > vue.js

从vue2到vue3的学习之路手稿

时间:2023-04-01 02:01:02 vue.js

vue2和vue3的区别vue2是基于defineProperty的getter和setter。Vue3基于es6的proxy(),解决了对象添加新属性,数组值变化,view不更新的问题。问题。optionalAPIs的区别全局API应用实例Vue2没有app的概念,有些方法直接放在global中,比如Vue.component。Vue3引入了appimport{createApp}from'vue'constapp=createApp({})app.component("xx")的概念deprecatedEventBus$on,$off和$once实例方法已被移除,组件实例事件不再实现触发接口。所以不能用eventbus。更改为微型发射器。用法如下:importemitterfrom'@ali/act-util/emitter';emitter.emit('xx',()=>{});emitter.on('xx',()=>{});emitter.off('xx')nextTick不能再从全局this获取.$nextTick(undefinedisnotafunction)import{nextTick}from'vue'nextTick(()=>{//somethingrelatedtoDOM})Data选项不再支持直接定义对象类型的属性。它只能通过函数返回对象。此外,当合并来自组件的data()及其混合或扩展基类时,现在将浅层执行合并操作。不要再使用mixin,而是使用组合API开发。v-if和v-for的优先级比较在vue2.x中,v-for会优先,在vue3.x中,v-if会优先。slotslot不能放在div上,必须放在template上。//vue2

//vue3Transitioncssnamev-enter改为v-enter-fromv-leave改为v-leave-fromRemovefilterfilters从vue3.x开始,filter已经被移除,不再支持。this.$set()从vue3.x开始,因为有代理,所以不能再用this.$set()给对象添加kv。$on、$off和$once添加emits以确保所有组件都使用emits选项记录它们的事件。组合api响应式API:coreimprot{ref,computed}from'vue';ref()为data中定义的值,js需要homexx.value。该模板可以直接用作xx。computed(()=>{})computed属性reactive()包裹了一层响应式对象,改变object值和ref值双向变化readonly()接受一个对象(不管是responsive还是normal)或者一个ref,返回原始值的只读代理watchEffect()conststop=watchEffect(async(onCleanup)=>{const{response,cancel}=doAsyncWork(id.value)//`cancel`将在`id`时调用更改//以取消以前//未完成的请求onCleanup(cancel)data.value=awaitresponse})stop();defineProps()和defineEmits()为了在声明props和emits选项时获得完整的类型推导支持,我们可以使用defineProps和defineEmitsAPI,它们将在top-levelawait参考文档:vue3官网:https://cn.vuejs。org/api/application.html迁移自vue2:https://v3-migration.vuejs.org/tint-emitter:https://github.com/scottorgan/tiny-emittervue全家桶:https://vue3js.cn/