04. 计算属性、侦听器

计算属性

对于模板里面的逻辑越来越复杂时，应当使用计算属性
适用于一个值依赖多个值的计算或者格式化数据的场景
里面不能有异步操作
计算属性会进行缓存，如果多次使用，计算属性只会调用一次。所以计算属性比 methods 性能更好

<p>进价{{ price1 }}日元，卖价{{ price2 }}日元（约合人民币{{ priceRMB1 }}元）。</p>
 
data: {
  price1: 50,
},
computed: {
  price2: function() {
    return this.price1 + 50;
  },
  priceRMB1: function() {
    return this.price2 / 15.296;
  }
}

完全写法

计算属性完全的写法是下面这种，但一般不写 set 方法，让它只读：

computed: {
  price2: {
    // set方法：当price2的值发生改变时调用，并传入新改变的值
    set: function(newValue) {},
    // get方法：当只有get方法时，get可以省略
    get: function() {}
  }
}

计算属性传参

计算属性也可以传参：返回函数

如何在 Vue 的计算属性中传递参数在 Vue 中，计算属性（computed ）是从其他响应式属性派生的属性，是用于自 - 掘金

Warning

计算属性中应该仅包含用于返回值的计算，不应该包含 DOM 操作，修改其他变量值，异步操作等，这些应该放在监听器里
javascript - Handling unexpected side effect in computed properties - VueJS - Stack Overflow

侦听器

在数据变化时执行异步或开销较大的操作 适用于一个数据同时触发多个事物 watch 侦听的 key 不需要加 this

<p>进价{{ price3 }}日元，卖价{{ price4 }}日元（约合人民币{{ priceRMB2 }}元）。</p>
<button @click = "addPrice(100)">加价100</button>
 
data: {
  price3: 0,
  price4: 0,
  priceRMB2: 0,
},
watch: {
  price3: function(newv, oldv) {
    console.log(newv, oldv);
    this.price4 = this.price3 * 2;
    this.priceRMB2 = this.price4 / 15.296;
  }
},
methods: {
  addPrice: function (value) {
    this.price3 += 100;
  },
}

选项：deep

监听对象内部值的变化时需要使用 deep: true，但是监听数组不需要，但是如果数组中的值是对象也需要

选项：immediate

watch 有一个特点，就是当组件第一次初始化监听的时候，不会执行监听函数
如果当父组件向子组件动态传值时，子组件 props 首次获取到父组件传来的默认值时，也需要执行函数，可以使用 immediate: true

实例方法

this.$watch()，可以监听一个表达式或者一个函数计算结果的变化：

 
let unwatch = this.$watch(
  function () {
    // this.a 或 this.b 发生变化时处理函数都会被调用
    // 这就像监听一个未被定义的计算属性
    return [this.a, this.b]
  },
  function (newVal, oldVal) {
    // 做点什么
    
    unwatch() // 调用取消侦听的函数
  }
)

注意：watch 有先后执行顺序，写在前面的会先执行，如果前面的 watch 中改变了某个后面监听的值，则不会触发监听