Vue의 반응성 원리를 자세히 설명하는 기사

이 글은 Vue를 배우고 Vue의 반응성 원리를 심층적으로 이해하는 데 도움이 될 것입니다.

이 글은 반응형 구문 설탕의 통과를 기념합니다

더 이상 고민하지 않고 곧바로 일상적인 개발에서 반응성을 적용하는 것이 매우 일반적인 예입니다. 이번에는 b=4*10을 원하는데 이는 분명히 불가능합니다. 앞에 var를 추가하더라도 우리가 원하는 것은 variable Promotion입니다. 주어진 값은 증가하지 않습니다.

이제 반응성의 역할이 중요해집니다. var也只会发生变量提升，我们所给的值并不会提升。

而这个时候，响应式的作用就体现出来了：

let a=3
let b=a*10
console.log(b)//30
a=4
console.log(b)//40

只需要一个简单的响应式API便可实现跟踪变化的效果。【相关推荐：vuejs视频教程、web前端开发】

分析一下reactive

事实上，Vue3的reactive的本质上就是一个发布订阅模式

通过创建依赖图来跟踪数据的依赖关系。依赖图是一个图形，它描述了哪些数据是依赖于哪些数据的。当数据发生变化时，Vue 3 的 reactive 系统会自动触发视图的更新。这是因为它在依赖图中跟踪了数据变化，并通过将其与视图的更新关联起来来实现的

这里我列出尤大在Vue Master里演示的代码做个简单的示例：

import { reactive } from 'vue'

let state = reactive({ a: 3 })
let b = computed(() => state.a * 10)
console.log(b.value) // 30
state.a = 4
console.log(b.value) // 40

我们来分析一下这段代码：

• 定义一个subscribe属性，作为一个订阅者列表，用来存储所有的订阅者信息
• depend函数用来管理依赖关系，即该订阅者所依赖的该变量
• notify函数便是作为通知所有订阅者该变量的值已经发生变化

当变量的值发生变化的时候，它便可以自动的通知所有的订阅者进行更新了

Vue2的Object.defineProperty

事实上，在Vue2时期，响应式的都是交给Object.defineProperty来实现的，但在Vue3当中切换成了Proxy，我们等下来结合实际代码来看原因；我们先来看看Vue2是如何实现的：

class Dep{
    constructor(value){
        this.subscribers=new Set()
        this._value=value
    }
    get value(){
        this.depend()
        return this._value
    }
    set value(newValue){
        this._value=newValue
        this.notify()
    }
    depend(){
        if(activeEffect){
            this.subscribers.add(activeEffect)
        }
    }
    notify(){
        this.subscribers.forEach(effect=>{
            effect()
        })
    }
}

这样一个简单的响应式API就实现了

但这里缺点也就很明显了：在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更 而在Vue3当中，则是会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的

这就导致了：

• 当我们添加或者删除对象的属性时，Vue2的响应式是无法检测的，由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
• 无法检测数组的下标和长度的变化

当然，这个属于历史局限了，当时ES5也就只能选择Object.definProperty，但在了ES6版本，便多了Proxy，这时候Vue的响应式便得到了升级

Vue3的Proxy

Vue3采用Proxy来监控数据的变化，相较于Vue2来说，不仅解决了上述的问题，还有这些优势：

• 无需再使用vue.$set来触发响应式，这让代码看上去能过更加简介
• 全方位的数组变化检测，消除Vue2中无效边界情况
• 减少了Vue3中书写响应式的代码量，这让我们的开发更加方便

让我们来看看实际代码是什么样子的：

function reactive(raw){
    Object.keys(raw).forEach(ket=>{
        const dep=new Dep()
        let value=raw[key]
        
        Object.definProperty(raw,key,{
            get(){
                dep.depend()
                return value
            },
            //当属性发生
            set(newValue){
                value=newValue
                dep.notify()
            }
        })
    })
    //这时候返回的原始对象已经具有响应性
    return raw
}

通过对对象进行收集依赖来实现响应式的方式也便是Vue3响应式的精髓

ref

在官方文档有句话：reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制，而reactive的限制便是：

• 只能处理可被观测的数据结构，如数组和对象；而不可观测的数据结构，如原始数据类型就无法被其监测
• 只能处理定义在它所在组件的数据，不能处理全局变量

而这个时候就需要ref

const reactiveHandles={
    get(target,key,receiver){
        const dep=getDep(target,key)
        dep.depend()
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver){
        const dep=getDep(target,key)
        const result=Reflect.set(target,key,value,receiver)
        dep.notify()
        return result
    }
}

간단한 반응형 API만이 변경 사항 추적 효과를 얻을 수 있습니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]

분석 반응형

을 살펴보겠습니다

