前言
Vue3的OptionsAPI和CompositionAPI学习笔记
OptionsAPI
- 在定义组件时，将不同功能的代码写在Vue预先定义好的对象结构中
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<div v-on:click="fn"></div>
</template>
<script>
export default {
methods: {
fn: function () {
...
}
}
}
</script>
|
CompositionAPI
setup函数
- 在定义组件时，将不同功能的代码都写在setup函数中，只有setup函数返回的数据才能在模板中使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div v-on:click="fn"></div>
</template>
<script>
export default {
setup: function (attrs, slots, emit) {
const fn = function () {
...
}
return {
fn
}
}
}
</script>
|
setup语法糖
- 在定义组件时，将不同功能的代码都写在包含
setup属性的<script></script>标签中，无需返回即可在模板中使用
1
2
3
4
5
6
7
8
9
| <template>
<div v-on:click="fn"></div>
</template>
<script setup>
const fn = function () {
...
}
</script>
|
完成