vue之methods、computed、watcher

1. computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。
2. computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的。

<div id="app">
    <div>第一次调用computed属性: {{ reversedMsg }}</div>
    <div>第二次调用computed属性: {{ reversedMsg }}</div>
    <div>第三次调用computed属性: {{ reversedMsg }}</div>
    <!-- 下面是methods调用 -->
    <div>第一次调用methods方法: {{ reversedMsg1() }}</div>
    <div>第二次调用methods方法: {{ reversedMsg1() }}</div>
    <div>第三次调用methods方法: {{ reversedMsg1() }}</div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      computed: {
        reversedMsg() {
          console.log(1111);
          // this 指向 vm 实例
          return this.msg.split('').reverse().join('')
        }
      },
      methods: {
        reversedMsg1() {
          console.log(2222);
          // this 指向 vm 实例
          return this.msg.split('').reverse().join('')
        }
      }
    });
    console.log(vm);
  </script>

watch属性
watch初始化默认不执行，那么我们现在想要第一次初始化页面的时候也希望它能够执行 ‘某个属性’ 进行监听, 最后能把结果返回给 ‘basicMsg’ 值来。因此我们需要修改下我们的 watch的方法，需要引入handler方法和immediate属性,

<div id="app">
    <p>空智个人信息情况: {{ basicMsg }}</p>
    <p>空智今年的年龄: <input type="text" v-model="age" /></p>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        basicMsg: '',
        age: 31,
        single: '单身'
      },
      watch: {
        age: {
          handler(newVal, oldVal) {
            this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
          },
          immediate: true
        }
      }
    });
  </script>

设置了 immediate:true的话,第一次页面加载的时候也会执行该handler函数的。即第一次 basicMsg 有值；

watch深层监听：

<script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          basicMsg: '',
          age: 31,
          single: '单身'
        }
      },
      watch: {
        'obj': {
          handler(newVal, oldVal) {
            this.basicMsg = '今年' + newVal.age + '岁' + ' ' + this.obj.single;
          },
          immediate: true,
          deep: true // 需要添加deep为true 即可对obj进行深度监听
        }
      }
    });
  </script>

设置deep:true;vue就会为对象每层都添加监听器；这样做显然会消耗性能；我们可以直接监听obj.age;

1.受JS的限制, Vue不能检测到对象属性的添加或删除的。它只能监听到obj这个对象的变化,比如说对obj赋值操作
  会被监听到。
mounted(){
	this.obj = {
		 basicMsg: '2',
         age: 3,
         single: '单'
	}
}

watch 和 computed的区别是：

相同点：他们两者都是观察页面数据变化的。

不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。