vue中watch的使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

vue中的watch是一个比较重要的概念，通过他我们可以检测data的变化，下面进行详细的介绍。

watch定义方式如下：

{[key: string]: string | Function | Object }

即在watch中，

键是一个字符串，它是被观测的对象。
值可以是一个字符串，这个字符串是方法名。
值还可以是一个函数，但不能使用箭头函数的形式，this会出现问题。
值也可以是一个对象，其中包含回调函数可以其他一些选项：比如是否深度遍历。

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
</head>
<body>
<script>
var vm = new Vue({
data: {
a: ,
b: ,
c: {
name: "JohnZhu"
}
},
watch: {
a: function (val, oldVal) {
console.log('new a: %s, old a: %s', val, oldVal)
},
// 方法名
b: 'someMethod', // 深度 watcher，检测到变化，并打印出c.name变化前后的结果
// 'c.name': {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: true
// }, // 报错必须用c.name，否则在data下不能直接找到name
// name: function () {
// console.log('new c: %s, old c: %s', val, oldVal);
// } // 报错，键值必须是一个字符串，所以用引号括起来
// c.name: {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: true
// } // 这里未检测到变化
// c : {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: false
// }, // 成功检测到变化
// c : {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: true
// }, // 检测不到变化，因为参数 deep 的默认值是false
// c : {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// },
},
methods: {
someMethod: function () {
alert("b is changed");
}
}
})
vm.a = ; // new: 2, old: 1
vm.b = ; // alert 666
vm.c.name = "HTT";
</script>
</body>
</html>

函数执行之后，分别在控制台中打印出new: 2, old:1 以及 alert 666。

可以看出， watch函数的参数中，第一个是改变之前的值，第二个是改变之后的值，这两个参数非常有用。
这里分别使用了三种定义函数（或option）的方法。
如果要观察data下一个对象的属性，我们可以使用 '对象.属性' 的方式，注意：一定要要引号。
如果改变了一个对象的属性，就必须使用 deep: true，否则检测不到变化。

举例：

这样的一个组件，当我想要同级输入的字数并希望在字数达到一定的数目时，给出提示，就可以watch字数，即v-model实现，当字数的length改变时，我们判断，然后给出相应的提示：

最后贴出完整的代码：

<template>
<div class="add-remark">
<div class="input">
<textarea maxlength="" placeholder="请输入备注，最多50个字哦" v-model="message"></textarea>
<span class="font-number" >{{message.length}}/</span>
</div>
<div class="hint-content" v-on:click="handleHint($event)">
<span class="hint">不吃辣</span>
<span class="hint">少放辣</span>
<span class="hint">多放辣</span>
<span class="hint">不吃蒜</span>
<span class="hint">不吃香菜</span>
<span class="hint">不吃葱</span>
</div>
<div class="btn" v-on:click="goback">完成</div>
</div>
</template><style scoped lang="less">
@main-color: #51B1B0;
@sub-color: #eeefef;
div.add-remark {
div.input {
position: relative;
padding: .2rem .5rem;
textarea {
box-sizing: border-box;
width: %;
height: 4rem;
font-size: .4rem;
padding: .3rem;
border: .0294rem solid @sub-color;
&:focus {
box-shadow: .0417rem @main-color;
}
}
span.font-number {
position: absolute;
font-size: .4rem;
color: #aaa;
bottom: .5rem;
right: .7rem;
}
}
div.hint-content {
padding: .2rem;
span.hint {
display: inline-block;
margin: .2rem .3rem .2rem .3rem;
padding: .25rem;
border: .02rem solid @sub-color;
border-radius: .1rem;
&:active {
background-color: @sub-color;
}
}
}
div.btn {
width: 9rem;
height: 1rem;
margin: .3rem auto;
line-height: 1rem;
text-align: center;
background-color: @main-color;
font-size: .45rem;
font-weight: bold;
color: white;
border-radius: .2rem;
}
}
</style><script>
export default {
data () {
return {
message: ""
}
},
watch: {
message: function (val, oldValue) {
if (val.length == ) {
this.$toast("备注最多输入50字哦");
}
}
},
methods: {
handleHint: function (e) {
if (e.target.nodeName.toLowerCase() == "span") {
this.message += (" " + e.target.innerHTML )
}
},
goback () {
this.$router.back();
}
}
}
</script>