当前位置：首页 > news >正文

前端系列-7 Vue3响应式数据

news 来源：原创 2024/9/19 11:37:31

1.响应式数据和实现

响应式数据的核心是当数据模型发生变化时，与之相关(使用该数据模型)的视图或组件可以自动更新，以反映最新的数据状态。
实现原理是数据劫持、依赖收集和分发更新，数据劫持是一种AOP策略。
在vue2中通过Object.defineProperty方法为对象的每个属性设置setter和getter方法，当访问或者修改对象的属性时，进入setter/getter方法，从而实现拦截。getter方法被调用时，可以进行依赖收集，确认属性被哪些组件依赖；setter方法被调用时，则进行分发更新，将属性的更新事件发送到对应依赖的组件。
在vue3中，通过Proxy创建一个对象的代理，从而可以拦截其属性的读取、设置等操作。Proxy相对于Object.defineProperty具有更大和更灵活的数据拦截能力，并且优化了内存使用。

2.使用方式

2.1 ref

当基本类型变量或者对象通过ref函数包裹后，形成响应式数据对象，使用方式如下:

<template><div><p>姓名：{{name}}</p><button @click="changeName">修改名字</button></div>
</template><script setup lang="ts">import { ref } from 'vue';let name =ref('ewen');function changeName() {name.value = "ewens";console.log(name);console.log(name.value);    }
</script>

浏览器Console显示name为RefImpl类型对象，value属性存放实际的数值:

RefImpl {__v_isShallow: false, dep: Map(1), __v_isRef: true, _rawValue: "ewens", _value: "ewens"}
App.vue:8 ewens

说明：在template组件中直接使用name, 而在script中使用name.value进行取值和设值。

2.2 reactive

reactive只能用于对象和数组类型，不能用于基本类型

当对象或数组通过reactive函数包裹后，形成响应式数据对象，使用方式如下:

<template><div><p>姓名：{{person.name}}</p><p>年龄：{{person.age}}</p><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button></div>
</template><script lang="ts" setup name="Person">
import { reactive } from 'vue'// person 是一个Proxy类型的对象
let person = reactive({ name: 'ewen', age: 18})function changeName() {person.name = 'ewens'
}
function changeAge(){person.age = 999
}
</script>

说明：在template组件和script块中直接使用对象.属性名进行取值和设值。

2.3 toRef与toRefs

当希望从响应式对象中提取某个属性，且希望保持这个属性的响应性，可以通过toRef和toRefs来实现。

import {reactive,toRefs,toRef} from 'vue'let person = reactive({ name: 'ewen', age: 18})
// 使用toRef可以提取响应式对象的某个属性
const name = toRef(person, 'name');
const age = toRef(person, 'age');//使用toRef可以一次性提取响应式对象的多个属性:
const { name, age } = toRefs(person);