input change获取改变之前的值和改变之后的值_Vue使用watch 监听新旧值一样?

最近写搜索功能时,为了代码简洁(偷懒),把搜索结果字段写在一个对象中,然后使用watch 深度监听,烦是对象发生改变了就调用后端接口后端最新的搜索结果。本身是没有问题的,但是之后发现凡是 input 框发生改变时,就会调用后端接口。如果用户打字速度过快的话,有可能出现用户之前搜索到的结果覆盖最新的结果(假设用户打了五个字,并且该用户打字速度挺快的,当用户打完5个字之后,并且拿到了返回的结果,但是请求后端是异步的,可能用户输入4个字,3个字返回的数据要在全部输入完之后,这样就会导致旧的结果覆盖新的结果)

watch深度监听使用方法

watch:{} 对象,可监听数据,数据发生变化, 处理函数。

watch监听对象,同时用**deep: true**深度监听,此时只有对象中的某个值发生改变就会触发。

watch: { obj: { // 数据变化时执行的逻辑代码 handler(newName, oldName) { console.log('obj.a changed'); }, // 开启深度监听 deep: true }}
9580fdc25f7340d1ac04dbd0e75a3a86

问题:监听到的新旧值相同。

我本想的想法是,如果监听到的新值和旧值的input框绑定值不同,说明此次数据发生改变是用户正在操作的输入框,则给其单独做处理,但是我发现,watch 深度监听的新旧值是完全一样的。

7079d8604372463fac43e1334924c851

最后在官方文档中找到了原因:注意:在变异(不是替换)对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

解决方法

新增一个计算属性,返回JSON格式,然后使用watch 监听 计算属性重新计算的结果。因为转为json格式之后,那么它的数据类型就会转为原始数据类型。

0c0d912740a34366be8f26cec2c4f6dc

结果:

5acfbdd643d34b83b8bf5e15ed26f932

这样的话,就可以完美解决watch监听到的新旧值一样的问题,只需要使用JSON.parse()再转换回去即可。

cd6b8d6080a64ae990de77802eb3b19d
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 ,子组件改变父组件的有两种常见的方式:通过事件和通过 v-model。 通过事件: 1. 在子组件使用 `$emit` 方法触发一个自定义事件,传递需要改变作为参数。 2. 在父组件,通过在子组件上监听该自定义事件,并在事件处理函数更新父组件的。 示例代码: // 子组件 <template> <button @click="changeValue">点击改变</button> </template> <script> export default { methods: { changeValue() { this.$emit('update:value', newValue); } } } </script> // 父组件 <template> <div> <p>{{ value }}</p> <ChildComponent @update:value="updateValue" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { value: '初始' }; }, methods: { updateValue(newValue) { this.value = newValue; } } } </script> 通过 v-model: 1. 在子组件使用 `v-model` 绑定一个,并在子组件内部改变这个。 2. 在父组件使用 `v-model` 绑定这个,并在父组件内部获取和更新这个。 示例代码: // 子组件 <template> <input v-model="internalValue" /> </template> <script> export default { model: { prop: 'value', event: 'input' }, props: { value: { type: String, required: true } }, data() { return { internalValue: this.value }; }, watch: { internalValue(newVal) { this.$emit('input', newVal); } } } </script> // 父组件 <template> <div> <p>{{ value }}</p> <ChildComponent v-model="value" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { value: '初始' }; } } </script> 这样,无论使用哪种方式,子组件改变父组件的都是通过事件的方式进行通信的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值