Vue中的watch笔记
程序员文章站
2022-04-24 10:30:00
...
Watch的简单理解
引用官方解释就是：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 watch( expOrFn, callback, [options] )
参数：
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch
这些都是一些官方给我们的解释跟一些用法
现在我们来简单看一下代码怎么实现
简单的监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="num">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
num: ''
},
watch: {
num(newVal, oldVal) {
console.log('oldVal:',oldVal)
console.log('newVal:',newVal)
}
}
})
</script>
</html>
我们进行监听num属性的数据变化
只要num值发生改变那么num方法就会被触发
方法中第一个参数的值是新的值也就是更改变化后的值
第二个则是旧值，之前的值
当我在输入框中打印一个2
会出现旧值为空，新值为2
再输入框中再加一个3，则
会打印出旧值为2，新值为23
immediate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="num">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
num: 1
},
watch: {
num: {
// 立即处理 进入页面就触发
immediate: true,
// 数据发生变化就会调用这个函数
handler(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
}
}
}
})
</script>
</html>
immediate字面意思就是马上， immediate: true,就是页面加载立马执行
由于旧值是没有所以打印undefined
deep
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
<div id="app">
<input type="button" value="更改名字" @click="change">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
food: {
id: 1,
name: '冰激凌'
}
},
methods: {
change() {
this.food.name = '棒棒糖'
}
},
watch: {
// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
food: {
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true
},
// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
// 函数执行后，获取的 newVal 值和 oldVal 值不一样
'food.name'(newVal, oldVal) {
console.log('oldVal:', oldVal) // 冰激凌
console.log('newVal:', newVal) // 棒棒糖
}
}
})
</script>
</html>
刚开始打印
点击之后打印
这部分引用了一些别人的例子
想要了解更多点击vue.watch
下一篇： Java中的反射