computed和watch有什么区别？一般在什么地方使用

最新推荐文章于 2024-10-17 08:45:43 发布

老路的武器库

最新推荐文章于 2024-10-17 08:45:43 发布

阅读量326

点赞数

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/Lzen6719/article/details/128973080

版权

compute 是 vue 的计算属性，是根据相关依赖关系进行缓存计算的，只有在他的相关依赖的数据发生改变的时候才会进行更新

watch 侦听器允许开发者监视数据的变化，是vue提供的一种用来观察响应式数据上变化的属性，属性发生变化，便会触发相应的监听函数

区别：compute 支持缓存，只有相关依赖发生改变的时候才会重新进行计算，而watch不支持缓存，数据改变的时候，直接触发相应的操作

compute 不支持异步，当compute内有异步操作时无效，无法监听数据的变化，而watch支持异步

使用场景：compute：一个数据受多个数据影响的时候

watch：一个数据影响多个数据的时候

  <!-- 编辑弹窗 -->
    <el-dialog v-model="store.state.perssion.dialogVisible" title="编辑信息">
        <el-form :model="store.state.perssion.editForm">
            <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="store.state.perssion.editForm.id" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="用户" :label-width="formLabelWidth">
                <el-input v-model="store.state.perssion.editForm.username" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="权限" :label-width="formLabelWidth">
                <el-checkbox-group v-model="checkbox" size="small">
                    <el-checkbox label="成员变更" size="large" border :key="Math.random()" />
                    <el-checkbox label="用户权限管理" size="large" border :key="Math.random()" />
                    <el-checkbox label="住户信息修改" size="large" border :key="Math.random()" />
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handlecancel">取消</el-button>
                <el-button type="primary" @click="handelsubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>

watch监听编辑框信息

//监听编辑框显示状态
watch(
    () => store.state.perssion.dialogVisible,
    () => {
        checkbox.value = store.state.perssion.editForm.power[0] == '所有权限' ? ["成员变更", "用户权限管理", "住户信息修改"] : store.state.perssion.editForm.power
    }
)