zoukankan      html  css  js  c++  java
  • Vue computed 计算属性

    <template>
        <div id="app">
            <div>{{reverseTitle}}</div>
            <div>{{reverseTitle2()}}</div>
            <button @click="add()">补充货物1</button>
            <div>总价为:{{price}}</div>
        </div>
    </template>
    <script>
    export default {
        data(){
            return {
                package1: {
                    count: 5,
                    price: 5
                },
                package2: {
                    count: 10,
                    price: 10
                },
                title: 'Hello Vue!!!'
            }
        },
        computed: {
            price(){
                return this.package1.count*this.package1.price+this.package2.count*this.package2.price  //总价随着货物或价格的改变会重新计算
            },
            reverseTitle(){//计算属性里面的方法,只要引用值没发生变化,那么就不会执行该方法
                console.log('我执行了reverseTitle方法')
                return this.title.split('').reverse().join('')
            }
        },
        methods: {   //对象的方法
            add(){
                this.package1.count++
                this.package2.count++
            },
            reverseTitle2(){//每次页面渲染时就会执行该方法
                console.log('我执行了reverseTitle2方法:', this.title)
                return this.title.split('').reverse().join('')
            }
        }
    }
    </script>
    

    总结:
    1.computed 在第一次引用,或引用值改变时才会触发里面的方法(缓存,减少不必要的反复计算)
    2.在methods 里面的方法会在页面渲染更新时反复调用(耗费大量性能)
    3.使用computed 定义方法后 可以在模板中直接用方法名得到结果 而不需要像methods 这样()使用(方便调用)

  • 相关阅读:
    一个空类会生成哪些默认函数
    What is VMR(Video Mixing Render)From MSDN
    DirectX backface culling(背面剔除)
    D3DPOOL(资源池)
    两道概率题供大家周末把玩
    空间两点间的距离
    n != n, n == n
    C++默认参数
    D3DPT_TRIANGLELIST与D3DPT_TRIANGLESTRIP
    D3D中的设备丢失
  • 原文地址:https://www.cnblogs.com/yzyh/p/10159166.html
Copyright © 2011-2022 走看看