vue计算属性、侦听器、插槽

计算属性（computed）

计算结果并返回，只有当被计算的值发生改变时才会触发
(即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)
主要用于处理计算逻辑比较复杂的运算，计算属性默认只有getter方法，如果需要你也可以加一个setter方法

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

侦听器（watch）

监听某一个值，当被监听的值发生变化时，执行对应的操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function () {
      console.log("触发了函数")
    }
  },

插槽（slot）

插槽用在组件中，只要作用是用来分发内容
App.vue

image.png

HelloWorld.vue

image.png

image.png