Vue3中的响应式原理

复习Vue2中的响应式原理

  • 实现原理：

    • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

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

  • 存在问题：(这些问题Vue3中不复存在)

    • 新增属性、删除属性, 界面不会更新。
    • 直接通过下标修改数组, 界面不会自动更新。

代码展示:

<template>
    <div>
      <h1>Vue2中的响应式原理</h1>
      <h2 v-show="person.name">姓名:{{person.name}}</h2>
      <h2>年龄:{{person.age}}</h2>
      <h2 v-show="person.sex">性别:{{person.sex}}</h2>
      <h2>爱好:{{person.hobby}}</h2>
      <button @click="addSex">添加sex属性</button>
      <button @click="deleteName">删除name属性</button>
      <button @click="changeHobby">修改第一个爱好的名字</button>
    </div>
</template>

<script>
  // 引入Vue
  import Vue from 'vue' 
  export default {
    name:'App',
    data() {
      return {
        person:{
          name: '张三',
          age : '18',
          hobby:['抽烟','喝酒','烫头']
        }
      }
    },
    methods: {
      addSex(){
        console.log(this.person.sex);//undefined
        // 常规方法添加一个属性(Vue2中无法实现响应式,但是在Vue3中可以)
        this.sex = '男'

        // 方法1:使用$set方法添加一个响应式属性
        this.$set(this.person,'sex','男')
        // 方法2:使用Vue.set方法添加一个响应式属性
        // Vue.set(this.person,'sex','男')

        console.log(this.person.sex);//男
      },
      deleteName(){
        console.log(this.person.name);//张三
        // 常规方法删除一个属性(Vue2中无法实现响应式,但是在Vue3中可以)
        delete this.name 

        // 方法1:使用$delete方法添加一个响应式属性
        this.$delete(this.person,'name')
        // 方法2:使用Vue.delete方法添加一个响应式属性
        // Vue.delete(this.person,'name')

        console.log(this.person.name);//undefined
      },
      changeHobby(){
        console.log( this.person.hobby[0]);//抽烟
        // 使用常规方法修改数组里面的参数(Vue2中无法实现响应式,但是在Vue3中可以)
        this.person.hobby[0] = '学习'

        // 方法1:使用$set方法修改数组里的参数实现响应式
        this.$set(this.person.hobby,0,'学习')//将数组中的第0个参数改为学习
        // 方法2:使用数组中的splice方法修改数组里面的参数
        this.person.hobby.splice(0,1,'学习')//将数组中的第0个参数改为学习

        console.log( this.person.hobby[0]);//学习
      }
    },
  }
</script>

结果展示:

image

Vue3中的响应式原理

实现原理:

  • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
  • 通过Reflect（反射）: 对源对象的属性进行操作。
  • MDN文档中描述的Proxy与Reflect：

代码展示:

   //源数据
let person = {
	name:'张三',
	age:18
}

//模拟Vue2中实现响应式
/* let p = {}
Object.defineProperty(p,'name',{
	configurable:true,
	get(){ //有人读取name时调用
		return person.name
	},
	set(value){ //有人修改name时调用
		console.log('有人修改了name属性，我发现了，我要去更新界面！')
		person.name = value
	}
})
Object.defineProperty(p,'age',{
	get(){ //有人读取age时调用
		return person.age
	},
	set(value){ //有人修改age时调用
		console.log('有人修改了age属性，我发现了，我要去更新界面！')
		person.age = value
	}
}) */
//#endregion

//模拟Vue3中实现响应式(实现响应式的增删改查)
// 底层使用的是windows身上的proxy(代理对象)和reflect(反射对象)实现的
//#region 
const p = new Proxy(person,{
	//[查]: 有人读取p的某个属性时调用
	get(target,propName){//target:源对象person,propName:目标属性
		console.log(`有人读取了p身上的${propName}属性`)
		// return target[propName]//通过[变量名]的方式读取对象上的某个属性

		// 常规读取
		// return target[propName]
		// 框架当中的读取
		return Reflect.get(target,propName)
	},
	//[增,改]: 有人修改p的某个属性、或给p追加某个属性时调用
	set(target,propName,value){//target:源对象person,propName:目标属性,value:目标属性要修改的属性值
		console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)

		// 常规修改和增加
		// target[propName] = value
		// 框架当中的读取和修改
		Reflect.set(target,propName,value)
	},
	//[删]: 有人删除p的某个属性时调用
	deleteProperty(target,propName){
		console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)

		// 常规删除
		// return delete target[propName]
		// 框架当中的属性删除
		return Reflect.deleteProperty(target,propName)
	}
})

结果展示:

image