Vue.js 计算属性computed_Java开源博客系统-Powered by java1234

博客信息

Vue.js 计算属性computed

发布时间：『 2019-06-28 21:32』博客类别：Vue.js 阅读(3152) 评论(0)

Vue.js 计算属性

vue.js推出了computed属性，用于计算复杂业务逻辑，把复杂逻辑抽取，实现维护方便；

比如看如下，复杂的运算放html里，很不好

</div>

我们用计算属性的话：

var vm = new Vue({

el: '#example',

data: {

message: 'Hello'

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

})

<p>Original message: "{{ message }}"</p>

<p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

这样看起来非常爽；

计算属性缓存 vs 方法

在某些时候，看起来计算属性和方法的话效果一样，但是本质上，计算属性多了一个缓存；

我们来看下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        {{ message.split('').reverse().join('') }}
    </div>
    <h2>计算属性</h2>
    <div>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <button @click="change()">改变</button>
    </div>
    <h2>计算属性缓存 vs 方法</h2>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reversedMessage2() }}"</p>
    <p>Reversed message: "{{ reversedMessage2() }}"</p>

</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    let count=1;
    let vm=new Vue({
        el:'#app',
        data:{
            message: 'Hello'
        },
        computed:{
            // 计算属性的 getter
            reversedMessage(){
                count++;
                // `this` 指向 vm 实例
                return count+''+this.message.split('').reverse().join('')
            }
        },
        methods:{
            change(){
                this.message="fdafdafsda";
            },

            reversedMessage2() {
                count++;
                return count+''+this.message.split('').reverse().join('')
            }
        }
    })


</script>
</body>
</html>

QQ鎴浘20190628212613.jpg

我们发现计算属性的计数没有变化，因为有缓存；

最后一个，就是计算属性还有一个setter方法，默认的是getter；

我们可以通过setter来重新进行设置和计算，偶尔用到；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        {{ message.split('').reverse().join('') }}
    </div>
    <h2>计算属性</h2>
    <div>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <button @click="change()">改变</button>
    </div>
    <h2>计算属性缓存 vs 方法</h2>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reversedMessage2() }}"</p>
    <p>Reversed message: "{{ reversedMessage2() }}"</p>
    <h2>计算属性set</h2>
    <p>Computed reversed message: "{{ reversedInfo }}"</p>
    <button @click="change2()">重新计算处理</button>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    let count=1;
    let vm=new Vue({
        el:'#app',
        data:{
            message: 'Hello',
            info:'Hello'
        },
        computed:{
            // 计算属性的 getter
            reversedMessage(){
                count++;
                // `this` 指向 vm 实例
                return count+''+this.message.split('').reverse().join('')
            },
            reversedInfo:{
                get(){
                    return this.message.split('').reverse().join('');
                },
                set(newValue){
                    console.log(newValue);
                    console.log('重新做一些计算处理');
                }
            }
        },
        methods:{
            change(){
                this.message="fdafdafsda";
            },
            change2(){
                vm.reversedInfo='fdafdfdafdas222';
            },
            reversedMessage2() {
                count++;
                return count+''+this.message.split('').reverse().join('')
            }
        }
    })


</script>
</body>
</html>

关键字： Vue.js 计算属性 computed

上一篇：es6模版字符串

下一篇：es6箭头函数以及this

关注Java1234微信公众号

博主信息

Java1234_小锋

(知识改变命运，技术改变世界)

按日志类别

按日志日期

友情链接