watch监听单个(数据)，computed监听多个(数据)

侦听器:vue通过watch来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
watch 监听数据—1、一般类型的数据：数值number，字符串string
2、复杂类型的数据：对象object
newVal 新数据
oldVal 旧数据

<div id="app">
  <p>{{num}}</p>
  <p><button @click="num+=1">+</button></p>
  <p><input type="text" name="" id="" v-model="msg.text"></p>
  <p>{{msg.text}}</p>
</div>

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    num: 1,
    msg: {
      text: '你好李焕英'
    },
  },
  // 计算属性:对于任何复杂逻辑，你都应当使用计算属性。
  computed: {},
  // 侦听器:vue通过watch来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
  // watch 监听数据---1、一般类型的数据：数值number，字符串string
  // 2、复杂类型的数据：对象object
  // newVal 新数据
  // oldVal 旧数据
  watch: {
    // 方法1：
    'num': function (newVal, oldVal) {
      console.log('新数据是：' + newVal + '旧数据是：' + oldVal);
    },
    // 方法2：
    num: function (newVal, oldVal) {
      console.log('新数据是：' + newVal + '旧数据是：' + oldVal);
    },
    // 方法3：
    num(newVal, oldVal) {
      console.log('新数据是：' + newVal + '旧数据是：' + oldVal);
    },
    // 方法4：
    num: {
      handler(newVal, oldVal) {
        console.log('新：' + newVal + '旧：' + oldVal);
      }
    },
    msg: {
      handler(newVal) {
        console.log('新数据是：' + newVal);
      }, // 深度监听 deep:true } } })
    }
  }
})

代码演示：