vue2.xWatch和vue3.xWatch使用和区别
? 大家都知道在vue中，我们经常会用到监听数据一个数据，当数据发生变化的话执行某个功能，实现的方法有很多，现在的话重点说一下vuex2.x中属于配置项的watch，vue3.x组合式Apiwatch函数。
vue2.x中的watch
? 基本的使用：
? 我们创建一个Demo组件，定义一个count数据，当点击的时候让count加1，并且监听watch的变化，并执行打印。
但是这个普通的监听当时存在问题：当数据是深层嵌套的话无法监听到数据的改变，所以无法执行回调
<template>
<div>
<h2>{{ count }}</h2>
<button @click="count++">+</button>
</div>
</template>
<script>
export default {
name: "Demo",
data() {
return {
count: 0
}
},
watch: {
//count接收一个回调函数，当数据变化时会执行该函数，接收两个参数：
// 第一个参数是：最新的值
// 第二个参数是：上一次的值
count: function(newValue, oldValue) {
console.log(newValue, oldValue) // 0, 1
}
}
};
</script>
<template>
<div>
<h2>{{ data.count }}</h2>
<button @click="data.count++">+</button>
</div>
</template>
<script>
export default {
name: "Demo",
data() {
return {
data: {
count: 0
}
}
},
watch: {
data: {
handler(newValue,oldValue) {
console.log(newValue, oldValue) // 1, 0
},
deep: true, // 添加这个属性，当data里面深层嵌套的数据发生变化时也可以执行回调
immediate: true // 添加这个属性，当界面初始化时会先执行一次
}
}
};
</script>
vue3.0中的watch
? 在vue3.0中新加了composituon(组合)api，watch不在时一个配置项，而是作为函数的调用出现，当然在vue3.0中也可以使用vue2.x中watch配置项监听ref or reactive 定义的数据，但是在使用vue3.0的时候不建议混合使用。
<template>
<div>
<h2>{{ data }}</h2>
<button @click="data++">+</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Demo",
setup() {
let data = ref(0);
return {
data,
};
},
watch: {
// 通过vue2.x的方式监听ref定义的数据
data(newValue, oldValue) {
console.log(newValue, oldValue) // 1, 0
}
}
};
</script>
使用vue3中的组合式api监听数据的变化
<template>
<div>
<h2>{{ data }}</h2>
<button @click="data++">+</button>
</div>
</template>
<script>
import { ref, watch} from "vue"; // 导入watch
export default {
name: "Demo",
setup() {
let data = ref(0)
let msg = ref('test');
const person = reactive({
name: 'zhangsan',
age: 23,
job: {
j1: {
aslary: 20
}
}
})
watch 是一个函数的调用，第一个参数是要监听的属性，第二个参数是回调，当监听的属性改变时调用
情况一：监听ref定义的一个响应式数据
watch(data, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
情况二：监听ref定义的多个响应式数据
监听多个有ref定义的响应式数据，采用数组形式
watch([data, msg], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
情况三： 监听reactive定义的响应式数据
当person对象中的任何一个属性发生变化的时候，都会执行回调
默认开启深度监听，且通过配置deep：false，无法关闭
并且无法获取正确的oldValue（上一次的值）
watch(person, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
情况三：监听reactive定义的响应式数据的某个属性
通过函数返回值的形式
wacth(() => reactive.age, () => {
console.log(newValue, oldValue)
})
情况四：监听reactive所定义的响应式数据的某个属性
watch(() => person.age, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
情况五：监听reactive所定义的响应式数据的多个属性属性
watch([() => person.name,() => person.age], (newValue, oldValue) {
console.log(newValue, oldValue)
})
特殊情况： 当监听的数据是reactive定义的对像数据里面的对象时需要开启深度监听
当前例子中监听了j1，当 j1对象中定义属性发生变化时无法检测到，因为j1的内存地址并未改变
所以需要开启深度监听
此处也无法正确的获取oldValue
watch(() => person.job.j1, (newValue, oldValue) => {
console.log(newValue, oldValue)
}, {deep: true})
return {
data
}
}
};
</script>
总结：
当使用vue2中的watch配置项监听浅层数据的时候通过默认的监视方，当需要监听的数据是嵌套的数据时，通过配置watch的配置项进行监听。
当使用vue3的组合式api监听数据的变化时，分为ref定义的响应式数据和reactive定义的数据，ref定义的数据监听还是比较简单的，reactive监听数据的时候分为几种情况：
? 1.当监听的为reactive定义的整个对象时，默认开启深度监听，无法通过deep关闭深度监听，并且无法正确获取oldValue(上一次的值)。
? 2.当监听reactive定义的对象中的某个属性时又分为：
? 普通类型：通过函数返回值的形式监听， 可以正确获取oldValue
? 复杂数据类型（对象or数组): 通过返回值的形式监听，并且需要开启深度监听，无法获取正确的oldValue
以上是个人对Vue中watch的使用学习时的笔记，若存在错误欢迎指正
|