Vue.js最近开始流行,很多公司或者项目都在使用Vue.js进行重构。自去年下半年发布以来,Vue.js3发生了什么变化,这里简单说几点。1.生命周期的变化(1)vue2中的beforeCreate和created被新的setup生命周期函数所取代,setup函数会在组件创建之前执行。(2)beforeDestory和destroyed分别更名为beforeUnmount和unmounted。2.性能上的变化(1)数据劫持方面的变化,由原来的Object.defineProperty()用于数据劫持,改为Proxy用于数据代理。由于proxy可以动态判断数据是否为深度嵌套数据,而object.defineProperty()遍历深度嵌套数据,两者在数据劫持上存在巨大的时间差距。(2)打包策略,vue3支持tree-shaking,排除掉不用的代码,减少打包体积。由于打包后体积变小,页面加载文件所需的时间也大大减少。(3)diff优化,vue3中会改进静态节点,比较时不会遍历所有静态节点。节点比较所需的时间也大大减少。3、新增的组合API(组合API)解决了Vue2.X版本的optionsAPI无法解决的重用性和可读性差的缺陷。添加了一个新的setup()生命周期函数,它将在创建组件之前执行。将beforeCreate和created替换为设置生命周期。const{ref,reactive,onMountend,toRefs}=Vuesetup(props){//声明简单数据类型和复杂数据类型//只能获取.value形式的数据constrefValue=ref(null);//只声明一个复杂的数据类型//声明的数据类型不能被解构//声明的数据类型是一个代理对象constreactiveValue=reactive({state:0});//生命周期的使用(on加上生命周期名称)onMountend(()=>{//在相应的生命周期中执行相应的操作})//此类数据不可解构,解构会失去响应式控制台的特性.log(道具);//此方法将代理对象转换为ref变量toRefs(props);同样的代码也可以进行封装,提高了代码的可读性。4.v-model的变化支持绑定多个v-model进行双向绑定。
