Vue3选项式API和组合式API的概念
时间: 2024-10-10 12:07:16 浏览: 14
Vue3引入了两种主要的API设计风格:选项式API(Options API)和组合式API(Composition API)。以下是它们的简要解释:
1. **选项式API**:这是Vue早期版本的传统模式,开发者通过`<script>`标签定义组件的选项,如数据、方法、生命周期钩子等。组件就像一个配置对象,你可以直接设置它的属性。例如:
```js
export default {
data() {
return {
message: 'Hello Vue'
}
},
methods: {
sayHello() {
console.log(this.message)
}
}
}
```
在模板中,你可以直接使用这些数据和方法。
2. **组合式API**:从Vue 3开始,官方鼓励使用新的编写方式,即使用函数和导出对象来组织组件逻辑。它更注重模块化和函数式编程思想,通过`setup()`方法创建一个可复用的逻辑单元,并返回一个对象供渲染函数使用。比如:
```js
import { ref } from 'vue'
const MyComponent = {
setup() {
const message = ref('Hello Vue')
function sayHello() {
console.log(message.value)
}
return { message, sayHello }
}
}
```
在这个例子中,`message` 和 `sayHello` 函数作为组件内部的响应式状态和功能提供给模板。
阅读全文