对Vue 3.0的初步学习----Typescript、Proxy

Vue3.0变化的三大点

1、监测机制的改变：用Proxy替换Object.defineProperty

关于Proxy，一定程度上会带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用Proxy又带来了浏览器兼容问题。

Proxy 是什么

• Proxy为 构造函数，用来生成 Proxy实例

  var proxy = new Proxy(target, handler)
  //target 表示所要拦截的目标对象（任何类型的对象，包括原生数组，函数)
  // handler通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为
  

• 关于handler拦截属性，有如下13种

  • 1、get（对象属性的读取）、
  • 2、set（对象属性的设置）、
  • 3、apply（对函数的调用call、apply操作进行拦截)、
  • 4、has( 用于拦截hasProperty操作，返回一个布尔值)、
  • 5、deleteProperty （拦截delete操作，返回一个布尔值）
  • 6、defineProperty （ 拦截Object.defineProperty操作）
  • 7、getOwnPropertyDescriptor （用于拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined）
  • 8、getPrototypeOf （用于拦截获取对象的原型）
  • 9、isExtensible （拦截Object.isExtensible()操作）
  • 10、ownKeys （用于拦截对象自身属性的读取操作，比如：Object.keys ()、Object.getOwnPropertySymbols ()、Object.getOwnPropertyNames ()）
  • 11、preventExtensions （该方法拦截 Object.preventExtensions () ，该方法必须返回个布尔值）
  • 12、setPrototypeOf （ Object.setPrototypeOf 方法 ）
  • 13、construct （拦截 new 操作符命令）

• 若需要在Proxy内部调用对象的默认行为，建议使用Reflect，

  var person = {
   name: "张三"
  };
  
  var proxy = new Proxy(person, {
    get: function(target, propKey) {
      return Reflect.get(target,propKey)
    }
  });
  
  proxy.name // "张三"
  

proxy更多了解，请参考https://mp.weixin.qq.com/s/rIqznB3WXT6M4T0YQb6CQA

Proxy 区别于 Object.definedProperty

• 是否可以监听属性的读写、删除、方法的调用
  Object.defineProperty 只能监听到属性的读写，而 Proxy 除读写外，还可以监听属性的删除，方法的调用等。

• 是否可以监听数组、对象的变化
  Object.defineProperty 无法监测数组、对象的变化。而 Proxy 可以直接监视数组、对象的变化。

  Vue中是通过 对重写数组/对象的方法进行重写来实现监听数组/对象的变化的

• 监听方式
  Proxy 是以非入侵的方式监管了对象的读写，而 defineProperty 需要按特定的方式定义对象的属性。

  let list = [1, 2, 3];
  let listproxy = new Proxy(list, {
      set(target, property, value) {
          target[property] = value;
          return true; // 标识设置成功
      }
  });
  
  list.push(4);
  

• Proxy对象可以拦截什么？
  总共13个，见上方。

详细说明参考链接：https://blog.csdn.net/weixin_42724176/article/details/104811337

2、模板方面

模板方面没有大的变更，只改了作用域插槽，
2.x 的机制导致作用域插槽变了，父组件也会重新渲染，
3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。

3、对象式的组件声明方式

Vue2.x 中的组件是通过声明的方式传入一系列 option
Vue3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易。

TypeScript遵循最新的 ES6、 ES5 规范，从语言层面上扩展了JavaScript的语法。 （比如来说，javascript为弱类型语言，而typescript则可以通过类型注释来提供编译时的静态类型检查，从而一定程度上防止报错）

typescript对比javascript，参考链接
https://www.jianshu.com/p/0dfbcd4a0757

4、其它方面的更改

1). 支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来扩展，而不是直接 fork 源码来改的方式。

2). 支持 Fragment（多个根节点） 和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。

3). 基于 treeshaking 优化，提供了更多的内置功能。

参考链接：
https://www.jianshu.com/p/4db4b191de06