vue3.x 响应式数据-ref()、reactive()

介绍

监听数据变化并在视图(页面)中更新

也就是在代码中 修改变量,页面中的数据 也跟着改变

实现

  • ref()

  • reactive()

区别

ref()

需要导入 import {ref} from 'vue'

ref用来定义:基本类型数据、对象类型数据;

ref 创建的变量必须使用.value(可以使用volar插件自动添加.value)

reactive()

需要导入 import { reactive } from 'vue'

reactive用来定义:对象类型数据。

reactive 重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。

使用原则

  1. 若需要一个基本类型的响应式数据,必须使用ref。
  2. 若需要一个响应式对象,层级不深,ref、reactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive。

原文出处:/show_1GW1GuBkTQTf.html