【Vue3】，Vue2和Vue3的响应式原理区别

区分Vue2和Vue3的响应式原理

vue2的响应式原理

• 对象类型，通过object.defineProperty()对属性的读取，修改进行拦截——数据劫持
• 数组类型，通过重写更新数据的一系列方法来实现拦截,(对数组的变更方法进行拦截)

存在问题：

• 新增属性，删除属性，界面不会更新
• 直接通过下标修改数组，界面不会更新

新增解决方法：

• 1,通过this.$set(this.userinfo,‘name’,‘乞力马扎罗’)
• 2,import Vue from ‘vue’;
• Vue.set(this.userinfo,‘name’,‘乞力马扎罗’)

删除解决方法：

• 1,通过this.$delete(this.userinfo,‘name’,‘乞力马扎罗’)
• 2,import Vue from ‘vue’;
• Vue.delete(this.userinfo,‘name’,‘乞力马扎罗’)

数组下标修改不更新解决方法：

• 1,通过this.$set(this.list,0,‘乞力马扎罗’)
• 2,通过this.list.splice(0,1,‘乞力马扎罗’)

模拟vue2的响应过程

<script type="text/javascript">
let person = {
  name: "乞力马扎罗",
  age: "18",
};
//模拟Vue2中的响应式
let p = {};
Object.defineProperties(p, "name", {
  configurable:true,//可配置的，意味着可以删除了，但不是响应式，因为无法捕获是否删除key身上的一个属性
  get() {
    return person.name;
  }, //读取name属性时，调用
  set(value) {
    person.name = value;
    console.log("有人修改name，我该取更新界面了");
  }, //修改name属性时，调用
});
Object.defineProperties(p, "age", {
  get() {}, //读取name属性时，调用
  set(value) {
    person.age = value;
    console.log("有人修改nage，我该取更新界面了");
  }, //修改name属性时，调用
});
</script>

vue3的响应式原理

模拟vue3的响应式原理

• 通过Proxy（代理）。拦截对象中任意属性的编号，包括属性值的读写，属性的添加，删除等
• 通过Reflect（反射）。对被代理的对象进行操作

代理

 let person = {
      name: "乞力马扎罗",
      age: 18,
      job: {
        type: "前端",
        salus: "30k",
      },
      list: [9],
    };
    //模拟Vue3实现响应式
    //Proxy叫做代理，可以映射person，参数1是代理谁，参数2是必须写的，起码是空占位。里面存放进行的操作
    const p = new Proxy(person, {
      get(target, propName) {
        //属性对象，属性
        console.log("有人读取了target中的propName属性");
        return target[propName];
      },
      set(target, propName, value) {
        //属性对象，属性
        console.log("有人修改、添加了target中的propName属性");
        target[propName] = value;
      }, 
      deleteProperty(target, propName) {
        console.log("有人删除了target中的propName属性");
        return  delete target[propName];
      },
    });

• Reflect修改被代理对象

反射

 let person = {
      name: "乞力马扎罗",
      age: 18,
      job: {
        type: "前端",
        salus: "30k",
      },
      list: [9],
    };
    //模拟Vue3实现响应式
    //Proxy叫做代理，可以映射person，参数1是代理谁，参数2是必须写的，起码是空占位。里面存放进行的操作
    const p = new Proxy(person, {
      get(target, propName) {
        //属性对象，属性
        console.log("有人读取了target中的propName属性");
        return Reflect.get(target[propName]);
      },
      set(target, propName, value) {
        //属性对象，属性
        console.log("有人修改、添加了target中的propName属性");
        return Reflect.set(target, propName, value);
      },
      deleteProperty(target, propName) {
        console.log("有人删除了target中的propName属性");
        return Reflect.deleteProperty(target, propName);
      },
    });

• 通过reactive，内部就是先代理，后反射，即可删除，添加这 些，也会进行页面更新

<template>
  <!-- VUE3组件中的模板结构可以没有根标签 -->
  <h1>我是{{ person.name }},我{{ person.age }}</h1>
  <h1 v-show="person.job">
    我是{{ person.job.type }},我{{ person.job.salus }}
  </h1>
  <h1 v-show="person.size">我是{{ person.size }}</h1>
  <h1>我是{{ person.list[0] }}</h1>
  <button @click="sayword">点我更新信息</button>
  <button @click="addsize">添加size</button>
    <button @click="deljob">删除job</button>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      name: "乞力马扎罗",
      age: 18,
      job: {
        type: "前端",
        salus: "30k",
      },
      list: [9],
    });
    function sayword() {
      console.log(person);
      person.name = "罗曼蒂克";
      person.list[0] = "罗曼蒂克";
    }
    //添加
    function addsize() {
      person.size = "超级大山";
    }
    //删除
    function deljob() {
      delete person.job.type;
    }
    return {
      person,
      addsize,
      sayword,
      deljob,
    };
  },
};
</script>

<style>
</style>