淺析怎麼使用Vue3開發一個Pagination公共元件

怎麼使用Vue3開發一個Pagination公共元件？以下這篇文章為大家介紹一下基於Vue3 封裝一個 Pagination 公共元件的方法，希望對大家有幫助！

最近有幸參與了我們部門基於 vue3 的公共元件庫的開發，記錄 vue3 實際使用的過程的一些經驗，以及開發公共元件注意的一些問題。 【相關推薦：《vue.js教學》】

#要實現的功能

屬性

##事件

實現後的效果

#理論開發流程

我們採用的是測試驅動開發（TDD）開發的流程為

• 寫對應功能點的文件

• 寫對應功能點的單元測試

• 跑測試案例，確保案例失敗

• 寫程式碼實作

• 執行測試案例，確保案例成功

在實際開發流程

開發之前需要掌握的知識點

• Vue3 的新特性

• 用jest 測試，

  @vue/test-utils: 2.0.0-rc.6 測試Vue 元件

##jsx 語法
組織架構

專案組織結構

組織結構參考

vitepress

文件寫對應功能點的文檔

主要根據設計師給予的UI 效果圖，再結合其他優秀的UI 庫中的功能點，最後討論得到我們需要實現的效果，最後寫文檔。

測試案例編寫

測試覆蓋率的4個指標

行覆盖率（line coverage）：每个可执行代码行是否都执行了？
函数覆盖率（function coverage）：每个函数是否都调用了？
分支覆盖率（branch coverage）：每个流程控制的各个分支是否都执行了？
语句覆盖率（statement coverage）：每个语句是否都执行了？

如何寫測試案例

測試驅動開發要求測試案例編寫優先於單元功能的實現，這就需要先去思考組件該如何取拆分,拆分以後每個部分需要哪些功能。
對這些想像中的功能進行測試。但是在實際開發過程中發現功能沒有開發出來之前編寫測試案例很難去做到一個比較高的一個測試覆蓋率，只好在功能開發完成以後對測試進行一個補充。

pagination 元件的結構

#如下是我在寫功能之前給的組織結構，功能實作在jumper、pager、pagination、 simpler、sizes、total 等jsx 檔案

- _tests_
    - pagination.js
- style
    - index.js
    - index.less
    - mixin.less
- const.js
- index.js
- jumper.jsx
- pager.jsx
- pagination.jsx
- simpler.jxs
- sizes.jsx
- total.jsx

對jumper 功能編寫測試案例舉例

其他部分的測試也類似

#ShowQuickJumper 樹形為true 的時候jumper 相關功能才會展示，而判斷jumper 是否展示可以透過渲染後的元件是否擁有的的特殊的jumper 相關class 來實現，@vue/test-utils 裡面的classes api 很好的實現這樣一個效果。
當 jumper 輸入的值不為數字、數字超出邊界、數字為 NaN 等問題的一個測試。
功能測試，輸入完成，失去焦點的時候是否可以跳到對應的頁面。

達到的測試覆蓋率

#功能完成之前

測試都無法通過

功能完成之後

測試覆蓋率不足70%，可惜忘了截圖

##測試案例補充之後

#如下圖，最終測試覆蓋率是100%

关于测试的总结

追求 100% 的测试覆盖率是否有必要呢？

非常有必要，因为在追求 100% 的测试覆盖率的时候我回去审查每一行代码，看实际过程中是否每一行代码都可以覆盖到，而在这个过程中发现了一些冗余代码，比如说我已经在 jumper.jsx 里面已经对回传 pagination.jsx 中的数据进行了一个处理，确保里面不会产生非数字，且不会超出边界，而又在 pagination.jsx 中处理了一遍, 这样导致 pagination 里面的处理变得多余，而永远不会执行。因为每一行，每一个分支都可以执行到，这样也可以有效的减少潜在的 bug。

功能实现过程遇到的问题

样式规范

