vue3中watch和nextTick的区别和使用

最近在写项目的时候遇到一个问题

在父组件中调API取后端的数据,然后将这些数据父传子放到我封装好的el-pagination中,自定义total等分页属性,如下图

项目目录

封装好的子组件

<template>
    <div class="box">
        <!-- <client-only> -->
            <el-config-provider :locale="zhCn">
                <el-pagination background layout="total, prev, pager, next" :total="paginationConfig.paginationTotal"
                    :page-size="6" v-model:current-page="paginationIndex" @current-change="handleCurrentChange" />
            </el-config-provider>
        <!-- </client-only> -->
    </div>
</template>

<script setup lang="ts">
import zhCn from "element-plus/es/locale/lang/zh-cn"

const paginationIndex = defineModel<number>()
const paginationConfig = defineProps({
    paginationTotal: {
        type: Number,
        default: 1
    },
    paginationText: {
        type: String,
        default: '课程'
    }
})

// 点击下标修改paginationIndex值
const handleCurrentChange = (val: number) => {
    paginationIndex.value = val
}

watch(paginationConfig, (newValue, oldValue) => {
    zhCn.el.pagination = {
        goto: '跳转至',
        pagesize: '每页',
        total: `共${paginationConfig.paginationTotal}${paginationConfig.paginationText}`,
        pageClassifier: '页',
        page: '页',
        prev: '上一页',
        next: '下一页',
        currentPage: '当前页',
        prevPages: '前页',
        nextPages: '后页',
        deprecationWarning: '警告：该组件已被弃用，请使用新的分页组件。'
    }
})
</script>

父组件

#ps这上面是完整代码,不是错误代码

这个报错是因为在服务端渲染和客户端渲染的不一致导致的问题,需要使用<Client-Only></Client-Only>来确保只在客户端渲染

原本的代码是放在onMounted中,让dom跟新完成之后在做渲染操作,数据是有的,而且做了分页的操作

但是后端给我传了8个课程回来，这里的dom渲染就失败了,走的是我父传子给的默认值,这时我想到能不能使用nextTick来做,因为他可以用于在DOM更新后立即执行回调函数。它主要用于确保在修改数据后，DOM已经更新完毕，然后再执行一些依赖于DOM的操作，但是依然不起作用,

这时我想到生命周期的执行顺序

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 。

当走到子组件的onMounted的时候,这时就会触发nextTick,但是我在父组件中的onMounted中调用的API，这个时候,父组件才开始取数据,但是子组件已经将dom渲染好了,并且执行了onMounted和nextTick，这时没有父传子的数据,所以el-pagination中才会使用我默认的数据,这时,nextTike就显得有点笨重了,这时可以使用watch来监听传值的变化,因为给了默认值,所以paginationConfig默认值是'1'和'课程',当有新的值传来的时候，就会发生改变,这时,在渲染dom即可完成需求!!!

总结：

• nextTick用于在DOM更新后立即执行回调函数，而watch用于监听数据变化并执行回调函数。
• nextTick主要用于确保DOM更新后再执行某些操作，而watch用于响应数据变化并执行相应的逻辑。