Vue3 响应式数据

时间:2022-12-30 10:53:46

什么是响应式数据

“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码。例如,视图渲染中使用了数据,数据改变后,视图也会自动更新。

采用“数据劫持”结合“发布者-订阅者”模式的方式,通过“Object.defineProperty()”方法来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。


1.1:选项式API的响应式数据

<script>
export default {
  data: () => ({
    count: "abc",
  }),
  // 方法节点:
  methods: {
    changeCount() {
      this.count += "=";
    },
  },
};
</script>

1.2:组合式API的响应式数据

<script setup>
// 引入 API 函数 ref()
import { reactive, ref, toRef, toRefs } from "vue";
// 数据源
let count = ref("abc");

// reactive 对原始数据类型是无效的
// let num = reactive("ABC");
let emp = reactive({
  name: "Jack",
  age: 19,
});

// 所有ref来审明对象类型的数据源
let obj = ref({
  name: "张三",
  age: 18,
});

// 使用 toref() 函数
let obj_two = {
  age: 20,
};
let myTitle = toRef(obj_two, "age");
// 获取的时候,通过 .value
console.log(myTitle.value);

// 使用 toRefs() 函数
let state = reactive({
  foo: 1,
  ber: 2,
});
let stateAsRefs = toRefs(state);
state.foo++;
console.log(stateAsRefs.foo.value);

// 方法节点:
function changeCount() {
  console.log(count);
  // count.value += "=";
  // 修改对象类型的响应式数据
  obj.value.age += 1;
  emp.age += 1;
}
</script>

1.3:ref() 函数

具体的使用看 1.2 中的代码

  • 使用 ref() 方法,我们可以创建任意类型的响应式数据,获取时的需要通过 .value 来获取
  • 当值为对象类型的时候,会用 reactive() 自动转换它的 .value
  • ref 接收一个内部值,并返回一个响应式的 ref 对象
    • 任意类型 => 返回一个 ref 对象
  • 参数可以传递任意数据类型,传递对象类型时,也能保持深度响应式,所以适用性可以大,在 setup 中定义数据时,推荐优先使用 ref,方便拆分逻辑和业务解耦

1.4:reactive() 函数

具体的使用看 1.2 中的代码

  • reactive() 函数只对,对象类型有效(对象,数组),对 Number,String,Boolean 原始类型无效。
  • reactive() 函数接收一个普通对象,然后返回该普通对象的响应式代理;
  • 用 user.name = “new name” 来修改值
  • 内部基于 proxy 来实现
  • 获取数据值的时候可以直接获取,不需要加 .value
  • 参数只能传入对象类型

1.5:toRef() 函数

具体的使用看 1.2 中的代码

  • 用于为源响应式对象上的属性新建一个 ref,从而保持其源对象的响应式;
  • 接收两个参数:1. 源对象 2. 属性名,返回一个 ref 数据
  • 例如:使用父组件传递的 props 数据,某个属性要保持响应式时。
  • Template(模板)中直接获取值,js 获取值,通过 .value 获取
  • toRef 后,ref 数据不是原始数据的拷贝,而是引用。改变结果,原数据的值也会同时改变。
  • 不会触发 UL 界面的更新

1.6:toRefs() 函数

具体的使用看 1.2 中的代码

  • toRefs 用于将响应式对象转换为普通对象,但是其中的每个属性,都会指向原始对象的相应属性。就是依然保持响应式,常用于 es6 的解构赋值。因为在对一个响应式对象直接解构时,解构后的数据将不再有响应式,而使用 toRefs 可以解决这一个问题
  • 获取数据值得时候需要加 .value
  • toRefs 后的 ref 数据,不再是原始数据饿拷贝,而是引用。改变数据的值也会改变原始数据的值。
  • 作用其实和 toRef 类似,只不过 toRef 是一个个手动赋值,而 toRefs 是自动赋值。

总结:

以上就是 vue3 响应式数据的原理和作用,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog