工艺品商城网站建设,欧米茄官方手表,新零售平台软件系统,用别人家网站做跳转前言
相信学习Vue3的人中大多数都是之前使用Vue2开发的#xff0c;当拿到一个Vue3项目时就接触到了组合式api#xff0c;但对于组合式api不了解的人第一眼看上去会觉得一头雾水。#xff1a;“什么玩意#xff0c;乱七八糟的#xff0c;选项式api多好#xff0c;方法变量…前言
相信学习Vue3的人中大多数都是之前使用Vue2开发的当拿到一个Vue3项目时就接触到了组合式api但对于组合式api不了解的人第一眼看上去会觉得一头雾水。“什么玩意乱七八糟的选项式api多好方法变量分的明明白白的。”其实学习Vue3的第一步就是了解什么是选项式API和组合式API只要了解清楚这个才能打开后续的学习。 1. 什么是选项式API和组合式API
1.1 选项式APIOption API
对于熟悉使用Vue2的小伙伴来说我们在Vue2项目中使用的就是组合式API。整个组件像是被一项一项配置出来的。把具有相同功能的放在一起可以用包含多个选项的对象来描述组件的逻辑例如 data、methods 和 mounted等等Vue的配置项。选项所定义的属性都会暴露在函数内部的 this 上它会指向当前的组件实例。
选项式下发如下
script
export default{data(){return {count:10,price:9.9,}},computed:{sun:(){return this.count*this.price;}},watch:{sum:(newVal,oldVal){this.sumChanged(newVal);}}
}
created(){},
mounted(){},
methods:{sumChanged(newSum){console.log(总价已更新为,this.sum);}
}/script
templatep{{count}}/pp{{price}}/pp{{ sum }}/p
/template 1.2 组合式APIComposition API 组合式API是一系列 API 的集合使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语涵盖了以下方面的 API
例如 ref() 和 reactive()使我们可以直接创建响应式状态、计算属性和侦听器
例如 onMounted() 和 onUnmounted()使我们可以在组件各个生命周期阶段添加逻辑。
不像选项式API一样代码分块不是按照data、methods、computed等来分而是根据逻辑来分块以往需要找到这块功能的相关逻辑需要各种切换滚动找来找去用了组合式api之后妈妈再也不怕我找不到相关逻辑代码了并且挪动这块代码到别的文件不需要重新组织代码大大降低重构成本大大提高代码的可阅读性。
组合式写法如下
script setup
import {ref,computed, watch} from vue;// 下面这一块代码只负责处理数量、单价、总价逻辑
const count ref(10);
const price ref(9.9);setTimeout((){count.value 200;
},3000);const sum computed((){return count.value*price.value;
})watch(sum,(newVal,oldVal){sumChanged(newVal);
})
function sumChanged(newSum){console.log(您的总价已更新为,newSum);
}
onMounted((){})console.log(count.value);
console.log(price.value);
/script
templatep{{count}}/pp{{price}}/pp{{ sum }}/p
/template
2. 选项式API和组合式API各自的优势 2.1 选项式API的优缺点
优点易于学习和使用写代码的位置已经约定好了。相同的功能放在一起归类很完美。新手上手简单。最直观的感受就是在学Vue2时比学Vue3时入门更简单。
缺点代码组织性差相似的逻辑代码复用性差逻辑复杂代码多了不利于阅读。例如在选项式Api中的变量都定义在data中很多功能模块的变量都放在一起导致变量非常的混乱如果要迁移一个功能需要在项目中查找该功能对应的变量时比较费时费力大大降低了开发效率。
2.2 组合式API的优点
优点逻辑性偏强功能逻辑比如数据、watch、方法等可以写在一块容易查找后期维护方便。例如将一个功能的所有变量、方法、监听事件都放在一起功能迁移时就不用去翻代码找变量非常的方便。
缺点相比选项式上手要难些更加抽象一点学习成本可能会增加。 我们分别用选项式Api和组合式Api来实现一个相同的功能比较直观的对比一下两者的区别 选项式Api代码示例 : script
export default{data(){return {count:10,price:9.9,}},computed:{sun:(){return this.count*this.price;}},watch:{sum:(newVal,oldVal){this.sumChanged(newVal);}}
}/*这里有1000行代码………*/methods:{sumChanged(newSum){console.log(总价已更新为,this.sum);}
}/script
templatep{{count}}/pp{{price}}/pp{{ sum }}/p
/template 组合式Api代码示例 script setup
import {ref,computed, watch} from vue;/*这里有10000行代码………*/// 下面这一块代码只负责处理数量、单价、总价逻辑
const count ref(10);
const price ref(9.9);setTimeout((){count.value 200;
},3000);const sum computed((){return count.value*price.value;
})watch(sum,(newVal,oldVal){sumChanged(newVal);
})
function sumChanged(newSum){console.log(您的总价已更新为,newSum);
}console.log(count.value);
console.log(price.value);
/script
templatep{{count}}/pp{{price}}/pp{{ sum }}/p
/template
在示例代码中两个代码都中都实现了通过数量、单价计算总值的功能假如中间有10000行代码那么选项式Api的所有内容贯穿了整个文件。而组合式Api将所有计算总计的变量都放在了一起非常滴方便。
3. Vue3中使用组合式API的两种方式
钩子是在组件中使用组合式 API 的入口通常只在以下情况下使用
需要在非单文件组件中使用组合式 API 时。需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
1. 组合式API 我们可以使用响应式 API 来声明响应式的状态在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性
script
import {ref} from vue;
export default{data(){return {price:9.9}},setup(){let count ref(10);return {count}},created(){console.log(this.count);console.log(this.price);}
}
/script
templateh1{{count}}/h1h1{{price}}/h1
/template2. 使用script setup/script推荐使用该方法对于结合单文件组件使用的组合式 API推荐通过 script setup 以获得更加简洁及符合人体工程学的语法
script setup
import {ref} from vue;const count ref(10);
const price ref(9.9);console.log(count.value);
console.log(price.value);
/script
templatep{{count}}/pp{{price}}/p
/template
