Vue响应式基础解读

    Vue响应式的基础是建立在组件生命周期上的，它基于对组件对象中属性变动的观察，触发组件对应DOM结构的更新。在Vue2.0中，它的实现方式是基于Vue对象属性的get/set方法，当调用Vue对象的set方法时，它会检查对应的属性有没有发生变化，若属性发生变化，Vue会自动更新与这个属性相关的DOM结构。在Vue3.0中，它的实现方式是基于es6 Proxy对象，只要将要动态监控的数据用Proxy对象包装，应用设计模式proxy模式，可以在代理方法调用过程中动态添加一些操作，如级联更新、数据统计等。从实际触发，应用代理模式基于Vue组件生命周期的响应式要更加合理一些。

<script setup lang="ts">
import {nextTick, ref} from "vue"


const count=ref(0);
const list=ref(["a","b","c"]);
list.value[1]="e";

function increment(){
  count.value++;
  nextTick();
  if(count.value>=3){
    list.value[count.value]="add";
  }
}
</script>

<template>
<button @click="increment">{{ count }}</button>
<div v-for="item in list" :key="item">
        <span>{{ item }}</span>
</div>
</template>

    结合Vue组件生命周期来看，响应式是将一个组件的javascript变动部分抽离出来，单独放到script标签中。实际在编译过程中，这部分代码要在标准的Vue组件对象上做覆盖或合并操作，产生最终的Vue组件对象代码。模板的解析是一个标准的DOM解析过程。综合以上这些情况来看，Vue响应式的基础就是对数据对象代理的观察和Vue组件的生命周期。

    在Vue组件生命周期已经确定的前提下，如何将要观察的数据对象做标记或者包装就成了重点。目前Vue包装响应式数据的方式有两种，一种式ref函数包装数据，一种式reactive包装为代理对象。reactive()函数只能包装对象，包装后的对象不可以整个替换掉，解构过程中将对象的属性值传递给其他函数或作为参数时会丢失响应性。ref()函数包装的数据则没有这种问题。推荐使用响应式的过程中以ref为主。