vue3编写组件的几种实现方式
作者：lethe_R
这篇文章主要介绍了vue3编写组件的几种实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
一、选项式写法
在 vue2.x 项目中使用的写法就是选项API的写法
（说明：类似于与vue2中的data里面写的是定义的数据，methods里面写的是处理数据的方法，每一个选项都只负责自己的部分）
- 优点：易于学习，代码位置固定，便于阅读；
- 缺点：代码组织性差，相似的逻辑代码不便于复用；
vue3的选项式写法中也可以有vue2的写法
如果是新项目，应只选择vue3的写法（这里指vue3的项目）
代码如下：
<template>
<div>
<div>
num3: {{ num3 }}
</div>
<div>
num2: {{ num2 }}
</div>
</div>
</template>
// 类似于vue2中，data中定义数据，methods就写方法，每一个选项就写对应所负责的东西
<script>
import { ref } from "vue";
export default {
// vue3代码
props: {
testProps: {
type: Number,
default: () => {
return 123456;
},
},
}, // 接收传过来的数据
setup(props, context) {
console.log("setup的props", props); // 父组件传递过来的数据，但是前提是需要在props进行数据的接收，否则无法使用
console.log("testProps", props.testProps); // 123456
console.log("setup的context", context);
const num3 = ref(1);
const addV3 = () => {
num3.value++;
};
return { num3, addV3 }; // 使用选项式写法这里必须将数据return出去
},
// vue2代码
data() {
return {
num2: 456,
};
},
methods: {
addV2() {
this.num2++; // 这里面是可以使用this的，但是setup中不可以使用this
},
},
mounted() {},
};
</script>二、组合式写法
组合式写法（vue3特有的写法）
- 优点：一个功能逻辑的代码组织写在一起的，便于阅读和维护；
- 缺点：需要有良好的代码组织能力和拆分逻辑能力；
说明：使用选项式的写法写vue3里面可以有vue2的代码，但是如果采用vue3语法糖的写法里面是不能有vue2的写法的；
<template>
<div>
<div>
num: {{ num }}
</div>
<div>
comValue: {{ comValue }}
</div>
</div>
</template>
// 组合式写法
<script setup> // vue3的语法糖
import { computed, ref } from "vue";
const num = ref(123);
const comValue = computed(() => {
return num.value = num.value + 1;
})
const add = () => {
num.value++ // 使用ref定义的值需要使用点value的形式进行取值
}
console.log(comValue.value); // 124
</script>三、JSX写法
使用defineComponent来书写组件的代码
<template>
<div>
<div>
num: {{ num }}
</div>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
// 在defineComponent使用vue3+vue2写法
export default defineComponent({
setup() {
const num = ref(12);
return {
num
}
},
data() {
return { count: 1 }
},
methods: {
increment() {
this.count++;
}
}
})
// 直接在defineComponent使用vue3写法
// export default defineComponent(() =>{
// const count = ref(0)
// return { count }
// })
</script>总结
虽然vue3出来也有一段时间了，但是很多项目还是用的vue2，我觉得我们也应该慢慢的去使用vue3了，从vue2到vue3的过渡，要养成一个良好的编码习惯；建议使用vue3组合式的语法糖写法。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。