• vue中computed(计算属性)


    1.computed(计算属性)

    根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值

    <div id="app">
        <p>计算属性fullName:{{fullName}}</p>
    </div>
    
    <script>
        var vm = new Vue({  
            el: '#app',  
            data: {  
                firstName: 'Foo',  
                lastName: 'Bar',  
            },  
            computed: {  
                fullName: function () {  
                    return this.firstName + ' ' + this.lastName  
                }  
            }  
        })
    </script>

    需要注意的是,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。

    2.computed的缓存功能

    <div id="app">
        <h1>{{message}}</h1>
        <p class="test1">{{methodTest}}</p>
        <p class="test2-1">{{methodTest()}}</p>
        <p class="test2-2">{{methodTest()}}</p>
        <p class="test2-3">{{methodTest()}}</p>
        <p class="test3-1">{{computedTest}}</p>
        <p class="test3-2">{{computedTest}}</p>
    </div>
    
    <!--script部分-->
    let vm = new Vue({
        el: '#app',
        data: {
            message: '我是消息,'
        },
        methods: {
            methodTest() {
                return this.message + '现在我用的是methods'
            }
        },
        computed: {
            computedTest() {
                return this.message + '现在我用的是computed'
            }
        }
    })

       methods定义的方法是以函数调用的形式来访问的,那么test2-1,test2-2,test2-3反复地将methodTest方法运行了三遍,如果我们碰到一个场景,需要1000个methodTest的返回值,那么毫无疑问,这势必造成大量的浪费
    更恐怖的是,如果你更改了message的值,那么这1000个methodTest方法每一个又会重新计算。。。。

      computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值

      如上例,在Vue实例化的时候,computed定义computedTest方法会做一次计算,返回一个值,在随后的代码编写中,只要computedTest方法依赖的message数据不发生改变,computedTest方法是不会重新计算的,也就是说test3-1,test3-2是直接拿到了返回值,而非是computedTest方法重新计算的结果。

      这样的好处也是显而易见的,同样的,如果我们碰到一个场景,需要1000个computedTest的返回值,那么毫无疑问,这相对于methods而言,将大大地节约内存
    哪怕你改变了message的值,computedTest也只会计算一次而已

  • 相关阅读:
    hdu 4308 Saving Princess claire_ BFS
    进程调度
    LinearLayout具体解释一:LinearLayout的简单介绍
    CSS: 解决Div float后,父Div无法高度自适应的问题
    框架布局FrameLayout
    Coundn't load memtrack module (No such file or directory)
    线性布局LinearLayout
    android视图概述
    activity状态的保存和恢复
    回溯和DFS效率分析
  • 原文地址:https://www.cnblogs.com/pwindy/p/13442227.html
Copyright © 2020-2023  润新知