前言

一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数

reactive可将对象变成响应式

将一个对象类型的数据变为响应式,如果是基本数据类型,那用ref

const 代理对象 = reactive(被代理对象)接收一个对象(或数组),返回一个代理器对象(proxy的实例对象简称proxy对象)
const obj = reactive({name: 'itclanCoder',age: 10
})console.log(obj.name);
console.log(obj.age);

reactive定义的响应式数据是深层次的,内部基于Es6当中的proxy实现,通过代理对象操作源对象内部数据都是响应式的,reactive可以直接响应式数组

Vue2.x的响应式

实现原理

[1]. 对象类型: 通过Object.defineProperty()对属性的读取,修改进行拦截,数据劫持

[2]. 数组类型: 通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行包裹)

Object.definePropety(data,'count', {get(){},set(){}
})

存在的问题:

新增属性: 删除属性,界面不会更新

直接通过下标修改数组,界面不会自动更新

Vue3.0的响应式

实现原理

[1]. 通过proxy(代理)拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等

[2]. 通过Refect(反射): 对被代理对象的属性进行操作

在Vue2.0中,针对直接给对象添加属性,页面并不会更新,需要使用this.$set(原对象,属性名,属性值)或者Vue.set(原对象,属性名,属性值)

data(){return {person: {name: '张三',age: 18,hobby: ["吃饭"，'学习']}},methods: {addSex() {// this.person.sex = '女'  // 这样直接添加属性,页面不会更新// 方法1-需要使用this.$set()，给一个属性追加一个属性this.$set(this.person,'sex','女')// 方法2：解决办法，此方式要引入import Vue from 'vue'Vue.set(this.person,'sex','女')},deleteName() {// console.log(this.person.name)// delete this.person.name   无法删除属性// console.log(this.person.name);// 给一个对象移除一个响应式数据使用this.$deletethis.$delete(this.person,'name');// 或者方法2,使用deleteVue.delete(this.person,'name');}，updateHobby() {// this.person.hobby[0] = '逛街',无法通过下标方式修改数组项,页面不更新// 正确写法this.$set(this.person.hobby,0,'逛街');// 或者Vue.set(this.person.hobby,0,'逛街');// 调用数组的重写的方法this.person.hobby.splice(0,1,'逛街')}}
}

Vue3.0响应式

通过proxy(代理)：拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除等 通过Reflect(反射):对被代理(源)对象的属性进行操作

const proxy = new Proxy(data, {// 拦截读取属性值get(target,prop) {return Reflect.get(target,prop)},// 拦截设置属性值或添加新属性set（target,prop,value）{return Reflect.set(target,prop,value);},// 拦截删除属性deleteProperty(target,prop) {return Reflect.deleteProperty(target,prop)}
})
proxy.name = 'tom'

在Vue2.0中

// 源数据
let person = {name: '张三',age: 18
}// 模拟Vue2中实现响应式
let p = {};
Object.defineProperty(p,'name',{get() {return person.name},set(value) { // 有人修改了name时调用console.log('有人修改了Name属性,我发现了,我要去更新界面');person.name = value}
}) Object.defineProperty(p,'age',{congigurable: true,  // 可配置属性,如果设置为true，那么可以使用delete删除属性get() {return person.age},set(value) { // 有人修改了name时调用console.log('有人修改了Name属性,我发现了,我要去更新界面');person.age = value}
})

那在Vue3的响应式是如何实现的

let person = {name:'张三',age:18
}// 模拟Vue3中实现的响应式
const p = new Proxy(person,{  // 第一个参数为原对象,p为代理对象// 有人读取p的某个属性时调用get(target,propName) {console.log('有人读取了p身上的${propName}个属性',target,propName); // b为读取的属性//return target[propName]return Reflect.get(target,propName)},// 有人修改p的某个属性,或给p追加某个属性时调用set(target,propName,value) {console.log(target,propName,value);console.log('有人修改了p身上的${propName}属性,我要去更新界面了');//target[propName] = value;Reflect.set(target,propName,value);},// 有人删除的某个属性时调用// 收集删除的属性deleteProperty(target,propName) {console.log('有人删除了p身上的${propName}属性,我要去更新界面了');//return delete target[propName]return Reflect.deleteProperty(target,propName)}})  // 第一个参数是指定的对象

写get,set,deleteProperty主要目的是能捕获到操作属性的响应式,而直接删除,添加是静态的,不是响应式的

proxy能捕获到操作属性的增删改查操作

Reflect.get(obj,'a')
Reflect.set(obj,'a','4')
Reflect.deleteProperty(obj,a)
Reflect.defineProperty(obj,'c',{})

Reflect有返回值

reactive对比ref

从定义数据角度对比

[1]. ref用来定义:基本类型数据 [2]. reactive用来定义: 对象(或数组)类型数据

备注:ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象

从原理角度对比

ref通过Object.defineProperty()的get与set来实现响应式(数据劫持) reactive通过使用Proxy来实现响应式(数据劫持)，并通过Reflect操作源对象内容的数据

从使用角度对比

ref定义的数据：在js里面操作数据需要.value,读取数据时模板中直接读取不需要.value reactive定义的数据：操作数据与读取数据：均不需要.value

reactive不用直接用于普通的变量，但是一般来说可以放置在代理对象里面去做代理

总结

ref用于基本数据类型的响应式数据处理,而reactive则用于对象或数组复杂响应式数据处理

2022-年终总结-忙碌的一年

2021-又是一年告别时

VueJs中的ref函数

VueJs中setup的使用(下)

如何解决chrome浏览器显示您要访问的是诈骗网站解决办法

点击左下角查看更多