vue监听属性

た入场券 2021-10-20 01:24 332阅读 0赞

#  监听属性 #

本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

以下实例通过使用 watch 实现计数器：

<div id = "app">
     <p style = "font-size:25px;">计数器: {
       { counter }}</p>
     <button @click = "counter++" style = "font-size:25px;">点我</button>
    </div>
    <script type = "text/javascript">
     var vm = new Vue({
        el: '#app',
        data: {
           counter: 1
        },
    	 watch : {
                   counter:function(val) {
                      alert(val);
                   }
                }
     });
     
    </script>

以下实例进行**千米**与**米**之间的换算：

<div id = "computed_props">
             千米 : <input type = "text" v-model = "kilometers">
             米 : <input type = "text" v-model = "meters">
          </div>
    	   <p id="info"></p>
          <script type = "text/javascript">
             var vm = new Vue({
                el: '#computed_props',
                data: {
                   kilometers : 0,
                   meters:0
                },
                methods: {
                },
                computed :{
                },
                watch : {
                   kilometers:function(val) {
                      this.kilometers = val;
                      this.meters = this.kilometers * 1000
                   },
                   meters : function (val) {
                      this.kilometers = val/ 1000;
                      this.meters = val;
                   }
                }
             });
       
          </script>

### immediate和handler ###

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

<div id = "app">
    	<p>FullName: {
       {fullName}}</p>
          <p>FirstName: <input type="text" v-model="firstName"></p>
    </div>
    <script type = "text/javascript">
     var vm = new Vue({
        el: '#app',
        data: {
    		firstName: 'Dawei',
            lastName: 'Lou',
            fullName: ''
        },
          watch: {
        firstName: {
          handler(newName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
        immediate: true
        }
      } 
     });

**deep属性（深度监听，常用语对象下面属性的改变）**

<div>
          <p>obj.a: {
       {obj.a}}</p>
          <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
     
    new Vue({
      el: '#root',
      data: {
        obj: {
          a: 123
        }
      },
      watch: {
        obj: {
          handler(newName, oldName) {
             console.log('obj.a changed');
          },
          immediate: true
        }
      } 
    })

我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {
      this.obj = {
        a: '456'
      }
    }

那么我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了:

watch: {
      obj: {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        deep: true
      }
    }

这样的方法对性能影响很大，修改obj里面任何一个属性都会触发这个监听器里的 handler。我们可以做如下处理：

watch: {
      'obj.a': {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        // deep: true
      }
    }

watch的注销这里就不在多说了，实际开发中，watch会随着组件一并销毁。