对比Vue2中Options API 和 Vue3中Composition API
16lz
2021-02-25
1 Options API
Options API 可以翻译为选项API,字面意思可供使用者挑拣的分类条目,就是框架定义好选项,我们可以把我们的功能写在选项里,如props 里面设置接收参数、data 里面设置变量、computed 里面设置计算属性、watch 里面设置监听属性、methods 里面设置事件方法你会发现 Options APi 都约定了我们该在哪个位置做什么事。
export default { name: 'index', data() { return {} }, watch: {}, components: {}, created() {}, methods: {}, computed: {}}
缺点: 一个功能往往需要在Vue不同的配置项中定义属性和方法,比较分散,如果项目比较小,组件逻辑功能不多,代码结构还能保持清晰明了,但是项目大了后,一个methods中可能包含多个方法甚至几十个方法,你往往分不清哪个方法对应哪个功能,耦合度相对较高。
2 Composition API
Composition API 可以理解为组合API,一个小功能的api都会放到一起,下面一个简单的例子,可能运行会报错,这里只是演示写法。
export default { setup(props, context) { // 用户登录 const login = reactive({ login: "1" }); // 登录验证 const loginonSubmit = e => { e.preventDefault(); validate() .then(() => {}) .catch(err => {}); }; // 用户注册 const registered = reactive({ registered: "1" }); const registeredonSubmit = e => { e.preventDefault(); validate() .then(() => {}) .catch(err => {}); }; return { login loginonSubmit , registered , registeredonSubmit }; }};
Composition API 根据逻辑相关性组织代码,提高可读性和可维护性,这样做,即时项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有API。
©著作权归作者所有:来自51CTO博客作者mb5fd86dae5fbf6的原创作品,如需转载,请注明出处,否则将追究法律责任更多相关文章
- 通过设置createFromIconfontCN使Vue3项目支持iconfont图标库
- 【Nest教程】实现一个简单的用户增删改查功能
- 第7章 0202-面向对象编程基础,学习心得、笔记(类声明,类的实例化,类
- 功能测试——app测试要点最全分析
- Windows7设置Redis开机自启动
- 在vim中设置tab缩进为4个字符
- 实战项目:用原生JS实现一个购物车的功能
- PHP基础: 类(class)的声明,实例化,静态成员和类的扩展﹑trait的功
- jvm的那些设置参数你都知道吗