1、选项式API与组合式API
在vue中我们有两种API,一种是选项式,一种是组合式,其中选项式主要用于vue2,组合式主要用于vue3。
选项式API(Option API)
在vue2中我们书写选项式API,每个选项都有固定的书写位置,使用data选项来书写响应式数据,methods中书写方法。
-
优点:写代码的位置已经约定好,结构清晰
-
缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读,同一功能的上下文代码难找。
-
export default{ data(){ return{ list:[] } }, methods:{ //书写方法函数,在需要读取data中定义的数据时,需要使用this. 来获取,所以里面不能使用箭头函数 }, }
组合式API(composition)
所有与特定功能相关地代码可以写到一块,代码比较集中,在定义响应式数据时不在需要data,方法函数也不再写在metgods中
<script setup>
import { computed,watch,ref ,reactive} from "vue";
//定义响应式数据
const num = ref('');
const list = reactive([]);
//定义方法
const getNum=()=>{
}
</script>
2、生命周期函数
选项式API | 组合式APT |
beforeCreate | 没有beforeCreate,在setup中做了beforeCreate、created中应该做的事 |
created | |
beforeMount | onBeforeMount 挂载DOM前 |
mounted | onMounted 挂载DOM后 |
beforeUpdate | onBeforeUpdate 更新组件前 |
updated | < |