vue3 ref、reactive、watch的介绍及案例

Vue 3 中的 ref、reactive、watch是常用的 API，用于管理组件内的状态和响应式数据，以及实现页面路由。

ref: ref 用于创建一个响应式数据，可以将其绑定到 DOM 元素、组件属性或其他数据上。使用 ref 创建的响应式数据是一个对象，其中包含一个 value 属性，通过这个属性来访问和修改数据。具体案例：

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

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);

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

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

reactive: reactive 用于创建一个响应式对象，可以将其绑定到组件的属性或其他数据上。使用 reactive 创建的响应式对象是一个 Proxy 对象，可以直接访问和修改对象的属性。具体案例：

<template>
  <div>
    <p>First Name: {{ user.firstName }}</p>
    <p>Last Name: {{ user.lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script lang="ts">
import { reactive, computed } from 'vue';

interface User {
  firstName: string;
  lastName: string;
}

export default {
  setup() {
    const user = reactive<User>({
      firstName: 'John',
      lastName: 'Doe',
    });

    const fullName = computed(() => `${user.firstName} ${user.lastName}`);

    function updateName() {
      user.firstName = 'Jane';
      user.lastName = 'Doe';
    }

    return { user, fullName, updateName };
  },
};
</script>
watch: watch 用于监听响应式数据的变化，可以在数据发生变化时执行一些操作。可以使用 watch 监听单个响应式数据，也可以使用 watchEffect 监听多个响应式数据。具体案例：
<template>
  <div>
    <p>Count: {{ count.value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);

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

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

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

computed: computed 用于创建一个计算属性，可以根据响应式数据计算出一个新的值。计算属性是一个响应式数据，当它依赖的响应式数据发生变化时，计算属性会重新计算。具体案例：

<template>
  <div>
    <p>First Name: {{ user.firstName }}</p>
    <p>Last Name: {{ user.lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script lang="ts">
import { reactive, computed } from 'vue';

interface User {
  firstName: string;
  lastName: string;
}

export default {
  setup() {
    const user = reactive<User>({
      firstName: 'John',
      lastName: 'Doe',
    });

    const fullName = computed(() => `${user.firstName} ${user.lastName}`);

    function updateName() {
      user.firstName = 'Jane';
      user.lastName = 'Doe';
    }

    return { user, fullName, updateName };
  },
};
</script>