网站设计怎么好看,网站建设与推广王钊,深圳市建设工程网站,app定制开发和模板开发的区别ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别#xff1a; ref 定义单个响应式数据 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象#xff0c;该对象包含一个 .value 属性#xff0c;可用于获取和设… ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别 ref 定义单个响应式数据 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象该对象包含一个 .value 属性可用于获取和设置数据。底层采用Object.defineProperty()实现 reactive 定义多个响应式数据 数据类型必须是对象返回一个响应式对象必须使用响应式对象来获取属性和设置数据底层采用的是new Proxy() reactive源码解析 reactive 函数可以用来创建一个响应式的对象它会在内部使用 Proxy 对对象的 getter 和 setter 进行拦截从而实现对数据的依赖收集和通知更新。 在vue3源码里reactive的实现在core-main\packages\reactivity\src\reactive.ts文件中 reactive是一个函数接收传入的target对象。返回一个createReactiveObject方法。 reactive的核心逻辑在createReactiveObject方法中。 首先校验传入的target必须是对象通过new Proxy创建一个代理对象根据对象的类型走不同的handler处理逻辑返回代理对象proxy proxy是怎么代理的 手写一个简易的reactive看下handler里是什么 let handler {//拦截整个对象访问对象的属性时get拦截器触发get(target, key) {let value target[key];if (typeof value object) {//如果访问的对象属性还是对象进行递归return new Proxy(value, handler);}return value;},//拦截整个对象当修改对象的属性的时候set拦截器会触发set(target, key, value) {target[key] value;},};function reactive(target) {return new Proxy(target, handler);}let obj { name: jw, age: 30, n: [1, 2, 3, 4, 5] };//拿到obj的代理对象proxyObjconst proxyObj reactive(obj);//不访问obj访问代理对象proxyObjconsole.log(proxyObj.name); //触发get拦截器proxyObj.age 31; //触发set拦截器proxyObj.name 100; //设置一个不存在的属性 handler 对象中可以定义多个方法来控制代理对象的行为。在响应式reactive中handler主要用了get和set两个方法。(是不是很熟悉Object.defineProperty也有get和set方法只不过是针对属性的proxy这个是针对对象的所以不一样哦 get(target, property, receiver)拦截对象属性的读取操作当访问代理对象的属性时会触发该方法。set(target, property, value, receiver)拦截对象属性的设置操作当给代理对象的属性赋值时会触发该方法。 这样每次你通过访问代理对象proxyObj访问的属性都会被handler的get方法拦截进而收集依赖。对proxyObj修改属性值的时候被handler的set方法拦截进行依赖更新。 注意你不是操作原始对象obj而是操作的代理对象proxyObj ref源码原理 在解析源码之前先思考一个问题 为什么ref定义后的对象可以通过.value 访问和设置数据 你有没有想过为什么使用ref定义的对象或基本类型在js里写的时候都需要用.value啊。 这里不得不提到一个特殊的名称——typeScript类的属性访问器get和set属性。 get 和 set 属性是一种在类中定义属性的方式可以用来实现类的属性的读取和写入操作。基本语法如下
class MyClass {private _propertyName: any;get propertyName(): any {console.log(读取数据自动进入get方法);return this._propertyName;}set propertyName(value: any) {this._propertyName value;console.log(更新数据自动进入set方法);}
}
在上面的例子中propertyName 是一个类的属性它使用 get 和 set 属性定义在 MyClass 类中。在类的外部可以使用点操作符来读取和写入 propertyName 属性例如
const myObject new MyClass();
myObject.propertyName hello;//更新
console.log(myObject.propertyName); //访问执行结果 当在类的外部读取 propertyName 属性时会调用 propertyName 的 get 属性返回 _propertyName 的值。当在类的外部写入 propertyName 属性时会调用 propertyName 的 set 属性将值赋给 _propertyName 属性。
为什么在类里这样写可以触发get和set呢 这个是ts提供了一种写法当我们在控制台使用tsc进行编译成.js文件后。 得到如下代码 var MyClass /** class */ (function () {function MyClass() {}Object.defineProperty(MyClass.prototype, propertyName, {get: function () {console.log(读取数据自动进入get方法);return this._propertyName;},set: function (value) {this._propertyName value;console.log(更新数据自动进入set方法);},enumerable: false,configurable: true});return MyClass;
}());
var myObject new MyClass();
myObject.propertyName hello;
console.log(myObject.propertyName);可以看到最终propertyName编译成一个属性并且通过Object.defineProperty进行了get和set方法的重写。 OK先说到这带着这个理解去看ref的源码 vue3中ref实现 在vue3源码里ref的实现也是在reactivity文件夹下core-main\packages\reactivity\src\ref.ts ref是一个函数接收一个unknown类型的参数value 返回一个createRef方法第一个参数是value第二个参数是false. createRef最终返回一个RefImpl实例对象。在RefImp类里首先通过构造函数创建一个_value对象。toReactive根据value类型如果是对象的话用reactive方法处理对象。 RefImpl类还定义了get和set方法在类里使用get空格value这种方式很少见。这其实是ts类的属性访问器写法当使用 .value 属性来获取或设置数据时会自动调用 get 或 set 访问器函数。 在底层这种写法会被编译成 Object.defineProperty这是 JavaScript 中用于定义对象属性的原生方法。使用 Object.defineProperty 可以定义对象的属性的特性如可枚举性、可配置性、可写性等并可以为属性设置 get 和 set 函数从而实现属性的访问器功能。前面已经介绍过原理了 toReactive方法做了什么 toReactive就是判断ref传入的是不是对象如果是对象去调用reactive方法将对象变成响应式的。ref这个老六就是万精油啥都能处理。 思考为什么你更习惯使用ref而不是reactive? 在Vue3中无论是基本类型还是复杂类型的响应式数据都推荐使用ref来创建。这样做的好处是你可以统一使用.value属性来访问和修改响应式数据的值而不需要在基本类型和复杂类型之间切换使用方式。 简单性ref 提供了一种简单的方式来定义响应式对象只需传入初始值即可。相比之下reactive 需要将整个对象传入稍显繁琐。对于单个变量或简单数据使用 ref 更加直观和方便。 透明性ref 返回的是一个包装过的对象可以通过 .value 访问其值这种包装使得数据访问更加明确和直观。而 reactive 返回的是原始对象需要通过代理访问属性有时会增加代码的复杂性。复杂的代码谁想写啊 性能在某些情况下ref 比 reactive 更高效。因为 ref 包装的是基本类型数据而 reactive 包装的是对象对于简单数据类型ref 的性能可能更好。 推荐度Vue 3 官方文档和社区更倾向于推荐使用 ref因为它更简单、更直观适用于大多数场景。而 reactive 更适合处理复杂的对象或数据结构。 尽管程序员通常建议使用 ref但在实际开发中根据具体情况选择合适的方式是更为重要的。对于简单的数据使用 ref 可能更加方便和直观而对于复杂的对象或数据结构使用 reactive 可能更合适。 看到这的给我来波666太烧脑了
