Cet article vous aidera à comprendre l'API la plus importante de vue3 - ref et reactive. Vous ne savez toujours pas laquelle utiliser ? Si vous souhaitez faire bon usage de Vue3, jetons un coup d'œil bientôt
vue2 ? consiste à utiliser la méthode Object.defineProperty, à détourner le getter et le setter de l'objet, à collecter les dépendances dans getter et à déclencher les dépendances dans setter, mais cette méthode présente quelques défauts : getter和setter，在getter中收集依赖，在setter中触发依赖，但是这种方式存在一些缺点：
由于是遍历递归监听属性，当属性过多或嵌套层级过深时会影响性能
无法监听对象新增的属性和删除属性，只能监听对象本身存在的属性，所以设计了$set和$delete
如果监听数组的话，无法监听数组元素的增减，只能监听通过下标可以访问到的数组中已有的属性，由于使用Object.defineProperty遍历监听数组原有元素过于消耗性能，vue放弃使用Object.defineProperty监听数组，而采用了重写数组原型方法的方式来监听对数组数据的操作，并用$set和splice 方法来更新数组，$set和splice
$delete
Object.defineProperty surveillance de traversée Les éléments d'origine du tableau consomment trop de performances. Vue a abandonné l'utilisation de Object.defineProperty pour surveiller le tableau, et a adopté la méthode de remplacement de la méthode du prototype de tableau pour surveiller le fonctionnement des données du tableau, et a utilisé les méthodes <code>$set et <code>splice pour mettre à jour le tableau , $set et splice appelleront la méthode de tableau remplacée. 】
implémentation réactive de vue3 Objet proxy| est utilisé pour créer un proxy pour un objet, principalement utilisé pour modifier certains comportements par défaut de l'objet. Le proxy peut être compris comme la mise en place d'une couche "d'interception" devant l'objet cible, donc. que le monde extérieur peut faire. Tous les accès doivent d'abord passer par cette couche d'interception, fournissant ainsi un mécanisme permettant de filtrer et de réécrire les accès externes. La syntaxe de base est la suivante : | /* * target: 目标对象 * handler: 配置对象，用来定义拦截的行为 * proxy: Proxy构造器的实例 */ var proxy = new Proxy(target,handler) Copier après la connexion | Intercept get, value opération
|---|---|
| Fonction | |
| Lire une valeur | |
| Écrire une valeur | |
| dans l'opérateur | |
| Object.getPrototypeOf() | |
| Object.getPrototypeO f() | |
| Object.setPrototypeOf ( ) | |
| Object.isExtensible() | |
| Object.preventExtensions() | |
| Object.getOwnPropertyDescriptor() | |
| Object.defineProperty | |
| Object.keys() Object.getOwnPropertyNames() et Object.getOwnPropertySymbols() |
那么使用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
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
