vue中的计算属性和侦听器

计算属性(computed)

使用场景：一个数据, 依赖另外一些数据 “计算” 而来的结果

计算属性也属于变量，因此不可以和data内定义的变量重名

语法：

• 1. 不完整写法：

computed:{
    "计算属性名"(){
        return "值"
    }
}

• 2. 完整写法：「计算属性也属于变量，当需要给计算属性赋值时，使用完整写法」

  • set() 方法：有人给计算属性 "赋值" 的时候，会自动触发此函数
  • get() 方法：有人要 "使用" 计算属性变量值的时候会自动触发此函数，将值通过return返回

computed:{
    "计算属性名":{
        set(值){
        //set里接收的值，是计算属性改变后的值
        }
        get(){
            return '值'
        }
    }
}

计算属性的特点

1. 计算属性内使用的变量改变, 重新计算结果返回
2. 计算属性的缓存
   • 计算属性有"缓存"，第一次计算的到结果后会放入内存当中。在第二次使用时（值未发生变化），则直接取值使用 （不会调用函数）
   • 当计算属性内使用的变量值发生改变的时候，会重新计算一次并缓存

计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

<template>
    <div>
        <div>{{num}}</div>
        <div>{{num}}</div>
        <div>{{num}}</div>
    <div>
</template>

<script>
    export default {
        computed:{
            num(){
                   console.log('计算属性')//只打印一次
                   return 123
            }
        }
    }
</script>

侦听器(watch)

作用：侦听data/computed属性值改变 语法：

• 侦听普通属性：
  • newVal：接收被监听的属性改变之后的值
  • oldVal：接收被监听的属性改变之前的值

"要被侦听的属性"(newVal,oldVal){
    //代码段
    //变量名对应值改变这里自动触发
}

• 侦听复杂属性：
  • 使用场景：变量存的是对象在堆内存中的地址，双向绑定修改，改的是对象里属性的值，但是对象本身并未发生变化，只有使用深度监听才可以监听到对象内部的变化。

"要被侦听的属性":{
    deep:true, //开启深度侦听，深度侦听复杂类型内变化
    handler (newVal, oldVal) {
          //代码段
          //变量名对应值改变这里自动触发    
    }
}