Vue计算属性

2021-05-14

vue

字数统计: 651字 | 阅读时长≈ 3分钟

不要在模版中放入太多的逻辑。模版最好是简单和声明性的

data(){
    return {
        book:{
            author: 'xxx',
            borrower: [
                'aaa',
                'bbb',
                'ccc'
            ]
        }
    }
}

<template>
    <div>
        <p>This book has been borrowed?</p>
        <span>{{ book.borrower.length > 0 ? 'yes' : 'no' }}</span>
    </div>
</template>

对于包含响应式数据的复杂逻辑，应使用计算属性computed

data(){
    return {
        book:{
            author: 'xxx',
            borrower: [
                'aaa',
                'bbb',
                'ccc'
            ]
        }
    }
},
computed:{
    //计算属性的getter
    borrowedMessage(){
        //this指向vm实例
        return this.book.borrower.length > 0 ? 'yes' : 'no'
    }
}

<template>
    <div>
        <p>This book has been borrowed?</p>
        <span>{{ borrowedMessage }}</span>
    </div>
</template>

在表达式中调用方法同样可以达成一样的效果

data(){
    return {
        book:{
            author: 'xxx',
            borrower: [
                'aaa',
                'bbb',
                'ccc'
            ]
        }
    }
},
methods:{
    borrowedMessage(){
        //this指向vm实例
        return this.book.borrower.length > 0 ? 'yes' : 'no'
    }
}

<template>
    <div>
        <p>This book has been borrowed?</p>
        <!--调用方法-->
        <span>{{ borrowedMessage() }}</span>
    </div>
</template>

区别：

计算属性基于依赖关系缓存。即vm.borrowedMessage依赖vm.book.borrower。故当vm.book.borrower改变，所有依赖vm.borrowedMessage的绑定都会更新，若vm.book.borrower没有改变，则多次访问vm.borrowedMessage均返回之前的结果，不会再次执行函数。
调用方法不会有缓存，每次触发重新渲染都会再次执行函数。即Date.now()在methods中调用可以每次渲染更新数值，但在computed中则不会被更新。

若出现性能开销大的计算属性，需要缓存来节省开销则使用computed，若程序不想要缓存，则使用methods替代计算属性

setter

computed:{
    fullName:{
        //getter
        get(){
            return this.firstName + ' ' + this.lastName
        },
        //setter
        set(newValue){
            const names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

监听器watch

当需要在数据变化时执行异步操作或者开销比较大的操作时，使用watch监听数据的变化。当数据有变化时才执行下一步操作。

//template
<div>
    <p>question:</p>
    <input v-model="question" /> 
</div>

//script
watch:{
    question(new,old){
        if(new.indexOf('?')>-1){
            this.getAnswer()
        }
    }
},
methods:{
    getAnswer(){
        ...
    }
}

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！