vue3 typescript命名规范 vue3.0新特性的typescript

转载

mob64ca1404ed65 2024-01-31 05:31:33

文章标签 vue3 typescript命名规范 Vue3.0初步学习 proxy typescript setup 文章分类 TypeScript 前端开发

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 区别于 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个，见上方。

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