编写易于测试的 Vue 3 组件 最近 Vue Test Utils 2.0 正式版终于发布了！Vue Test Utils（VTU）帮助你为 Vue 组件编写测试。然而，VTU 的功能也有限，比如我们无法使用包裹器方法 setData 来修改 script setup 中的响应式数据。以下是一些建议，帮助你编写易于测试的代码，并编写有意义且易于维护的测试。

Vue 3 双向数据绑定 双向数据绑定在前端最早用在 KO、AngularJS 这些 MVVM 框架中，它是 Vue 从诞生就一直有的特性。使用 v-model 可以在组件上实现双向绑定，方便表单应用的开发。相比 Vue 2，Vue 3 的双向绑定功能得到了增强，具体表现在以下几个方面：

Vue 无限滚动加载列表 最近按照产品的要求对列表进行了重构，把以前的普通的翻页列表改成了无限滚动加载列表——滚动至底部时，加载更多数据——和移动应用的翻页效果类似。借助 vue-infinite-scroll 组件很快就实现了无限滚动加载功能。

自定义 Vue 路由器 先前写过一篇为 material 组件自定义 AngularJS 路由器的文章。最近有一个为 Element UI 组件添加自定义路由器的需求，结合 vue-router 也不难实现。需求初始地址为 #city，不会选中区号按钮，面包屑 All；如果导航地址为 #city/0755，则选中0755，面包屑 All > 深圳点击区号按钮（021、0755）会相应修改访问地址（#city/021、#city/0755）点击区号按钮，面包屑会显示为 All > 城市名（广州、深圳）点击面包屑 All 跳转到初始地址 #city可以通过导航栏或浏览器的前进后退按钮导航同步修改浏览器标题栏为当前选择城市名一句话，如何实现区号按钮组、导航栏、浏览器导航三者的同步更新？实现区号按钮组新建 Breadcrumb.vue, 这里我们用 el-radio-group 来渲染区号按钮<el-radio-group v-model="selected" @change="handleChange"> <el-radio-button v-for="item in cities" :label="item.code" :key="item.code" > </el-radio-button> </el-radio-group>以下是单选按钮组遍历要用到的数据：const cities = [ { city: "上海", code: "021", degree: 28, }, { city: "北京", code: "010", degree: 24, }, { city: "广州", code: "020", degree: 33, }, { city: "深圳", code: "0755", degree: 32, }, ];我们为其绑定了 selected 保留，并声明了 handleChange 事件处理方法：handleChange(value) { console.log(value)可以简单测试以下，当切换单选按钮组，会打印不同的区号。为方便，我们没有将这部分实现放到了 Breadcrum 组件中，并没有单独拆分成一个组件。实现导航栏在 Breadcrum 组件中：<nav> <el-button class="el-icon-back" @click="back"></el-button> <el-button class="el-icon-right" @click="forward"></el-button> <router-link>All</router-link> <template v-if="selected"> <i class="el-icon-arrow-right"></i> {{ currentCity }} </template> </nav>我们在这里添加了前进后退按钮和面包屑，下面我们来实现单选按钮组与面包屑的同步。添加以下计算属性：computed: { currentCity() { const found = this.cities.find(item =>item.code === this.selected) if (found) { return found.city } return 'All' } }测试以下，点击区号按钮，面包屑会显示为 All > 城市名，我们完成了第二个需求。要实现其他需求，着重看 Vue Router。配置路由器根据强两个需求，新建 router\index.js，配置如下路由对象后，导出自定义路由器：export default new Router({ routes: [ { path: "/", redirect: "/city" }, { path: "/city/:code", name: "Breadcrumb", component: Breadcrumb } ] });第一个路由默认会跳转到 #city，第二个路由地址使用了参数 code，参数为 0755 则会跳转到 #city/0755。注意，Vue Router 中路由地址传参方式 :paramName。添加路由器在 App 组件中，引入之前的自定义路由器，将其最为插件添加 Vue 示例中。import router from "./router"; //... new Vue({ // ... router, // ... });对照需求 1 测试一下， 没啥问题后来看需求 3：点击面包屑 All 跳转到初始地址 #city。修改面包屑在 Breadcrumb 组件中做如下修改<router-link exact exact-active-class="exact" :to="{ path: '/city' }"> All </router-link><router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。这里，我们做了两件事：配置了目标路由被精确匹配的时候应该激活的样式配置了表示目标路由的链接 '/city'对照需求 1 测试一下。最后我们来看需求 4：通过导航栏或浏览器的前进后退导航自定义前进后退导航在 Breadcrumb 组件中，我们之前已经添加了前进后退按钮，现在需要实现交互：处理前进forward() { this.$router.go(1); }router.go(n) 方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。处理后退back() { this.$router.go(-1); }修改 handleChangehandleChange(value) { this.$router.push({ path: `/city/${value}` }); },注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。都是 Vue Router 编程式的导航，很简单。对照需求 1 测试一下。最后我们来看需求 4：通过导航栏或浏览器的前进后退导航同步修改浏览器标题栏这个操作需要直接修改 DOM，是一个副作用，需要监听$route.params.codewatch: { "$route.params.code": { handler(value) { document.title = this.currentCity this.selected = value; }, immediate: true, }, },注意，我们还同步修改了 selected ，并设置 immediate 为 true，确保该回调将会在侦听开始之后被立即调用。参考示例访问 codesandbox 查看项目代码使用 navbar 和 ui-router 动态加载外部模板React Router 简介

使用 Vue 自定义 SelectList 组件 最近我们的设计师对先前的系统进行了大量的重构。加了大量的 SelectList 的界面。所谓的“SelectList”，就是有选择状态的列表。点击选择某项可以获取该项的值。