二 分分钟学会 在vue3 中如何声明一个响应式的数据

1. ref

ref 可以声明 任意类型 的响应式数据，包括 深度嵌套的对象和数组，都可以被响应式监听。

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>{{ data }}</div> 

    <!-- 修改响应式数据 -->
    <button @click="changeData">修改</button>
  </div>
</template>

<script setup lang="ts">

// 引入ref
import { ref } from 'vue'

// 使用ref声明响应式数据
const data = ref("我是响应式数据")

// 修改响应式数据
const changeData = () => {
  data.value = "我是修改后的数据"
}

</script>

下面是效果图

2. reactive

reactive 只能监听引用数据类型，比如 对象，数组, Map

⚠️ 不能 替换整个对象或者解构 都会让数据失去响应式

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>{{ data }}</div>
    <div>{{ a }}</div>
    <!-- 修改响应式数据 -->
    <button @click="changeData">修改</button>
    <button @click="changeDataA">修改 结构出来的属性</button>
    <button @click="changeDataB">修改 整个对象</button>

  </div>
</template>

<script setup lang="ts">
// 引入reactive
import { reactive } from 'vue'

// 使用reactive声明响应式数据
let data = reactive({ a: 1, b: { c: 1 } });

// 直接结构
let { a } = data;

// 修改响应式数据 （页面中数据变化了）
const changeData = () => {
  data.b.c = 3
}

// 修改响应式数据 （页面中数据没有变化）
const changeDataA = () => {
  a = 3
}

// 修改响应式数据 整个对象 （页面中数据没有变化）
const changeDataB = () => {
  data = { a: 2, b: { c: 2 } }
}

</script>

3. shallowRef

shallowRef 只能浅层监听数据的响应式变化 可以用于避免对大型数据的响应性开销来优化性能 （只关注这个对象是否没修改，不关注其中的属性）

- 如果监听的是基本数据类型（字符串，数字等）可以进行响应式。

- 如果监听的是 对象或者数组，修改*整个对象*可以监听到，修改**对象中某个属性的值**监听不到。

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>{{ data }}</div>
    <div>{{ deepObj.a }}</div>
    <div>{{ deepObj.b.c }}</div>
    <!-- 修改响应式数据 -->
    <button @click="changeData">修改</button>
    <button @click="changeAttr">修改 changeAttr</button>
    <button @click="changeObj">修改 changeObj</button>
  </div>
</template>

<script setup lang="ts">
// 引入shallowRef
import { shallowRef } from 'vue'

// 使用shallowRef声明响应式数据
const data = shallowRef('我是响应式数据')

const deepObj = shallowRef({ a: 1, b: { c: 1 } })

// 修改响应式数据
const changeData = () => {
  data.value = '我是修改后的数据'
}

// 修改响应式数据  只修改属性 （页面中数据没有变化）
const changeAttr = () => {
  deepObj.value.a = 3
}

// 修改响应式数据 修改整个对象 (页面中的数据变化了)
const changeObj = () => {
  deepObj.value = { a: 2, b: { c: 2 } }
}

</script>

4. shallowreactive

shallowreactive 只能监听对象的第一层，不能深度监听

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>{{ data }}</div>
    <!-- 修改响应式数据 -->
    <button @click="changeDataA">修改</button>
    <button @click="changeDatBC">修改 结构出来的属性</button>
    <button @click="changeDataB">修改 整个对象</button>
  </div>
</template>

<script setup lang="ts">
// 引入shallowReactive
import { shallowReactive } from 'vue'

// 使用shallowReactive声明响应式数据
let data = shallowReactive({ a: 1, b: { c: 1 } })

// 修改响应式数据 （页面中数据变化了）
const changeDataA = () => {
  data.a = 3
}

// 修改响应式数据 （页面中数据没有变化）
const changeDatBC = () => {
  data.b.c = 3
}

// 修改响应式数据 整个对象 （页面中数据变化了）
const changeDataB = () => {
  data.b = { c: 2 }
}
</script>

一 分分钟学会 如何创建vue3项目 #掘金文章# https://juejin.cn/post/7414507149928939529