0六、Vue.js---watch 属性（观察者）

时间 2019-11-18

标签 vue.js vue watch 属性观察者栏目 JavaScript 繁體版

原文原文链接

一、介绍

官网：Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更：侦听属性。虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。javascript

二、使用

2.1 简单使用

watch 属性（观察者）完成 Vue 对属性值修改时的监听。用于在完成页面和数据交互以前，对新数据进行判断和预处理。关键字：watch。具体使用以下：html

html部分代码：java

<body>
  <div id="app">
    <input type="text" v-model="msg">
  </div>
</body>

js部分代码：app

<script>
  window.onload = function (){
    new Vue({
      el:"#app",
      data:{
        msg:"watch 观察者"
      },
      watch:{
        //使用观察者监听 msg 变量
        msg:function(newValue,oldValue){
          console.log("新数据："+newValue+";旧数据："+oldValue);
        }
      }
    });
  }
</script>

效果演示：异步

watch是一个对象，key值是须要监听的属性变量，value值是函数。watch 中的function 有两个参数，一个是 newValue(变化后的新数据)，一个是oldValue(变化前的新数据)。函数

2.2 分层监视

关键字：handler 数据变化时所调用的方法，deep 监视模式。spa

默认状况下只监听指定的属性是否发生变换（单层）。请看下段代码：双向绑定

html 部分代码：code

<body>
  <div id="app">
    <input type="text" v-model="user.name">
    <hr/>
    <input type="text" v-model="userDeep.name">
  </div>
</body>

js 部分代码：htm

window.onload = function (){
  new Vue({
    el:"#app",
    data:{
      user:{
        name:"Alice",
        age:18
      },
      userDeep:{
        name:"Tome",
        age:19
      }
    },
    watch:{
      // 普通监听
      user:function(newValue,oldValue){
        console.log("调用普通监听")
      },
      // 分层监听
      userDeep:{
        handler:function(newValue,oldValue){
          console.log("调用了分层监听");
        },
        deep:true
      }
    }
  });
}

在该代码中，data 中有两个对象变量 user 和 userDeep。在页面中第一个 input 框使用 v-model 双向绑定 user.name，第二个 input 框使用 v-model 双向绑定 userDeep.name。这里对 user 采起普通监听，对 userDeep 采用分层监听。当改变第一个input框中数据（user.name），未执行监听函数打印“调用普通监听”；当改变第二个input框中数据（userDeep.name），执行监听函数并打印“调用分层监听”。以下图：

由于使用普通监听，只能监听当层变量变化。使用分层监听，能够监听当层及下层变量的变化。