详细分析Vue3中的reactive（附Demo）

news2024/9/21 2:50:14

1. 基本知识

reactive 是一个函数，用于将一个普通的 JavaScript 对象转换为响应式对象

当对象的属性发生变化时，Vue 会自动追踪这些变化，并触发相应的更新

Vue2没有，而Vue3中有，为啥使用这个reactive呢？

响应式数据绑定：Vue 3 通过 reactive 实现了更高效的响应式系统
组合式 API：相比于 Vue 2 的选项式 API，组合式 API 提供了更好的逻辑复用和代码组织方式
更细粒度的 reactivity：通过 reactive，可以实现更细粒度的响应式数据追踪

基本的用法如下：

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

function increment() {
  state.count++;
}

2. 用法

详细用法有如下：

创建响应式对象：

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello Vue 3!'
});

console.log(state.message); // 输出: Hello Vue 3!
state.message = 'Hello World!';
console.log(state.message); // 输出: Hello World!

嵌套对象：

const state = reactive({
  user: {
    name: 'Alice',
    age: 25
  },
  items: ['item1', 'item2']
});

state.user.age = 26; // 追踪变化
state.items.push('item3'); // 追踪变化

与 computed 结合使用：

import { reactive, computed } from 'vue';

const state = reactive({
  count: 1
});

const doubleCount = computed(() => state.count * 2);

console.log(doubleCount.value); // 输出: 2
state.count++;
console.log(doubleCount.value); // 输出: 4

与 watch 结合使用：

import { reactive, watch } from 'vue';

const state = reactive({
  count: 1
});

watch(() => state.count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

state.count++; // 控制台输出: count changed from 1 to 2

3. Demo

总体Demo如下：

# 使用 Vue CLI
vue create my-vue3-app

# 使用 Vite
npm init vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install

编写组件：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
};
</script>

<style scoped>
button {
  margin-top: 10px;
}
</style>

使用组件：

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
  components: {
    Counter
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>