Vue3.0「十七」-- vue3.0升级新特性及Proxy重写响应式讲解

vue3.0 升级内容

全部用TS重写的（响应式、vdom、模本编译）
性能提升，减少代码量
会调整部分API
Proxy重写响应式

vue2.x 马上要过时了吗

vue3.0从正式发布到推广，还需要一段时间
vue2.x应用范围广，有大量项目需要维护升级
proxy存在兼容性问题，且不能ployfill

社区热门知识点：Proxy重写响应式讲解

回顾vue2.*的响应式原理 [object.defindeProperty]

object.defindeProperty缺点：

• 深度监听需要一次性递归
• 无法监听新增属性/删除属性（vue.set/vue.delete）
• 无法原生监听数组，需要特殊处理

vue3_Proxy实现响应式原理

前置知识

Proxy ES6语法 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。
Proxy 可以理解成， 在目标对象之前架设一层“ 拦截”， 外界对该对象的访问， 都必须先通过这层拦截， 因此提供了一种机制， 可以对外界的访问进行过滤和改写。

语法：const p = new Proxy(target, handler)
target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
handler 一个通常以函数作为属性的对象， 各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
handler.get() 方法用于拦截对象的读取属性操作。
handler.set() 方法是设置属性值操作的捕获器。
handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法这些方法与proxy handlers的方法相同。

Reflect.get(target, propertyKey[, receiver])
Reflect.deleteProperty(target, propertyKey)
Reflect.set(target, propertyKey, value[, receiver])
target： 需要取值的目标对象； key： 需要获取的值的键值；value:：设置的值。
如果target对象中指定了getter， receiver则为getter调用时的this值

1. Proxy对数据拦截监听的基本使用

1、用Proxy将目标对象data进行包装拦截处理如下：

const proxyData = new Proxy(data, {
    get(target, key, receiver) {
        const result = Reflect.get(target, key, receiver)
        console.log('get', key) //监听
        return result //返回结果
    },
    set(target, key, value, receiver) {
        const result = Reflect.set(target, key, value, receiver)
        console.log('set', key, value) //set age 30
        return result //是否设置成功
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key) //delete property name
        return result //是否删除成功
    },
})

2、定义data为对象，并对data对象进行操作时

const data = {
    name: 'lili',
    age: 20,
}
// 对象操作
proxyData.age // get操作  :  get age
proxyData.age = 30 // set操作 :  set age 30
proxyData.sex = "女" // set操作 :  set sex 女
delete proxyData.name // 删除操作 : delete property name

不足：
在对象设置属性时，无法确定是新增属性还是原有属性；

3、定义data为数组，并对data数组进行操作

const data =['a','b','c']

proxyData.push('d') 
// get push  push()方法触发
// get length //获取数组长度
// set 3 d //设置值
// set length 4 设置数组长度

不足：
给数组添加元素时，没必监听 原型的属性，如push()，只需要监听本身（非原型）的属性，
set 3 d，set length 4 为重复处理同一个数据，set length 4多余

2. Proxy对数据拦截监听使用的优化

针对以上问题，对Proxy对数据拦截监听使用进行优化

1.在对象设置属性时，无法确定是新增属性还是原有属性
在set方法中判断

const ownKeys = Reflect.ownKeys(target)
if (ownKeys.includes(key)) {
	console.log('已有的 key') //监听
} else {
	console.log('新增的 key')
}

2、在监听属性时，只监听本身（非原型）的属性

在get方法中，判断如果是自身的属性，才进行监听

// Reflect.ownKeys()方法可以返回包含Symbol属性在内的自有属性。
const ownKeys = Reflect.ownKeys(target)
if (ownKeys.includes(key)) {
    console.log('get',key)//监听
}

3、重复的数据不处理

在 set方法中，重复数据不处理

const oldVal=target[key]
if (value === oldVal) {
    return true
}

以上问题，Proxy对数据拦截监听使用的优化后：

