响应式数据

@Reactivity

调试方法: . 简单事件

. setTimeout()

. 开发工具 vue devtools
Why: Vue 会自动检测响应式数据的变化，进而更新 DOM - 数据驱动 Data Driven

普通变量不会触发视图更新

更多响应式原理，请访问响应式基础 - Reactivity Fundamentals、深入响应式系统

ref()

Overview

创建基本数据类型、复合数据类型的响应式数据

ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象

ref() 的 .value 属性是响应式

ref() 还用于模板引用

更多响应式原理，请访问 ref()

Usage

1. 引入包 ref - 下述各例略

import { ref } from 'vue'

2. 声明响应式变量 - 执行函数、传入参数、变量接收

const count = ref(0)

3.1 结构中使用 - 直接使用，vue会自动获取其 value

<div>{{count}}</div>

3.2 逻辑中使用 - 赋值时需额外指定 value 属性；可以由开发环境的插件自动补齐 value 属性

console.log(count)
console.log(count.value)

控制台输出，查看响应式变量的细节，如 value 属性在哪里

数据监听时，直接使用，无须使用 value 属性

[] 换肤 - 利用 Boolean 切换主题

以阿里字体图标为例，仅展示图标的切换；具体主题样式由个人自定义

引入 - 略

结构 - 动态绑定样式并绑定点击事件

<span @click="changeTheme" :class="['iconfont', darkMode ? 'icon-Sun' : 'icon-Moon-Star']"></span>

逻辑

import { ref } from 'vue'

const darkMode = ref(false)

const changeTheme = () => {
  darkMode.value = !darkMode.value
}

样式 - 略

reactive()

Overview

只能创建复合数据类型的响应式数据，如对象、数组

不用指定 value 属性

reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装

当 ref 的值是一个对象时，ref() 也会在内部调用它

更多响应式原理，请访问 reactive()

Usage

1. 引入包 reactive - 下述各例略

import { reactive } from 'vue'

2. 声明响应式变量 - 执行函数、传入参数、变量接收

const obj = reactive({
    id: 10,
    name: 'gz'
})

3.1. 结构中使用

<div>{{obj.id}} - {{obj.name}}</div>

3.2. 逻辑中使用 - 直接修改对象的属性以保持响应性 - 单个属性赋值

const done = () => {
    obj.id = 20
}
console.log(obj)

控制台输出，查看响应式变量的细节

Limitations

使用不当，会丢失数据的响应式

更多注意事项，请访问 limitations of reactive

1. 不能声明简单数据类型 - value cannot be made reactive: 10

const count = reactive(10)

2. 不能重新赋值/不能轻易地“替换”响应式对象

const done = () => {
    obj = {
      id: 20,
      name: 'gl'
    }
}

3. 不能解构，因为它是一个整体

const { id, name } = obj

Summary

经过函数 ref()、reactive() 处理后，普通的数据或对象就变成了响应式

使用 console.log() 查看一个变量是否具有响应式数据：如果带有 Proxy/refImpl，是响应式数据；否则就是普通变量

实际开发中，更多使用 ref()；因为可以直接改，且不容易丢失响应式

. 创建简单的响应式变量时，当然只能 ref()

. 如果需要简单的对象，ref()、reactive() 都可以

. 层级比较深的对象，请使用 reactive()

避免数据的响应式丢失

ref()、reactive()都是深层响应，即所有后代级别对象属性都会响应；如果仅仅限制根级对象属性，请使用 shallowref()、shallowreactive()

对 shallowref() 而言，它的根属性是 .value