关于vue.js:Vue计算属性和监听属性

39次阅读

共计 1505 个字符，预计需要花费 4 分钟才能阅读完成。

应用场景：当页面中有某些数据依赖其余数据进行变动的时候，能够应用计算属性

计算属性 computed 是基于 data 中数据进行解决的，data 数据变动，他也跟着变动

当 data 中数据没有产生扭转时，咱们调用 computed 中函数 n 次，只会进行缓存（执行一次）每个计算属性都蕴含两个 set、get 属性

应用场景：数据变动时执行异步或开销较大的操作，能够随时批改状态的变动

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>