1.简单介绍
在vue中,使用watch来监听数据的变化。在改变的时候会有一个初始值,对初始值进行改变的时候,会把初始值记录下来,但同时也更新当前值。
举一个简单的例子(米与厘米的单位换算,在按下enter键的时候,alert我们换算的值)
<body>
<div id="app">
米:<input type="text" v-model="mi" @keyup.enter="btn">=
厘米:<span>{{limi}}</span>
</div>
</body>
<script>
let myapp = new Vue({
el:"#app",
data:{
mi:"",
limi:""
},
methods:{
btn:function(){
this.limi = this.mi*100;
}
}
})
// watch 监听数据.因为在按下enter键的时候才使用监听,所以我们对换算后的厘米进行监听
myapp.$watch('limi',function(){
alert(myapp.mi+'米'+'='+myapp.limi+'厘米')
})
</script>
2.handler方法和immediate属性
使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
<div id="root">
<input type="" name="" id="" value="" v-model="cityName"/>
</div>
var myapp =new Vue({
el: '#root',
data: {
cityName: '成都'
},
watch: {
cityName: {
handler(newName, oldName) {
alert(newName)
},
immediate: true
}
}
})