1. 使用 keyup 事件监听文本内容的变化

• 假设我们想要实现一个效果就是两个文本框的内容拼接，并实时显示在第三个文本框中
• 这个需求很简单，我们可以用双向数据绑定，把两个文本框内的数据直接拼接在第三个文本框就可以实现了
• 其中我们可以使用键盘监听事件，只要一发生变化我们就触发我们写好的脚本把内容拼接上去
• 两个文本框甚至可以使用同一个函数来实现，下面我们将看到用这种方式实现的效果

let vm = new Vue({
  el: "#app",
  data: {
    fullName: "",
    firstName: "",
    lastName: ""
  },
  methods: {
    add: function() {
      this.fullName = this.firstName + "·" + this.lastName;
    }
  }
});

<div id="app">
  <input type="text" name="" id="" @keyup="add" v-model:value="firstName" />
  <input type="text" name="" id="" @keyup="add" v-model:value="lastName" />
  <input type="text" v-model:value="fullName" />
</div>

• 这样我们就实现了想要的效果，但是一想的话我们在两个地方触发了一样的函数两次，这样显然不符合我们日常编程中优化的效果
• 有没有更好的方式实现同样的效果呢，还真有，不过这个方式也有自己的缺陷，我们将会学到专门处理类似情形的方式
• 下面就给大家隆重介绍一下我们的 watch 属性，这也同样是 vue 实例身上带的一种属性

2. 使用 watch 属性监听数据的变化

• watch 属性跟 data、methods、components、filters、directives、router 一样是一个 vue 实例的基本属性，我们可以通过这个属性对我们在 data 里面定义的数据进行监视，并在数据发生变化的时候触发相应的处理函数
• 我们只需要在 watch 里面添加我们想要监视的数据名称即可，之后数据发生变化就会触发其后面定义的函数
• 这样的话我们就可以监听上面定义的两个数据，并且在后面加上自己的处理函数
• 也就是说我们对两个数据触发的函数是一模一样的，这样就是可以说明这个 watch 事件是不适合用在我们这个案例的
• 但是要知道 watch 属性有自己适合的场景，后期我们将会学到一般会用在哪儿
• 我们被监视的数据后面跟的函数有自己默认定义的两个值，第一个是 newVal，第二个为 oldVal 也就是说我们可以记录我们数据在变化之前的值跟在变化之后的值，这也方便处理我们后期的一些业务逻辑，说到这里还没有给大家呈现该怎么定义，所以我们可以看下面的例子，分别为实现之前的拼接效果跟后面的变化追踪效果

拼接效果演示

<div id="app">
  <input type="text" name="" id="" v-model:value="firstName" />
  <input type="text" name="" id="" v-model:value="lastName" />
  <input type="text" v-model:value="fullName" />
</div>

let vm = new Vue({
  el: "#app",
  data: {
    fullName: "",
    firstName: "",
    lastName: ""
  },
  methods: {},
  watch: {
    firstName: function() {
      this.fullName = this.firstName + "·" + this.lastName;
    },
    lastName: function() {
      this.fullName = this.firstName + "·" + this.lastName;
    }
  }
});

变量变化追踪

let vm = new Vue({
  el: "#app",
  data: {
    fullName: "",
    firstName: "",
    lastName: ""
  },
  methods: {},
  watch: {
    firstName: function(newVal, oldVal) {
      console.log(`新值为：${newVal}---------旧值为：${oldVal}`);
    },
    lastName: function(newVal, oldVal) {
      console.log(`新值为：${newVal}---------旧值为：${oldVal}`);
    }
  }
});

-那我们现在来看一下 watch 的真正用途

• 我们在实际开发中一般会用 watch 来监听我们的路由，通过这种方式可以实时了解用户的去向
• 要知道，到现在为止所有有关监视的方式都是去监视一些已经存在的东西，比如我们的实例身上的数据，我们在页面中使用的标签身上的东西，也就是说之前所有有关监视的方式都监视的是具象的内容，但是面对抽象的内容如我们的路由变化，还有一些组件的属性变化我们是无法通过属性绑定，或者双向数据绑定，或者方法绑定的方式实现不了的，但我们的 watch 就可以做到对一些抽象的内容进行监视，所以我们可以理解为 watch 的主要用途是用在监视一些抽象的内容的
• 下面我们就来看一下怎么通过 watch 属性来监视路由的变化
• 也就是监视一些非 DOM 元素的事件

let loginComp = {
  template: "#loginTemp"
};

let registComp = {
  template: "#registTemp"
};

// 创建一个路由规则对象
let router = new VueRouter({
  routes: [
    {
      path: "/login",
      component: loginComp
    },
    {
      path: "/regist",
      component: registComp
    }
  ]
});

let vm = new Vue({
  el: "#app",
  data: {},
  router: router,
  components: {
    loginComp,
    registComp
  },
  methods: {},
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (newVal === "/login") {
        console.log("欢迎进入登陆页面");
      } else if (newVal === "/regist") {
        console.log("欢迎进入注册页面");
      }
    }
  }
});

<div id="app">
  <router-link to="/login" tag="span">登陆</router-link>
  <router-link to="/regist" tag="span">注册</router-link>
  <router-view></router-view>
</div>

<template id="loginTemp">
  <div>
    这是登陆组件
  </div>
</template>

<template id="registTemp">
  <div>
    这是注册组件
  </div>
</template>

• 这样我们就实现了对路由的监视
• 要时刻警惕对包的引入顺序的规则，不然会各种出错
• 这样，我们就通过一个很方便的方式来对路由的变化实现了监听

3. 使用 computed 属性来实现拼接效果

• Vue 中存在另一个实例属性，那就是 computed 属性，专门用来处置出来的结果为其他内容的值计算出来的属性
• 之前的拼接案例我们使用这个属性来解决是最合理的
• computed 属性为计算属性，本质上是一种方法，只不过在使用这些方法的时候我们是将其名称作为属性来使用的，并不会把计算属性当作方法去调用
• 并且计算属性内部所用的数据发生变化会使计算属性重新求值，也就是说会重新进行处理
• 计算属性内部的求值结果会被缓存起来以便下次直接调用，也就是说我们在页面中多个地方同时使用了一个计算属性的话计算属性不会在每个地方都被触发一次，之后出现的地方会把第一次求到的结果作为属性的值直接进行赋值
• 我们在计算属性里面定义的属性不用再去 data 里面定义，在页面中也可以直接使用
• 并且计算属性对应的函数内部必须要是返回一个值的，也就是 return 一个值，这样才能满足我们的数值绑定
• 下面将给出经典用例

<div id="app">
  <input type="text" name="" id="" v-model="firstName" />
  <input type="text" name="" id="" v-model="lastName" />
  <input type="text" name="" id="" v-model="fullName" />
</div>

let vm = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: ""
  },
  router: router,
  components: {
    loginComp,
    registComp
  },
  methods: {},
  computed: {
    fullName: function() {
      return this.firstName + "·" + this.lastName;
    }
  }
});

• methods 多用于写业务逻辑，computed 多用于写一些数值的计算，watch 多用于一些抽象内容的操作