Vue学习—computed与watch

参考：https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

1.computed

1.1 定义

是一个计算属性,类似于过滤器,对绑定到view的数据进行处理

    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        },
        // 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
        fullName3: {
            get() {
                //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
                return this.firstName + ' ' + this.lastName
            },
            set(val) {
                //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
                //val就是fullName的最新属性值
                console.log(val)
                const names = val.split(' ')
                console.log(names)
                this.firstName = names[0]
                this.lastName = names[1]
            }
        },
    },

 

 

 2. watch

2.1 定义

watch是一个观察的动作

    watch: {
        // 1.监听简单数据类型
        firstName(nVal, oVal) {
            this.fullName2 = nVal + ' ' + this.lastName
        },
        // lastName(nVal, oVal) {
        //     this.fullName2 = this.firstName + ' ' + nVal
        // },

        // watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
        lastName: {
            handler(nVal, oVal) {
                this.fullName2 = this.firstName + ' ' + nVal
            },
            immediate: true
        },
        // 2.监听复杂数据类型
        // console.log打印的结果,发现oldVal和newVal值是一样的,所以深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化
        // oldVal和newVal值一样的原因是它们索引同一个对象/数组。Vue 不会保留修改之前值的副本
        data: {
            handler(nVal, oVal) {
                console.log(nVal.name + '<=' + oVal.name)
                this.firstName = nVal.name
            },
            deep: true
        },
        // 3.监听对象单个属性
        // 方法一：可以直接对用对象.属性的方法拿到属性
        'data.name'(nVal, oVal) {
            console.log(nVal + '<=' + oVal)
            this.lastName = nVal
        },
        // 方法二：watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值
        ageChange() {
            console.log('age属性值变化了')
        }
    }

 

3. computed和watch的区别

3.1 computed特性

1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

 

3.2 watch特性

1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行

完整代码：

<template>
    <div>
        computed的值：fullName: {{ fullName }}
        <div class="demo-item">
            <input v-model="firstName" />
        </div>
        <div class="demo-item">
            <input v-model="lastName" />
        </div>
        data.name的值：
        <div class="demo-item">
            <input v-model="data.name" />
        </div>
        data.age
        <div class="demo-item">
            <input v-model="data.age" />
        </div>
        fullName3的值:
        <div class="demo-item">
            <input v-model="fullName3" />
        </div>
        watch的值：fullName2: {{ fullName2 }}
    </div>
</template>

<script>
export default {
    name: 'Demo2Async',
    props: {
        asyncValue: {
            type: String
        }
    },
    data() {
        return {
            firstName: 'F',
            lastName: 'L',
            fullName2: '',
            data: {
                name: '',
                age: 1
            }
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        },
        // 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
        fullName3: {
            get() {
                //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
                return this.firstName + ' ' + this.lastName
            },
            set(val) {
                //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
                //val就是fullName的最新属性值
                console.log(val)
                const names = val.split(' ')
                console.log(names)
                this.firstName = names[0]
                this.lastName = names[1]
            }
        },

        ageChange() {
            return this.data.age
        }
    },
    watch: {
        // 1.监听简单数据类型
        firstName(nVal, oVal) {
            this.fullName2 = nVal + ' ' + this.lastName
        },
        // lastName(nVal, oVal) {
        //     this.fullName2 = this.firstName + ' ' + nVal
        // },

        // watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
        lastName: {
            handler(nVal, oVal) {
                this.fullName2 = this.firstName + ' ' + nVal
            },
            immediate: true
        },
        // 2.监听复杂数据类型
        // console.log打印的结果,发现oldVal和newVal值是一样的,所以深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化
        // oldVal和newVal值一样的原因是它们索引同一个对象/数组。Vue 不会保留修改之前值的副本
        data: {
            handler(nVal, oVal) {
                console.log(nVal.name + '<=' + oVal.name)
                this.firstName = nVal.name
            },
            deep: true
        },
        // 3.监听对象单个属性
        // 方法一：可以直接对用对象.属性的方法拿到属性
        'data.name'(nVal, oVal) {
            console.log(nVal + '<=' + oVal)
            this.lastName = nVal
        },
        // 方法二：watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值
        ageChange() {
            console.log('age属性值变化了')
        }
    }
}
</script>

<style lang="scss" scope>
.demo-item {
    margin-bottom: 10px;
}
</style>