Vue计算属性和监听属性

计算属性 computed

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化

当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）每个计算属性都包含两个set、get 属性

监听属性 watch

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化

watch:类似于监听机制+事件机制。

在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

<template>
    <div>
        <input v-model="fristName" /> <br>
        <input v-model="lastName" />
        <div>计算属性修改值：{{cfullName}}</div>
        <div>监听属性修改值：{{wfullName}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                fristName: '',
                lastName: '',
                wfullName: ''
            }
        }
        computed: {
            // 完整写法
            cfullName：{
                // 1.有人读取fullName时调用
                // 2.初始化是后调用,依赖数据变化调用
                get() {
                    return this.fristName + '-' + this.lastName
                }
                // 当fullName被修改时候调用
                set(newVal) {
                    let arr = newVal.split('-')
                    this.fristName = arr[0]
                    this.lastName = arr[1]
                }
            }
            // 简写方式（只用到get，不需要set）
            fullName() {
                return this.fristName + '-' + this.lastName
            }
        }
        watch: {
            // 完整写法
            fristName:{
                // 是否初次加载就监听，默认false
                immediate: true,
                // 是否深度监听，默认false，列入监听的是一个对象，里面的数据要监听，就要deep
                deep: true,
                handler(newVal,oldVal){
                    this.wfullName = oldVal + '-->' + newVal
                }
            }
            // 简写
            fristName(newVal,oldVal){
                this.wfullName = oldVal + '-->' + newVal
            }
        }
    }
    
    // watch还有一种写法
    // 完整写法
    vm.$watch('fristName',{
        // 是否初次加载就监听，默认false
        immediate: true,
        // 是否深度监听，默认false，列入监听的是一个对象，里面的数据要监听，就要deep
        deep: true,
        handler(newVal,oldVal){
            this.wfullName = oldVal + '-->' + newVal
        }
    })
    // 简写
    vm.$watch('fristName', function(newVal,oldVal){
        this.wfullName = oldVal + '-->' + newVal
    })
</script>

methods computed watch三者区别

1. methods不存在缓存，执行一次运行一次，执行n次，运行n次
2. computed有缓存，调用多次只会执行一次，不能执行异步任务
3. watch能执行异步任务，computed能完成的，watch能完成，watch能完成的，computed不一定能完成