Vue 计算属性、方法和侦听器总结

计算属性

用法

<div>姓名： {{ fullName }}， 年龄： {{ age }}</div>

// 组件中
data() {
    return {
      lastName: 'zhang',
      firstName: 'san',
	  age: 28
      }
    }
  },
  computed: {
    // 计算属性的 getter
    fullName() {
      // `this` 指向 vm 实例
      return this.lastName + this.firstName
    }
  }

• 有缓存机制，只有依赖项变化时才会重新计算（age 变化不会发生重新渲染）。

getter 和 setter

<div>姓名： {{ fullName }}</div>

// 组件中
data() {
    return {
      lastName: 'zhang',
      firstName: 'san',
      }
    }
  },
  computed: {
    fullName: {
       get: function() {
		  return this.lastName + this.firstName
		},
		set: function(val) {
		  console.log(val) // 页面上不会重新渲染
		},
    }
  }

方法

<div>姓名： {{ fullName() }}， 年龄： {{ age }}</div>

// 组件中
data() {
    return {
      lastName: 'zhang',
      firstName: 'san',
	  age: 28
      }
    }
  },
  methods: {
    fullName() {
      return this.lastName + this.firstName
    }
  }

• 无缓存机制，只要页面重新渲染方法就会被执行（即使非依赖 age变化，方法也会重新执行。

侦听器

<div>姓名： {{ fullName }}， 年龄： {{ age }}</div>

// 组件中
data() {
    return {
      lastName: 'zhang',
      firstName: 'san',
	  fullName: 'zhangsan'
	  age: 28
      }
    }
  },
  watch: {
    firstName: function() {
      this.fullName = this.lastName + this.firstName
    },
	lastName: function() {
      this.fullName = this.lastName + this.firstName
    }
  }

• 与计算属性类似有缓存值，但监听多个依赖项变化时，需要一一设置watch，所以计算属性语法更简洁。