选项式API和组合式A

简介: 选项式API和组合式A

组合式 API 和选项式 API 是 Vue.js 提供的两种不同的 API。组合式 API 更加灵活,在处理复杂场景时更有效,而选项式 API 则更易于入门和使用,适合处理简单的场景。下面是组合式 API 和选项式 API 的一个比较:

组合式 API

<template>
  <div>
    <p>{{ title }}</p>
    <button @click="increaseCount">点击按钮 +1</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script>
import { reactive, computed, watch } from 'vue';
export default {
  setup() {
    const data = reactive({
      title: '使用组合式 API',
      count: 0,
    });
    const increaseCount = () => {
      data.count++;
    };
    const doubleCount = computed(() => {
      return data.count * 2;
    });
    watch(
      () => data.count,
      (newCount, oldCount) => {
        console.log(`计数从 ${oldCount} 变为 ${newCount}`);
      }
    );
    return {
      title: data.title,
      count: data.count,
      increaseCount,
      doubleCount,
    };
  },
};
</script>

选项式 API

<template>
  <div>
    <p>{{ title }}</p>
    <button @click="increaseCount">点击按钮 +1</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '使用选项式 API',
      count: 0,
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    },
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  watch: {
    count(newCount, oldCount) {
      console.log(`计数从 ${oldCount} 变为 ${newCount}`);
    },
  },
};
</script>
相关文章
|
4天前
|
JavaScript API
vue选项式API和组合式Api
vue选项式API和组合式Api
|
4天前
|
JavaScript 前端开发 API
Vue 3.0 组合式API Setup
Vue 3.0 组合式API Setup
40 0
|
4天前
|
JavaScript 前端开发 API
组合API:掌握Vue的组合式API(Composition API)
【4月更文挑战第24天】Vue.js的组合式API是Vue 3中的新特性,旨在提供更灵活的组件逻辑组织方式。它允许开发者像React Hooks一样定义和复用逻辑单元——组合函数。通过组合函数,可以跨组件共享和管理状态,提升代码复用和维护性。本文介绍了如何开始使用组合式API,包括安装Vue CLI、引入API、使用组合函数以及组织和复用逻辑。掌握组合式API能增强开发复杂应用的能力,改善代码结构和可读性。
|
4天前
|
JavaScript 前端开发 API
Vue3 组合式 API
Vue3 组合式 API
|
4天前
|
缓存 JavaScript 前端开发
浅谈Vue3中的组合式API
浅谈Vue3中的组合式API
62 2
|
9月前
|
API
Vue3中组合式Api优势
Vue3中组合式Api优势
|
4天前
|
JavaScript 前端开发 算法
Vue 3.0 组合式API 模板引用
Vue 3.0 组合式API 模板引用
18 0
|
4天前
|
JavaScript 前端开发 API
Vue 3.0 组合式API provide/inject
Vue 3.0 组合式API provide/inject
36 0
|
4天前
|
JavaScript 前端开发 API
Vue 3.0 组合式API 生命周期钩子
Vue 3.0 组合式API 生命周期钩子
40 0
|
4天前
|
存储 JavaScript 前端开发
Vue3中的组合式API的详细教程和介绍
Vue3中的组合式API的详细教程和介绍
52 0

热门文章

最新文章