reactive 函数
reactive 函数用于创建一个响应式对象。这个函数接受一个普通的 JavaScript 对象，并返回一个代理对象，该代理对象具有响应性。当访问或修改代理对象的属性时，Vue 3.0 能够追踪这些操作，并在需要时触发视图更新。
import { reactive } from 'vue';
const state = reactive({
count: 0
});
console.log(state.count); // 访问属性，触发依赖收集
state.count++; // 修改属性，触发更新
ref 函数
ref 函数用于创建一个包装基本类型的响应式对象。它返回一个具有 .value 属性的对象。在访问和修改属性时，也会触发依赖收集和更新。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 访问属性，触发依赖收集
count.value++; // 修改属性，触发更新
访问响应式对象的属性
在模板或组件的 JavaScript 代码中访问响应式对象的属性时，Vue 3.0 会自动进行依赖收集。这意味着组件的渲染函数将与访问的属性建立关联，以便在属性变化时触发重新渲染。
<template>
<div>
<p>{{ state.count }}</p>
<button @click="increaseCount">Increase Count</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
const increaseCount = () => {
state.count++;
};
return {
state,
increaseCount
};
}
};
</script>
修改响应式对象的属性
当修改响应式对象的属性时，Vue 3.0 能够检测到这些变化，并触发相关的更新。这保证了视图和状态的同步。
state.count++; // 修改属性，触发更新
异步更新
Vue 3.0 在同一事件循环中的多个状态更新会被合并，从而减少不必要的渲染。这是通过异步更新队列的机制实现的，确保在适当的时机才执行实际的更新操作。
以上是 Vue 3.0 响应性的基础知识。理解这些概念有助于更好地利用 Vue 的响应式系统，使得数据和视图的交互更为灵活和高效。
转载请注明出处：http://www.zyzy.cn/article/detail/515/Vue 3.0