一、computed

computed是计算属性的意思, 根据一个属性计算出一个值(这个值我们在调用的时候不需要加括号)，它会根据你所依赖的数据动态显示新的计算结果。

计算结果会被缓存， 如果数据没有发生改变则使用缓存，不会重新加载。

示例代码：

<template>
  <div class="hello">
      {{fullName}}
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
}
</script>

二、watch

watch 是用来监听数据的。主要用法是当某个数据变化后，做一些操作。

当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的 data 数据），一个oldVal（原来的 data数据）

watch有两个属性：deep 和 immediate

deep就是要监听对象里面的嵌套属性

immediate就是第一次渲染时是否执行watch的函数

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

《computed和watch》

一、computed

二、watch