Vue的计算属性（computed properties）

最新推荐文章于 2024-01-21 19:01:45 发布

weixin_30664539

最新推荐文章于 2024-01-21 19:01:45 发布

阅读量562

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/apollo1616/articles/10038437.html

版权

一、起因？
虽然在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.
比如：

<div id="example">
    {{ message.split('').reverse().join('') }}
</div>

这样,模板不再简单和清晰.在实现反向显示message之前,你应该通过一个函数确认它.
所以,Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑.
计算属性(computed properties)就是不存在于原始数据中,而是在运行时实时计算出来的属性.

通过四种方式让数据在页面显示出来,推荐使用后面2种:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>初始值:{{ message }}</p>
    <p>翻转值:{{ message.split('').reverse().join('') }}</p>
    <p>函数调用:{{ reverseStr() }}</p>
    <p>计算属性:{{ reverse }}</p>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue !'
        },
        methods:{
            reverseStr(){
                return this.message.split('').reverse().join('')
            },
        },
        computed:{
            // get方法
            reverse(){
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

二、计算属性和 Methods的区别？
   当页面重新渲染(不是刷新)的时候,计算属性不会变化,直接读取缓存使用,适合较大量的计算和改变频率较低的属性;
   而method,就是当页面重新渲染的时候(页面元素的data变化,页面就会重新渲染),都会重新调用method.
   如果不希望有缓存,我们可以用method取代computed.
   疑惑：为什么需要缓存？
   假设我们有一个重要的计算属性A, 这个计算属性需要一个巨大的数组遍历和做大量的计算.然后我们可能有其他的计算属性依赖于A.如果没有缓存,我们将不可避免的多次执行A的getter方法

三、计算属性的setter方法
   计算属性默认只有getter,不过在需要时你也可以提供一个setter.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ showinfo }}</p>
    <button @click="deal()">调用计算属性的setter方法</button>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '#app',
        data: {
            name:'Apollo',
            age:28,
        },
        methods:{
            deal(){
                // 调用showinfo的setter方法
                this.showinfo = 'Merry 26';
            }
        },
        computed:{
            // get方法
            /*
            showinfo(){
                return this.name+'今年'+this.age+'岁!'
            },
            */
            showinfo:{
                // get方法
                get(){
                    return this.name+'今年'+this.age+'岁!'
                },
                // set方法
                set(str){
                    let infoArr = str.split(' ');
                    this.name = infoArr[0];
                    this.age = infoArr[1];
                }
            },

        }
    })
</script>
</body>
</html>