Vue3——ref和reactive的响应式原理

Vue 3 的响应式系统基于 Proxy 对象，在创建组件实例时，会将组件的 data 数据对象转换为响应式的 Proxy 对象。这样，当组件中的数据发生改变时，Vue 3 可以检测到并触发相应的更新。

成为响应式数据的方法

ref（）
reactive（）

ref（）

它用于将一个基本类型的值（如数字、字符串）转换为响应式对象。

xml 复制代码

<template>
  <div>
      <view class="text-area" @click='changeTitle'>
    <text class="title">{{title}}</text>
  </view>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('hello')

const changeTitle = () => {
title.value = title.value === '你好' ? 'Hello' : '你好'
}
</script>

<style lang="lcss" scoped>

</style>

第一步引入ref 并创建一个响应式数据title,title的初始值为字符串'hello'。

csharp 复制代码

import { ref } from 'vue'
const title = ref('hello')

第二步在template里给view绑定一个点击事件，view里面有一个texe文本内容为title的值。

arduino 复制代码

<view class="text-area" @click='changeTitle'>
      <text class="title">{{ title }}</text>
    </view>

第三步实现点击事件changeTitle，它能使title的值在'hello'和'你好'中来回变化，在浏览器中通过对文本进行点击可以实现来回切换的响应式效果。

ini 复制代码

const changeTitle = () => {
  title.value = title.value === '你好' ? 'Hello' : '你好'
}

当点击文本时，它绑定的点击事件会将titie的值进行变更，此时响应式数据title的值发生了变化会被vue3所检测到，然后页面会进行重新渲染，从而实现用户使用浏览器访问页面更具交互性。如果没有给title赋为ref包裹的数据的话，则无法实现点击文本然后文本自动切换的效果。

值得注意的是使用ref包裹后有个东西需要注意，JavaScript中如果要使用包裹的数据需要从value中获取

reactive（）

它用于将一个普通的 JavaScript 对象转换为响应式对象。

xml 复制代码

<template>
  <div>
    <view class="text-area" @click='changeTitle'>
      <text>{{state.count}}</text>
      <text>{{state.message}}</text>
    </view>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
})
const changeTitle = () => {
state.count++
}

</script>

<style lang="lcss" scoped>

</style>

第一步引入reactive 并创建一个响应式对象state

javascript 复制代码

import { reactive } from 'vue'

第二步在template里给view绑定一个点击事件，view里面有两个texe文本，其中一个的内容为state.count的值另一个为state.message的值。

arduino 复制代码

<view class="text-area" @click='changeTitle'> <text>{{state.count}}</text> <text>{{state.message}}</text> </view>

第三步实现点击事件changeTitle，它能使state.count的值通过在浏览器中点击文本内容来实现递加的效果。

php 复制代码

const state = reactive({ count: 0, message: 'Hello, Vue 3!' }) const changeTitle = () => { state.count++ }

如果包裹简单数据类型，控制台会提示不能生成响应式数据

例如

ini 复制代码

const state = reactive(0)

则会提示

data选项、ref函数其实内部都是使用的reactive函数，reactive不支持简单数据类型，只针对复杂类型，而ref即支持简单类型又支持复杂类型。

需要注意的是，reactive 函数只会对对象的第一层属性进行响应式转换，不会递归地对属性的属性进行转换。如果想要对深层次的属性进行响应式转换，可以使用ref 或 reactive 嵌套。

总结

ref和reactive都可以获取dom元素，可以通过对这些元素所在的模块绑定监听事件，当响应式数据的值发生变化时，会重新渲染页面，从而实现数据的动态响应和视图的更新。