其他分享
首页 > 其他分享> > vue3.0新特性

vue3.0新特性

作者:互联网

重构响应式系统

使用ES6的Proxy代替了Obejct.defineProperty

// 操作obj对象的key属性,第三个参数是属性描述符,返回值为操作对象
Object.defineProperty(obj, "key", {
  //为true的时候会出现再枚举中
  enumerable: false,
  //为true的时候属性描述符可变
  configurable: false,
  //能不能被赋值符号修改
  writable: false,
  //属性的值
  value: "static"
});

因为Object.definePropery只能劫持对象的属性,对象或数组的时候就需要遍历每一个属性了。

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

Proxy是在对象之前做一层拦截,可直接监听数组类型的数据变化、直接实现对象属性的新增/删除、可拦截对象的get、set、has、delete等13种方法。

compostion api

使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大;由于相关业务的代码需要遵循option的配置写到特定的区域,导致后续维护非常的复杂,同时代码可复用性不高,而composition-api就是为了解决这个问题而生的。

reactive
watchEffect
computed
ref
toRefs
生命周期的hooks

体积更小

vdom

vue3.0将 vdom 更新性能由与模版整体大小相关提升为与动态内容的数量相关

标签:set,target,对象,特性,propKey,vue3.0,receiver,属性
来源: https://blog.csdn.net/weixin_44773981/article/details/117001288