Artikel ini akan membantu anda memahami API yang paling penting dalam vue3 - ref dan reaktif Adakah anda masih keliru tentang yang mana satu untuk digunakan jika anda ingin menggunakan Vue3 dengan baik, datang dan lihat
Responsif vue2 adalah menggunakan kaedah Object.defineProperty untuk merampas getter dan setter objek, mengumpul kebergantungan dalam getter dan mencetuskan kebergantungan dalam setter, tetapi terdapat beberapa masalah dengan kaedah ini:
Disebabkan traversal atribut pendengaran rekursif, apabila terdapat terlalu banyak atribut atau tahap bersarang terlalu dalam, ia akan menjejaskan prestasi
tidak boleh memantau atribut yang baru ditambah dan atribut yang dipadamkan bagi objek Ia hanya boleh memantau atribut yang wujud dalam objek itu sendiri, jadi kami mereka bentuk $set dan $delete
Jika anda memantau tatasusunan, anda tidak boleh memantau penambahan atau penurunan elemen tatasusunan Anda hanya boleh memantau atribut sedia ada dalam tatasusunan yang boleh diakses melalui subskrip Kerana menggunakan Object.defineProperty untuk melintasi elemen asal tatasusunan pemantauan adalah terlalu intensif prestasi, vue menyerah menggunakan Object.defineProperty untuk memantau tatasusunan dan menggunakan tatasusunan. kaedah mengatasi kaedah prototaip tatasusunan untuk memantau operasi pada data tatasusunan, dan menggunakan kaedah $set dan splice untuk mengemas kini tatasusunan $set dan splice akan Memanggil kaedah tatasusunan yang diganti.
[Cadangan berkaitan: tutorial video vuejs]
Mensasarkan kelemahan Object.defineProperty, objek baharu - Proksi (proksi objek) diperkenalkan dalam ES6
Objek proksi:
Proksi digunakan untuk mencipta objek, terutamanya digunakan untuk menukar beberapa tingkah laku lalai objek boleh difahami sebagai menyediakan lapisan "pemintasan" sebelum objek sasaran dari dunia luar mesti melalui lapisan ini pemintasan, dengan itu menyediakan mekanisme untuk menapis dan menulis semula akses luaran. Sintaks asas adalah seperti berikut:
/* * target: 目标对象 * handler: 配置对象，用来定义拦截的行为 * proxy: Proxy构造器的实例 */ var proxy = new Proxy(target,handler)
dapatkan pintasan, operasi nilai
var proxy = new Proxy({}, {
get: function(target, propKey) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
proxy.title // 35Operasi yang boleh dipintas ialah:
| 函数 | 操作 |
|---|---|
| get | 读取一个值 |
| set | 写入一个值 |
| has | in操作符 |
| deleteProperty | Object.getPrototypeOf() |
| getPrototypeOf | Object.getPrototypeOf() |
| setPrototypeOf | Object.setPrototypeOf() |
| isExtensible | Object.isExtensible() |
| preventExtensions | Object.preventExtensions() |
| getOwnPropertyDescriptor | Object.getOwnPropertyDescriptor() |
| defineProperty | Object.defineProperty |
| ownKeys | Object.keys() Object.getOwnPropertyNames()和Object.getOwnPropertySymbols() |
| apply | 调用一个函数 |
| construct | new一个函数 |
那么使用Proxy可以解决Vue2中的哪些问题，总结一下：
var target = {
a:1,
b:{
c:2,
d:{e:3}
}
}
var handler = {
get:function(target, prop, receiver){
console.log('触发get:',prop)
return Reflect.get(target,prop)
},
set:function(target,key,value,receiver){
console.log('触发set:',key,value)
return Reflect.set(target,key,value,receiver)
}
}
var proxy = new Proxy(target,handler)
proxy.b.d.e = 4
// 输出 触发get:b , 由此可见Proxy仅代理了对象外层属性。以上写法只代理了对象的外层属性，所以要想深层代理整个对象的所有属性，需要进行递归处理：
var target = {
a:1,
b:{
c:2,
d:{e:3}
},
f: {z: 3}
}
var handler = {
get:function(target, prop, receiver){
var val = Reflect.get(target,prop)
console.log('触发get:',prop)
if(val !== null && typeof val==='object') {
return new Proxy(val,handler) // 代理内层属性
}
return Reflect.get(target,prop)
},
set:function(target,key,value,receiver){
console.log('触发set:',key,value)
return Reflect.set(target,key,value,receiver)
}
}
var proxy = new Proxy(target,handler)
proxy.b.d.e = 4
// 输出 触发get b,get d, get e从递归代理可以看出，如果要代理对象的内部属性，Proxy可以只在属性被调用时去设置代理（惰性），访问了e，就仅递归代理b下面的属性，不会额外代理其他没有用到的深层属性，如z。
Reflect 的作用和意义Function.prototype.apply Object.defineProperty
修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
reative和refVue3 的 reactive 和 ref 正是借助了Proxy来实现。
作用：创建原始对象的响应式副本，即将「引用类型」数据转换为「响应式」数据
参数： reactive参数必须是对象或数组
reative函数实现：
// 判断是否为对象
const isObject = val => val !== null && typeof val === 'object';
// 判断key是否存在
const hasOwn = (target, key) => Object.prototype.hasOwnProperty.call(target, key);
export function reactive(target) {
// 首先先判断是否为对象
if (!isObject(target)) return target;
const handler = {
get(target, key, receiver) {
console.log(`获取对象属性${key}值`)
// 收集依赖 ...
const result = Reflect.get(target, key, receiver)
// 深度监听（惰性）
if (isObject(result)) {
return reactive(result);
}
return result;
},
set(target, key, value, receiver) {
console.log(`设置对象属性${key}值`)
// 首先先获取旧值
const oldValue = Reflect.get(target, key, reactive)
let result = Reflect.set(target, key, value, receiver);
if (result && oldValue !== value) {
// 更新操作 ...
}
return result
},
deleteProperty(target, key) {
console.log(`删除对象属性${key}值`)
// 先判断是否有key
const hadKey = hasOwn(target, key)
const result = Reflect.deleteProperty(target, key)
if (hadKey && result) {
// 更新操作 ...
}
return result
},
// 其他方法
// ...
}
return new Proxy(target, handler)
}
const obj = { a: { b: { c: 6 } } };
const proxy = reactive(obj);
proxy.a.b.c = 77;
// 获取对象属性a值
// 获取对象属性b值
// 设置对象属性c值 77至此，引用类型的对象我们已经可以把它转化成响应式对象了，Proxy对象只能代理引用类型的对象，对于基本数据类型如何实现响应式呢？
vue的解决方法是把基本数据类型变成一个对象：这个对象只有一个value属性，value属性的值就等于这个基本数据类型的值。然后，就可以用reative方法将这个对象，变成响应式的Proxy对象。
实际上就是： ref(0) --> reactive( { value:0 })
作用：把基本类型的数据变为响应式数据。
参数：
1.基本数据类型
2.引用类型
3.DOM的ref属性值
export function ref(value?: unknown) {
return createRef(value, false)
}
function createRef(rawValue: unknown, shallow: boolean) {
if (isRef(rawValue)) {
return rawValue
}
return new RefImpl(rawValue, shallow)
}
class RefImpl<T> {
private _value: T
private _rawValue: T
public dep?: Dep = undefined
public readonly __v_isRef = true
constructor(value: T, public readonly __v_isShallow: boolean) {
this._rawValue = __v_isShallow ? value : toRaw(value)
this._value = __v_isShallow ? value : toReactive(value)
}
get value() {
trackRefValue(this)
return this._value
}
set value(newVal) {
const useDirectValue =
this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)
newVal = useDirectValue ? newVal : toRaw(newVal)
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal
this._value = useDirectValue ? newVal : toReactive(newVal)
triggerRefValue(this, newVal)
}
}
}大体思路就是，调用ref函数时会new 一个类，这个类监听了value属性的 get 和 set ，实现了在get中收集依赖，在set中触发依赖，而如果需要对传入参数深层监听的话，就会调用我们上面提到的reactive方法。
即：
ref(0); // 通过监听对象（类）的value属性实现响应式
ref({a: 6}); // 调用reactive方法对对象进行深度监听根据上面的思路我们可以自己来简单实现下：
// 自定义ref
function ref(target) {
const result = { // 这里在源码中体现为一个类 RefImpl
_value: reactive(target), // target传给reactive方法做响应式处理，如果是对象的话就变成响应式
get value () {
return this._value
},
set value (val) {
this._value = val
console.log('set value 数据已更新, 去更新界面')
}
}
return result
}
// 测试
const ref = ref(9);
ref.value = 6;
const ref = ref({a: 4});
ref.value.a = 6;ref 方法包装的数据，需要使用.value 来访问，但在模板中不需要，Vue解析时会自动添加。
reactive 将引用类型值变为响应式，使用Proxy实现ref 可将基本类型和引用类型都变成响应式，通过监听类的value属性的get和set实现，但是当传入的值为引用类型时实际上内部还是使用reactive方法进行的处理ref，引用类型使用 reactive
Atas ialah kandungan terperinci Penjelasan terperinci tentang prinsip: perbezaan antara reaktif dan ref dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
