孙卫琴的《精通Vue.js》读书笔记-分割setup()函数

最新推荐文章于 2025-02-12 14:50:30 发布

原创

最新推荐文章于 2025-02-12 14:50:30 发布 · 368 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何根据孙卫琴和杜聚宾的《精通Vue.js》进行setup()函数的分割，以提升模块化和代码组织。内容包括将setup()拆分为多个函数，分别处理业务逻辑，并将其拆分到不同.js文件中，增强代码可维护性和团队协作效率。

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书
在这里插入图片描述
Vue框架的组合API的主要用途是更加灵活地对项目进行模块化的分割。当setup()函数本身非常庞大，也必须对它进行分割，这样才能发挥组合API的特长。
对setup()函数的分割包括两个步骤：
（1）把setup()函数分割成多个函数。把处理相关业务逻辑的代码分割到同一个函数中。
（2）把从setup()函数中分割出来的每个函数放到单独的.js文件中。

1．把setup()函数分割到多个函数中

例程1的PersonFull.vue定义了PersonFull组件，它的setup()函数会返回person和persons变量，这两个变量都支持响应式机制。setup()函数还会返回add()和remove()方法。add()方法向persons.array数组中加入一个person对象，remove()方法从persons.array数组中删除特定的person对象。

例程1 PersonFull.vue

<template>
  <div>
    <p>姓名：<input type="text" v-model="person.name"></p>
    <p>年龄：<input type="text" id="" v-model="person.age"></p>
    <p><button @click="add()">添加</button></p>
   </div>