vue3生态 学习笔记-setup
vue3的风格分为选项式api
与组合式api
,两种写法风格区别较大,但是都能完成任务。其中组合式api可以省去很多代码模板,可以代替选项式api,但是有一些代码,目前阶段只能用选项式api去写。
选项式api
在以前的vue中,就是这种写法。一个vue组件,里面包含一个好几个对象的成员,如data
,methods
,computed
,在里面写组件的状态,方法,就像选项一样。
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件监听器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
组合式api
通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <script setup>
搭配使用。这个 setup attribute
是一个标识,告诉 Vue 需要在编译时进行转换,来减少使用组合式 API 时的样板代码。例如,<script setup>
中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与 <script setup>
改造后和上面的模板完全一样的组件:
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
建议参阅api风格