Vue3学习笔记用朴素的语言理解大名鼎鼎的响应式

用户1072003

发布于 2023-02-23 17:04:38

2260

发布于 2023-02-23 17:04:38

文章被收录于专栏：码上读书

昨天一起学习了组合式API和 script setup。今天我们了解一下 Vue3里大名鼎鼎的响应式机制。

我们将会从响应式的概念，原理，实际案例来进行学习。

啥是响应式

其实在JavaScript里是没有响应式这个概念的。比如下面这段原生js代码:

let count = 1
let double = count * 2
console.log(double)
count = 2
console.log(double)

这里2次打印 double都是2。如果我们想要每次修改count的值，都会触发 double的重新计算。

原生js里我们只能手动触发。

let count = 1
// 计算过程封装成函数
let getDouble = n=>n*2 //箭头函数
let double = getDouble(count)
console.log(double)

count = 2
// 重新计算double，这里我们不能自动执行对double的计算
double = getDouble(count)
console.log(double)

count = 3
// 重新计算double，这里我们不能自动执行对double的计算
double = getDouble(count)
console.log(double)

这样随着count的变更， double也可以得到相应的变化，但是会比较麻烦。因为我们每次都要手动调用一下getDouble。 Vue的响应式，其实就是帮我们自动去完成这个触发的过程。我们只需要修改count，double就会自己变更了。（我理解相当于是把事件触发逻辑给统一封装了。）那它是怎么做到的呢？

原理

Vue中有3种响应式解决方案：

defineProperty
Proxy
value setter

其中defineProperty 在Vue2中就有了，但是存在一些问题。它是基于监听对象的属性来实现的，如果属性有变化，可以监听到，但是如果直接删除了，其实是监听不到的，导致还能获取到原来的值。

那Vue3的Proxy就解决了这个问题，因为Proxy是基于监听对象来实现的，而不是是对象的属性。

具体如何使用呢？

案例

reactive

基于Proxy实现的 reactive 函数可以把一个对象变成响应式数据。

import {reactive,computed,watchEffect} from 'vue'

let obj = reactive({
    count:1,
    name:"zhang"
})
let double = computed(()=>obj.count*2)
obj.count = 2

// 在 obj.count 修改之后，执行数据的打印
watchEffect(()=>{
    console.log('数据被修改了',obj.count,double.value)
})

ref

reactive是将对象类型的变量弄成了响应式，那基础类型的变量要也弄成响应式咋办呢？

基于对象的set和get实现的ref API，就可以只拦截一个属性的修改。其实我觉得也是变成了对象，只是这个对象里只有一个value属性。

示例：

let getDouble = n => n * 2
let _value = 1
double = getDouble(_value)

let count = {
  get value() {
    return _value
  },
  set value(val) {
    _value = val
    double = getDouble(_value)

  }
}
console.log(count.value,double)
count.value = 2
console.log(count.value,double)

对比

实现原理	defineProperty	Proxy	value setter
实际应用	Vue2 响应式	Vue3 reactive	Vue3 ref
优势	兼容性	基于Proxy实现全面拦截	基于set get实现简单
劣势	部分事件拦截不到如：数组/属性删除	不兼容IE11	只拦截 value
实际应用	Vue2	Vue3复杂结构	Vue3简单结构