Vue3中的setup语法糖、computed函数、watch函数怎么使用

引言

Vue3作为Vue.js的最新版本，带来了许多新的特性和改进，其中最引人注目的莫过于Composition API。Composition API提供了一种更灵活、更强大的方式来组织和复用代码逻辑。在Composition API中，setup函数、computed函数和watch函数是三个非常重要的工具。本文将详细介绍这三个函数的使用方法，并通过示例代码帮助读者更好地理解和掌握它们。

1. setup语法糖

1.1 什么是setup函数

setup函数是Composition API的核心，它在组件实例创建之前执行，用于初始化组件的响应式状态、计算属性、方法等。setup函数接收两个参数：props和context。

• props：组件的属性对象，与Vue2中的props类似。
• context：包含了一些常用的属性和方法，如attrs、slots、emit等。

1.2 setup函数的基本用法

import { ref } from 'vue';

export default {
  setup(props, context) {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

在上面的代码中，我们使用ref函数创建了一个响应式的count变量，并定义了一个increment方法来增加count的值。最后，我们将count和increment返回，以便在模板中使用。

1.3 setup语法糖

在Vue3.2中，引入了<script setup>语法糖，使得setup函数的使用更加简洁。使用<script setup>语法糖时，不需要显式地定义setup函数，所有的变量和方法都会自动暴露给模板。

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

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

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

在上面的代码中，我们直接在<script setup>标签中定义了count和increment，它们会自动暴露给模板，无需手动返回。

1.4 setup语法糖的优势

• 简洁性：<script setup>语法糖使得代码更加简洁，减少了样板代码。
• 自动暴露：所有在<script setup>中定义的变量和方法都会自动暴露给模板，无需手动返回。
• 更好的类型推断：在使用TypeScript时，<script setup>语法糖可以提供更好的类型推断。

2. computed函数

2.1 什么是computed函数

computed函数用于创建计算属性。计算属性是基于响应式数据进行计算的值，当依赖的响应式数据发生变化时，计算属性会自动更新。

2.2 computed函数的基本用法

import { ref, computed } from 'vue';

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

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

    return {
      count,
      doubleCount
    };
  }
};

在上面的代码中，我们使用computed函数创建了一个doubleCount计算属性，它依赖于count变量。当count发生变化时，doubleCount会自动更新。

2.3 computed函数的进阶用法

computed函数还可以接收一个包含get和set方法的对象，用于创建可写的计算属性。

import { ref, computed } from 'vue';

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

    const doubleCount = computed({
      get: () => count.value * 2,
      set: (newValue) => {
        count.value = newValue / 2;
      }
    });

    return {
      count,
      doubleCount
    };
  }
};

在上面的代码中，我们定义了一个可写的doubleCount计算属性。当doubleCount被赋值时，set方法会被调用，从而更新count的值。

2.4 computed函数的注意事项

• 缓存：计算属性是基于它们的依赖进行缓存的，只有在依赖发生变化时才会重新计算。
• 副作用：计算属性不应该有副作用，即不应该在计算属性中执行异步操作或修改其他状态。

3. watch函数

3.1 什么是watch函数

watch函数用于监听响应式数据的变化，并在数据变化时执行相应的回调函数。watch函数可以监听单个或多个响应式数据。

3.2 watch函数的基本用法

import { ref, watch } from 'vue';

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

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

    return {
      count
    };
  }
};

在上面的代码中，我们使用watch函数监听count变量的变化，并在count发生变化时打印出新旧值。

3.3 watch函数的进阶用法

watch函数还可以监听多个响应式数据，并在它们中的任何一个发生变化时执行回调函数。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = ref(0);

    watch([count, doubleCount], ([newCount, newDoubleCount], [oldCount, oldDoubleCount]) => {
      console.log(`count changed from ${oldCount} to ${newCount}`);
      console.log(`doubleCount changed from ${oldDoubleCount} to ${newDoubleCount}`);
    });

    return {
      count,
      doubleCount
    };
  }
};

在上面的代码中，我们使用watch函数同时监听count和doubleCount的变化，并在它们中的任何一个发生变化时打印出新旧值。

3.4 watch函数的深度监听

watch函数默认是浅层监听的，即它只会监听响应式数据的第一层变化。如果需要监听嵌套对象或数组的变化，可以使用deep选项。

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'John',
      age: 30
    });

    watch(user, (newValue, oldValue) => {
      console.log('user changed', newValue);
    }, { deep: true });

    return {
      user
    };
  }
};

在上面的代码中，我们使用deep: true选项来深度监听user对象的变化。

3.5 watch函数的立即执行

watch函数默认是在监听的数据发生变化时才会执行回调函数。如果需要在组件初始化时立即执行回调函数，可以使用immediate选项。

import { ref, watch } from 'vue';

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

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

    return {
      count
    };
  }
};

在上面的代码中，我们使用immediate: true选项来在组件初始化时立即执行回调函数。

3.6 watch函数的停止监听

watch函数返回一个停止监听的函数，可以在需要时手动停止监听。

import { ref, watch } from 'vue';

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

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

    // 停止监听
    stopWatch();

    return {
      count
    };
  }
};

在上面的代码中，我们使用stopWatch函数来手动停止监听count的变化。

4. 综合示例

为了更好地理解setup语法糖、computed函数和watch函数的使用，我们来看一个综合示例。

<script setup>
import { ref, computed, watch } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

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

const increment = () => {
  count.value++;
};
</script>

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

在上面的代码中，我们使用<script setup>语法糖定义了count、doubleCount和increment，并使用watch函数监听count的变化。当点击“Increment”按钮时，count会增加，doubleCount会自动更新，并且watch函数会打印出count的变化。

5. 总结

Vue3中的setup语法糖、computed函数和watch函数是Composition API的重要组成部分，它们提供了更灵活、更强大的方式来组织和复用代码逻辑。通过本文的介绍和示例代码，相信读者已经对它们的使用有了更深入的理解。在实际开发中，合理使用这些工具可以大大提高代码的可读性和可维护性。

6. 参考资料

• Vue3官方文档
• Vue3 Composition API
• Vue3 Script Setup

---

通过本文的学习，读者应该能够掌握Vue3中setup语法糖、computed函数和watch函数的基本用法，并能够在实际项目中灵活运用这些工具。希望本文对您有所帮助，祝您在Vue3的开发中取得更大的成功！