Vue中watch监听属性新旧值相同问题解决方案

合集 - 前端(9)

1.CSS、JS、jQuery中选择器总结2023-05-122.JS中得到自定义属性值2023-05-123.为选中的按钮添加特定属性2023-05-134.Tab栏切换2023-05-135.event 和 this 的区别2023-05-146.下拉菜单的实现2023-05-147.mouse事件2023-05-14

8.Vue中watch监听属性新旧值相同问题解决方案2023-12-01

9.export、exports以及export default 的导入导出2023-12-05

收起

问题：Vue中watch监听属性新旧值相同。

<script  setup>
import {ref,watch} from 'vue'
const person = ref({
  name:'张三',
  age:100
})


const chanegPerson = () => {
  person.value.name = '李四'
  person.value.age++
}

watch(person,(newValue,oldValue)=>{
  console.log(newValue,oldValue);
},{deep:true})

</script>

<template>
<div>{{name}}</div>
<button @click="changeName">改名</button>

<div>{{ num }}</div>
<button @click="changeNum">改数</button>
  <!-- <button @click="count++">+1</button> -->

<div>{{ person }}</div>
<button @click="chanegPerson">改名</button>
</template>

输出：

 原因：监听复杂数据类型,当复杂数据类型被改变之后,newval的值改变,由于newval和oldval都指向同一个对象,导致oldval也会随之改变,则没有了old和new之分.

解决方法：在初始化的时候,深克隆一个旧值.。JSON.parse(JSON.stringify(oldvalue)）

watch(()=> JSON.parse(JSON.stringify(person)),(newValue,oldValue)=>{
  console.log(newValue,oldValue);
},{deep:true})

输出：