const proxyData = new Proxy(data, {
  // target：目标对象、 key：被捕获的属性名、receiver：Proxy或者继承Proxy的对象
  get(target, key, receiver) {
    // 只监听 处理本身（非原型）的属性
    const ownKeys = Reflect.ownKeys(target)
    if (ownKeys.includes(key)) {
      console.log('get', key) //监听
    }
    const result = Reflect.get(target, key, receiver)
    return result //返回结果
  },
  // value 新属性值。
  set(target, key, value, receiver) {
		const ownKeys = Reflect.ownKeys(target)
    if (ownKeys.includes(key)) {
      console.log('已有的 key') //监听
    } else {
      console.log('新增的 key')
    }
    // 重复的数据不处理
    if (value === target[key]) {
      return true
    }
    const result = Reflect.set(target, key, value, receiver)
    console.log('set', key, value) //set age 30
    return result //是否设置成功
  },
  deleteProperty(target, key) {
    const result = Reflect.deleteProperty(target, key)
    console.log('delete property', key) //delete property name
    return result //是否删除成功
  },
})

定义data为数组，并对data数组进行操作时

const data =['a','b','c']

proxyData.push('d') 
// get length //获取数组长度
// set 3 d //设置值

实现了只保留了对自身属性的监听，重复数据没有重复设置

3. Proxy实现响应式

实现思路：
① 创建响应式方法reactive(data)，该方法可以传入需要处理的数据对象data
函数内逻辑：
② 判断 data 是否为 对象或者数组，不是直接返回
③ 创建 Proxy 代理对象，Proxy对象中传入data
Proxy 代理对象中的方法配置：
④ 在get()方法对数据的进行监听：只监听 处理本身（非原型）的属性；在返回结果中采用递归调用reactive(),实现对数据的深度监听
⑤ 在 set() 方法中进行数据的新增和更新：判断是否是新增数据；重复的数据不处理；
⑥ 在 deleteProperty() 方法中对数据进行删除操作；
实例：
⑦ 定义数据data,传入响应式方法中，返回的值proxyData为实现响应式的可操作数据

// 创建响应式
function reactive(target = {}) {
  if (typeof target != 'object' || target == null) {
    // 不是对象或者数组，则返回
    return target
  }
  // 代理配置 生成代理对象
  return observed = new Proxy(target, {
    // target：目标对象、 key：被捕获的属性名、receiver：Proxy或者继承Proxy的对象
    get(target, key, receiver) {
      // 只监听 处理本身（非原型）的属性 ,如push()
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log('get', key) //监听
      }
      const result = Reflect.get(target, key, receiver)
      // return result //返回结果
      // 深度监听
      // 性能如何提升的？
      return reactive(result) //递归get处理 实现深度监听
    },
    // value 新属性值。
    set(target, key, value, receiver) {
      // 判断是否是新增属性
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.includes(key)) {
        console.log('已有的 key') //监听
      } else {
        console.log('新增的 key')
      }
      // 重复的数据不处理
      const oldVal = target[key]
      if (value === oldVal) {
        return true
      }
      const result = Reflect.set(target, key, value, receiver)
      console.log('set', key, value) //set age 30
      return result //是否设置成功
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key)
      console.log('delete property', key) //delete property name
      console.log('result', result) //result true
      return result //是否删除成功
    },
  })

}


// 测试数据
const data = {
  name: 'lili',
  age: 20,
  info: {
    city: "beijing"
  }
}
const proxyData = reactive(data)

vue3.0 与 vue2.* 实现响应式 比较

vue3.0 基于 Proxy 实现响应式
vue2.0 基于 Oject.defineProperty 实现响应式

相较于vue2,Proxy 实现响应式：

• 深度监听，性能更好
• 可监听新增删除的属性
• 可监听数组变化

总结：

• Proxy 能规避 Oject.defineProperty的问题
• Proxy无法兼容所有浏览器，无法 polyfill

Reflect的作用总结

• 1.和 Proxy 能力一一对应

• 2.规范化、标准化、函数式

const obj={a:100,b:200}
'a' in obj //true
Reflect.has(obj,'a')//true

delete obj.b //true
Reflect.deleteProperty(obj,'b') //true

• 3.替代掉Object上的工具函数

const obj={a:100,b:200}
Object.getOwnPropertyNames(obj) //["a", "b"]
Reflect.ownKeys(obj) // ["a", "b"]