사실 Vue3의 반응형은 데이터 종속성을 추적하기 위해 종속성 그래프를 생성하여 본질적으로 🎜게시 및 구독 모델🎜🎜🎜입니다. 종속성 그래프는 어떤 데이터가 어떤 데이터에 종속되는지 설명하는 그래프입니다. 데이터가 변경되면 Vue 3의 reactive 시스템이 자동으로 뷰 업데이트를 트리거합니다. 이는 종속성 그래프의 데이터 변경 사항을 추적하고 이를 뷰에 대한 업데이트와 연결하여 이를 수행하기 때문입니다🎜🎜여기에는 Vue Master에서 Youda가 간단한 예를 들어 시연한 코드가 나열되어 있습니다.🎜rrreee🎜 이 코드를 분석해 보겠습니다. 🎜🎜

• subscribe 속성을 ​​모든 구독자 정보를 저장하는 구독자 목록으로 정의하세요.
• dependent 함수는 종속성을 관리하는 데 사용됩니다. 구독자가 의존하는 변수입니다.
• notify 이 함수는 모든 구독자에게 변수 값을 알리는 데 사용됩니다.

🎜🎜변수 값이 변경되면 모든 구독자에게 업데이트를 자동으로 알릴 수 있습니다🎜

🎜Vue2 Object.defineProperty🎜

🎜사실 Vue2 시대에는 응답성은 Object.defineProperty에 의해 구현되었지만 Vue3에서는 Proxy로 전환되었습니다. 실제 코드와 결합된 이유를 먼저 살펴보겠습니다. Vue2가 구현되었습니다: 🎜rrreee🎜 이렇게 간단한 반응형 API가 구현되었습니다. 🎜🎜 하지만 여기서 단점도 분명합니다. 🎜 Vue 2.x에서는 전달된 개체가 Vue.observable에 의해 직접 변경됩니다. 🎜. Vue3에서는 반응형 프록시가 반환되고 소스 객체는 여전히 응답하지 않습니다.🎜🎜🎜이로 인해 다음이 발생합니다.🎜🎜

• 추가 또는 삭제 code> 객체의 속성, Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환을 수행하므로 해당 속성이 data 객체에 순서대로 존재해야 하기 때문에 Vue2의 응답성을 감지할 수 없습니다. Vue에서 반응형으로 변환하려면
• 🎜array🎜 subscript 및 길이의 변경 사항을 감지할 수 없습니다.

🎜🎜물론 이것은 당시 ES5에서는 Object.definProperty만 선택할 수 있었지만 ES6 버전에서는 Proxy가 더 많아지고 Vue의 응답성이 업그레이드되었습니다🎜

🎜Vue3의 Proxy🎜

🎜 Vue3는 Proxy를 사용하여 데이터 변경을 모니터링합니다. Vue2와 비교하면 위의 문제를 해결할 뿐만 아니라 다음과 같은 장점도 있습니다. : 🎜🎜

• 응답성을 트리거하기 위해 더 이상 vue .$set를 사용할 필요가 없으므로 코드가 더욱 멋지게 보입니다. 🎜소개🎜
• 포괄적인 배열 변경 감지, Vue2에서 유효하지 않은 경계 조건 제거
• Vue3에서 작성된 반응형 코드의 양을 줄여 개발이 더욱 편리해졌습니다.

🎜🎜실제 코드가 어떻게 생겼는지 살펴보겠습니다. : 🎜rrreee🎜객체에 🎜을 수행하여 종속성을 수집합니다. 🎜응답성을 구현하는 방법이 Vue3 응답성의 핵심입니다🎜

🎜ref🎜

🎜에 문장이 있습니다. 공식 문서: reactive()의 다양한 제한은 궁극적으로 JavaScript에 모든 값 유형에 대해 작동할 수 있는 "참조" 메커니즘이 없다는 사실에 기인하며, 반응의 제한은 다음과 같습니다. 🎜🎜 <ul> <li>배열 및 객체와 같은 관찰 가능한 데이터 구조만 처리할 수 있으며 기본 데이터 유형과 같은 관찰할 수 없는 데이터 구조는 모니터링할 수 없습니다.</li> <li>구성 요소에 정의된 데이터만 처리할 수 있습니다. 위치가 있어 전역 변수를 처리할 수 없습니다.</li> </ul>🎜 🎜이때 <code>ref가 필요합니다. ref는 🎜기본 데이터 유형🎜을 위해 탄생했는데, 이것이 단점을 보완합니다. 간단히 말해서 ref는 단순한 단일 변수 Value에 더 적합합니다. (그러나 실제 개발에서는 대부분 ref에 관한 것입니다. 하하하하🎜🎜그런데 반응형 구문 설탕에 대한 제안이 아쉽습니다. 취소됨🎜

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 Vue의 반응성 원리를 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!