• 需要兼容切换风格、后期可能会调整字体颜色、按钮大小、按钮之间的距离等，开发的时候所有颜色、常规的一些距离等等都需要再公共文件里面取。这样每一个小的样式都需要思考是否必须，是否需要在库里取，开发过程可能会比直接写颜色等要慢一些。

• 所以可能带有的 class 都要有 is 属性，is-disabled、is-double-jumper 啥的

• 尽量不用元素选择器，一个是效率低，一个是变更时候容易照成必须要的影响

js 规范

• jsx 里面使用 bind 绑定事件时候，如果里面的第一个参数没有意义，直接设为 null 即可，handleXxx.bind(null, aaa)

• jsx 语句尽量格式化，简短一点

// setup 里面
// 不好的写法
return (
    <div>
        {simple.value ? <Simple xxx /> : <Pager xxx/>}
    <div>
)

// 好的写法
const renderPage = () => {
    if (simple.value) {
        return <Simele xxx/>;
    }
    return <Pager xxx/>
}
return (
    <div>
        {renderPage()}
    </div>
)

• 功能的功能尽量封装成 hooks, 比如实现 v-model

vue3 新特性的实际使用

setup 参数

setup 函数接受两个参数，一个是 props, 一个是 context

props 参数

不能用 es6 解构，解构出来的数据会失去响应式，一般会使用 toRef 或者 toRefs 去处理

context 参数

该参数包含 attrs、slot、emit，如果里面需要使用到某个 emit,则要在 emits 配置中声明

import { definedComponent } from 'vue';
export default definedComponent({
    emits: ['update:currentPage'],
    setup(props, { emit, slot, attrs }) {
        emit('update:currentPage');
        ...
    }
})

v-model 使用

pageSize 和 currentPage 两个属性都需要实现 v-model。

vue2 实现双向绑定的方式

vue 2 实现自定义组件一到多个v-model双向数据绑定的方法

https://blog.csdn.net/Dobility/article/details/110147985

vue3 实现双向绑定的方式

实现单个数据的绑定

假如只需要实现 currentPage 双向绑定, vue3 默认绑定的是 modelValue 这个属性

// 父组件使用时候
<Pagination v-model="currentPage" />

// 相当于
<Pagination :modelValue="currentPage" @update:modelValue="(val) => {currentPage = val}" />

