1.计算属性

• computed有缓存
• 简单写法

    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

• 复杂写法

computed: {
    "属性名": {
        set(val){   
        },
        get() {
            return "值"
        }
    }
}

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

• 属性名称： 计算属性的名称
• 属性的值：计算属性的素材函数

• • 对需要依赖的数据，进行逻辑上的处理
  • 处理完毕后，需要return出去，返回的值就是计算属性的值

  总结

• 什么时间用：需要对数据进行复杂的逻辑加工，产生新的数据时。

• 定义： 就是一个特殊的配置项computed。其中有多个函数。

• 使用：计算属性的使用方式与data中的数据项一致；

• • 计算属性-计算：这个值是对原数据进行计算之后得到的新的数据
  • 计算属性-属性：它的使用方法与原数据一样。this.计算属性名,{{计算属性名}}

• 执行的时机： 如果计算属性中依赖的数据项变化时，它会自动调用。

2.监听器

• 可以监听data/computed等属性值改变
• 基本使用

 watch: {
     "被监听的属性名" (newVal, oldVal){   
     }
 }

• 深度监听和立即执行

watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {    
        }
    }
}