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

我心飞翔 分类:vue

昨天一起学习了组合式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简单结构

详细流程可以 直接看视频

回复

我来回复
  • 暂无回复内容