// Pagination 组件
import { defineComponent } from vue;
export default defineComponent({
    props: {
        currentPage: {
            type: Number,
            default: 1
        }
    }
    emits: [&#39;update:currentPage&#39;],
    setup(props, { emit }) {
        当 Pagaintion 组件改变的时候，去触发 update:currentPage 就行
        emit(&#39;update:currentPage&#39;, newCurrentPage)
    }
})

实现多个数据的绑定

pageSize 和 currentPage 两个属性都需要实现 v-model

// 父组件使用时候
<Pagination v-model:currentPage="currentPage" v-model:pageSize="pageSize" />

// Pagination 组件
import { defineComponent } from vue;
export default defineComponent({
    pageSize: {
        type: Number,
        default: 10,
    },
    currentPage: {
        type: Number,
        default: 1,
    },
    emits: [&#39;update:currentPage&#39;, &#39;update:pageSize&#39;],
    setup(props, { emit }) {
        当 Pagaintion 组件改变的时候，去触发相应的事件就行
        emit(&#39;update:currentPage&#39;, newCurrentPage)
        emit(&#39;update:pageSize&#39;, newPageSize)
    }
})

Vue3 和 Vue2 v-model 比较

对于绑定单个属性来说感觉方便程度区别不大，而绑定多个值可以明显感觉 Vue3 的好处，不需要使用 sync 加 computed 里面去触发这种怪异的写法，直接用 v-model 统一，更加简便和易于维护。

reactive ref toRef toRefs 的实际使用

用 reactive 为对象添加响应式

实际组件中未使用，这里举例说明

import { reactive } from 'vue';

// setup 中
const data = reactive({
    count: 0
})
console.log(data.count); // 0

用 ref 给值类型数据添加响应式

jumper 文件中用来给用户输入的数据添加响应式

import {
    defineComponent, ref,
} from 'vue';
export default defineComponent({
    setup(props) {
        const current = ref('');
           return () => (
            <div>
                <FInput v-model={current.value}></FInput>
            </div>
        );
    },
});

当然，其实用 ref 给对象添加响应式也是可以的，但是每次使用的时候都需要带上一个value, 比如，变成 data.value.count 这样使用， 可以 ref 返回的数据是一个带有 value 属性的对象，本质是数据的拷贝，已经和原始数据没有关系，改变 ref 返回的值，也不再影响原始数据

import { ref } from 'vue';

// setup 中
const data = ref({
    count: 0
})
console.log(data.value.count); // 0

toRef

• toRef 用于为源响应式对象上的属性新建一个 ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个 ref 数据，本质上是值的引用，改变了原始值也会改变

• 实际组件并未使用，下面是举例说明

import { toRef } from 'vue';
export default {
    props: {
        totalCount: {
            type: number,
            default: 0
        }
    },
    setup(props) {
        const myTotalCount = toRef(props, totalCount);
        console.log(myTotalCount.value); 
    }
}

toRefs

toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的 ref。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用 toRefs 可以方便解决这一问题。本质上是值的引用，改变了原始值也会改变

// setup 中
const {
    small, pageSizeOption, totalCount, simple, showSizeChanger, showQuickJumper, showTotal,
} = toRefs(props);

// 这样就可以把里面所有的 props '解构'出来
console.log(small.value)

由于 props 是不能用 es6 解构的，所以必须用 toRefs 处理

四种给数据添加响应式的区别

是否是原始值的引用

reactive、toRef、toRefs 处理返回的对象是原始对象的引用，响应式对象改变，原始对象也会改变，ref 则是原始对象的拷贝，和原始对象已经没有关系。

如何取值

ref、toRef、toRefs 返回的响应式对象都需要加上 value, 而 reactive 是不需要的

作用在什么数据上

reactive 为普通对象；ref 值类型数据；toRef 响应式对象，目的为取出某个属性; toRefs 解构响应式对象;

用 vue3 hooks 代替 mixins

如果想要复用是一个功能，vue2 可能会采用 mixins 的方法，mixins 有一个坏处，来源混乱，就是有多个 mixin 的时候，使用时不知道方法来源于哪一个 mixins。而 Vue3 hooks 可以很好解决这一个问题。我们把 v-model 写成一个 hook

const useModel = (
    props,
    emit,
    config = {
        prop: 'modelValue',
        isEqual: false,
    },
) => {
    const usingProp = config?.prop ?? 'modelValue';
    const currentValue = ref(props[usingProp]);
    const updateCurrentValue = (value) => {
        if (
            value === currentValue.value
            || (config.isEqual && isEqual(value, currentValue.value))
        ) { return; }
        currentValue.value = value;
    };
    watch(currentValue, () => {
        emit(`update:${usingProp}`, currentValue.value);
    });
    watch(
        () => props[usingProp],
        (val) => {
            updateCurrentValue(val);
        },
    );
    return [currentValue, updateCurrentValue];
};

// 使用的时候
import useModel from '.../xxx'

// setup 中
const [currentPage, updateCurrentPage] = useModel(props, emit, {
    prop: 'currentPage',
});

可以看到，我们可以清晰的看到 currentPage, updateCurrentPage 的来源。复用起来很简单快捷，pager、simpler 等页面的 v-model 都可以用上 这个 hook

computed、watch

感觉和 Vue2 中用法类似，不同点在于 Vue3 中使用的时候需要引入。 举例 watch 用法由于 currentPage 改变时候需要触发 change 事件，所以需要使用到 watch 功能

import { watch } from 'vue';

// setup 中
const [currentPage, updateCurrentPage] = useModel(props, emit, {
    prop: 'currentPage',
});
watch(currentPage, () => {
    emit('change', currentPage.value);
})

更多编程相关知识，请访问：编程入门！！

以上是淺析怎麼使用Vue3開發一個Pagination公共元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！