什么是 vue3 的 CompositionAPI？

Vue 3中的Composition API是一组新的API，它允许开发者使用函数式编程的方式来组织和复用组件逻辑。与Vue 2中的Options API（如data、methods、computed等选项）相比，Composition API提供了一种更加灵活和可组合的方式来编写组件逻辑。

下面是Composition API的一些主要方法和使用示例：

setup：这个函数在组件实例初始化之前被调用，可以在这里声明数据、计算属性、方法、生命周期钩子等。

javascript

export default {

  setup() {

    let name = "张三";

    function greet() {

      console.log(`Hello, ${name}!`);

    }

    return { name, greet }; // 必须在这里return，模板中才能使用

  }

}

 

在模板中，你可以使用{{ name }}来显示name的值，以及<button @click="greet">Greet</button>来触发greet方法。

2. ref和toRefs：ref用于定义一个基本类型的响应式数据，而toRefs则可以将响应式数据包装成一个普通的对象，使得在模板中可以直接使用对象的属性。

javascript

import { ref, toRefs } from 'vue';

export default {

  setup() {

    const count = ref(0);

    const state = toRefs({

      name: '张三',

      age: 30

    });

    return { count, ...state };

  }

}

 

computed：用于定义计算属性，只有当依赖的数据发生变化时才会重新计算。

javascript

import { ref, computed } from 'vue';

export default {

  setup() {

    const base = ref(1);

    const doubled = computed(() => base.value * 2);

    return { base, doubled };

  }

}

 

watch和watchEffect：用于监听数据变化。watch可以监听特定的响应式数据，而watchEffect则会自动收集依赖并执行回调函数。

javascript

import { ref, watch, watchEffect } from 'vue';

export default {

  setup() {

    const count = ref(0);

    

    watch(count, (newVal, oldVal) => {

      console.log(`Count changed from ${oldVal} to ${newVal}`);

    });

    

    watchEffect(() => {

      console.log(`Count is ${count.value}`);

    });

    

    return { count };

  }

}

 

生命周期钩子：虽然Composition API本身没有直接提供生命周期钩子的方法，但你可以通过onMounted、onUpdated等函数在setup中使用它们。

javascript

import { onMounted, onUpdated } from 'vue';

export default {

  setup() {

    onMounted(() => {

      console.log('Component mounted');

    });

    

    onUpdated(() => {

      console.log('Component updated');

    });

  }

}

在使用Composition API时，需要注意的是，由于setup函数在组件创建之前执行，因此其中的this关键字不会指向当前组件实例，而是undefined。如果需要与父组件通信，可以通过setup函数的参数来获取props和context。

Composition API提供了一种更为灵活和可复用的方式来组织Vue组件的逻辑，尤其适用于大型和复杂的Vue应用。