vue3用的是什么语法

Vue 3 使用的是组合式 API（Composition API）和模板语法。

Vue 3 引入了组合式 API，这是一种新的方式来组织和复用代码。此外，Vue 3 依然保持了模板语法，允许开发者使用声明式的方式来描述用户界面。组合式 API 通过 setup 函数引入了更灵活的状态管理和逻辑复用方式，而模板语法则继续提供了简洁直观的视图层开发体验。

一、组合式 API

组合式 API 是 Vue 3 的一大亮点，它提供了一种全新的方式来组织组件逻辑，使代码更加模块化和可维护。以下是组合式 API 的主要特点：

setup 函数
响应式状态
生命周期钩子

setup 函数

setup 函数是组合式 API 的核心，它在组件实例创建之前被调用。所有的逻辑、状态声明和生命周期钩子都在 setup 函数中定义。

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return {
      count,
      increment
    };
  }
};

响应式状态

Vue 3 提供了多种方式来创建响应式状态，包括 ref 和 reactive。ref 用于创建简单的响应式数据，而 reactive 用于创建复杂的响应式对象。

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3!'
    });
    function increment() {
      state.count++;
    }
    return {
      state,
      increment
    };
  }
};

生命周期钩子

组合式 API 允许在 setup 函数中使用生命周期钩子。Vue 3 提供了与选项式 API 相对应的钩子函数，如 onMounted、onUpdated 和 onUnmounted。

import { onMounted, ref } from 'vue';
export default {
  setup() {
    const message = ref('Loading...');
    onMounted(() => {
      message.value = 'Hello Vue 3!';
    });
    return {
      message
    };
  }
};

二、模板语法

模板语法是 Vue 的传统特性，它允许开发者通过声明式的方式来描述用户界面。Vue 3 继续支持模板语法，使视图层开发变得直观易懂。以下是模板语法的主要特点：

指令
插值
事件处理

指令

Vue 提供了一系列内置指令，如 v-bind、v-model 和 v-if，用于实现数据绑定、双向数据绑定和条件渲染。

<template>
  <div>
    <p v-if="isVisible">This is visible</p>
    <input v-model="inputValue" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true,
      inputValue: ''
    };
  }
};
</script>

插值

插值语法（{{}}）用于在模板中绑定数据。它可以绑定简单的变量、表达式，甚至是函数的返回值。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  }
};
</script>

事件处理

Vue 提供了 v-on 指令来绑定事件处理器。你可以使用简写形式 @ 来绑定事件处理函数。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

三、组合式 API 与选项式 API 对比

Vue 3 引入组合式 API 后，开发者可以选择使用组合式 API 或选项式 API。以下是两者的对比：

特性	组合式 API	选项式 API
代码组织	逻辑集中在 `setup` 函数中	逻辑分散在不同的选项中
可复用性	高，通过组合函数（composables）复用	较低，逻辑复用需要混入（mixins）
代码清晰度	高，相关逻辑集中在一起	较低，相关逻辑分散
学习曲线	较陡，需要理解更多概念	较平缓，易于上手

组合式 API 更适合的场景

复杂组件逻辑：当组件逻辑复杂且需要复用时，组合式 API 更为适用。
逻辑复用：通过组合函数可以方便地复用逻辑，而不需要依赖混入。
大型项目：在大型项目中，组合式 API 可以更好地组织和管理代码。

选项式 API 更适合的场景

简单组件：对于简单的组件，选项式 API 更加直观和易于上手。
快速开发：选项式 API 的学习曲线较平缓，适合快速开发和原型设计。

四、组合式 API 的优势

组合式 API 带来了许多新的优势，使开发者可以更高效地管理和复用代码。以下是组合式 API 的主要优势：

逻辑复用
代码组织
类型推断
性能优化

逻辑复用

组合式 API 允许开发者通过创建组合函数（composables）来复用逻辑。这种方式比传统的混入（mixins）更为灵活和易于管理。

// composable.js
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return {
    count,
    increment
  };
}
// Component.vue
import { useCounter } from './composable';
export default {
  setup() {
    const { count, increment } = useCounter();
    return {
      count,
      increment
    };
  }
};

代码组织

组合式 API 将相关的逻辑集中在 setup 函数中，使代码更为模块化和清晰。相比之下，选项式 API 中的逻辑分散在不同的选项中，如 data、methods 和 computed。

类型推断

TypeScript 在组合式 API 中有更好的支持。由于 setup 函数返回一个对象，TypeScript 可以更好地进行类型推断和检查，增强了代码的可靠性。

性能优化

组合式 API 通过减少内部依赖和优化渲染性能，使应用程序运行更为高效。Vue 3 的响应式系统也进行了重构，进一步提升了性能。

五、组合式 API 的使用示例

为了更好地理解组合式 API，我们来看一个完整的示例。这个示例展示了如何使用组合式 API 创建一个计数器组件。

// Counter.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return {
      count,
      increment
    };
  }
};
</script>

在这个示例中，我们使用 ref 创建了一个响应式的计数变量 count，并定义了一个 increment 函数来增加计数。所有的逻辑都集中在 setup 函数中，使代码更加清晰和易于维护。

六、进一步的建议和行动步骤

为了更好地使用 Vue 3 和组合式 API，以下是一些进一步的建议和行动步骤：

学习组合式 API：通过官方文档和教程深入学习组合式 API 的概念和使用方法。
实践练习：通过实际项目练习组合式 API 的使用，逐步掌握其应用技巧。
关注社区：关注 Vue 社区的最新动态和最佳实践，不断提升自己的技能水平。
代码重构：尝试将现有项目中的选项式 API 代码重构为组合式 API，提高代码的可维护性和复用性。

总结来说，Vue 3 引入的组合式 API 和模板语法为开发者提供了更灵活和高效的开发体验。通过深入学习和实践，开发者可以更好地掌握这些新特性，提升开发效率和代码质量。