computer 计算属性

通过计算得出的属性就是计算属性

计算属性可以是一个函数或者是一个getter和setter组成的对象

看看一个展示名字的实例:

需求一:展示名字

// 引用完整版 Vue,方便讲解
import Vue from "vue/dist/vue.js";

new Vue({
  data: {
    firstName: 'Jacky',
    lastName: 'Lee'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName      
    }
  },
  template: `
    <div>
      {{fullName}}
    </div>
  `,
  methods: {}
}).$mount("#app");

fullName通过first.Name + lastName 计算得出,fullName使用时不需要加括号,可以直接作为属性使用,展示再页面中

需求二:可以改名字

// 引用完整版 Vue,方便讲解
import Vue from "vue/dist/vue.js";

new Vue({
  data: {
    firstName: 'Jacky',
    lastName: 'Lee'
  },
  computed: {
    fullName: {
      get(){
      return this.firstName + ' ' + this.lastName
      },
      set(val){
        const names = val.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  },
  template: `
    <div>
      <div>
      {{fullName}}
      <button @click="change">改名字</button>
      </div>
    </div>
  `,
  methods: {
    change() {
      this.fullName = "Candy Wang"
      console.log('名字已更改') // 重复点击‘改名字’只打印一次?
    }
  }
}).$mount("#app");

通过setter和getter使得计算属性可修改,点击‘改名字’时,计算结果发生变化,重新运行计算,进行页面更新。计算属性的结果会被缓存,计算属性只有在它的相关依赖发生改变时才会重新计算。所以再次点击‘改名字’由于计算结果不变,不会重新运行计算。

watch 监听/侦察

当数据变化时执行一个函数,watch属性可以是字符串、函数、对象、数组

拥有deep,immediate两个属性

watch的监听方式

请看下面的例子:

// 引用完整版 Vue,方便讲解
import Vue from "vue/dist/vue.js";

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() {
      console.log("obj 变了");
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

点击n+1 : 打印出“n 变了”

点击obj.a + ‘hi’ : 打印出“obj.a 变了”,不打印”obj 变了”

不点击obj.a + ‘hi’ , 点击obj = 新对象 : 打印出”obj 变了”,不打印”obj 变了”

说明watch的监听方式是:简单数据类型看值,复杂数据类型(对象)看地址

那我想通过监听obj也能obj.a变化可以吗?

答:可以,使用deep

deep属性

watch: {
    n() {
      console.log("n 变了")
    },
    obj() {
      console.log("obj 变了")
      deep: ture       // 可以监听到obj对象的所有内部属性
    },
    "obj.a": function() {
      console.log("obj.a 变了")
    }
  }

点击obj.a + ‘hi’ : 打印出“obj.a 变了”和 “obj 变了”

当deep:true 会监听到obj对象的所有内部属性,默认值为false

immediate属性

请看这个例子

// 引用完整版 Vue,方便讲解
import Vue from "vue/dist/vue.js";

new Vue({
  data: {
    firstName: 'Jacky',
    lastName: 'Lee',
    fullName: ''
  },
  watch: {
    firstName: {
      handler: 'change'
    }
  },
  template: `
    <div>
      {{fullName}}
      <button @click="firstName='John'">改名字</button>
    </div>
  `,
  methods: {
    change() {
      this.fullName =  this.firstName + ' ' + this.lastName      
    }
  }
}).$mount("#app");

通过fullName属性展示 firstName + lastName 的计算值,运行上面代码,页面啥也没有,然后点击“改名字”,页面显示 John Lee

为什么Jacky Lee怎么不显示?答:因为watch不会监听第一次变化

改造一下

watch: {
    firstName: {
      handler: 'change',
      immediate: ture
    }
}

初始页面展示 Jacky Lee

当 immediate:true 时,回调函数会在监听开始后立刻执行,可以监听到到第一次变化。

总结:

  • computed是用来计算一个值的,使用时不需要加括号,可以直接当属性使用。computed拥有依赖缓存特性,如果依赖值不变,computed不会重新计算
  • watch是用来监听的,有两个选项,immediate 和 deep,当immediate: true时,表示会在第一次运行是执行这个函数,当 deep:true时,如果监听一个对象,会同时监听其内部属性。watch没有依赖缓存特性。

参考链接

Vue 的 computed 和 watch 的区别