Vue—watch的简单用法

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
　　　　} 
　　}
})

Vue—watch的简单用法

1.简单介绍

2.handler方法和immediate属性

猜你喜欢