zoukankan      html  css  js  c++  java
  • Vue——computed与methods的区别

    <div id="app">
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        let vue = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三'
            },
            methods: {
                getFullName(){
                    return this.firstName+" "+this.lastName
                }
            },
            computed: {
                fullName(){
                    return this.firstName+" "+this.lastName
                }
            }
        })
    
    1. 从上面例子中很容易看出,虽然两者都能通过 {{}} 引用,但 methods 需要加括号。
    <div id="app">
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        let vue = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三'
            },
            methods: {
                getFullName(){
                    console.log('methods')
                    return this.firstName+" "+this.lastName
                }
            },
            computed: {
                fullName(){
                    console.log('computed')
                    return this.firstName+" "+this.lastName
                }
            }
        })
    </script>
    

    1. 当多次调用时,computed 有缓存,如果没有改变,多次引用只会调用一次

      而 methods 没有缓存,每次引用都会调用一次

      所有就对属性计算方面来看, computed 优于 methods

  • 相关阅读:
    Spark算子(二)Action
    Spark中利用Scala进行数据清洗(代码)
    Spark核心概念
    Scala面向对象详解
    Scala控制语句
    Scala基础语法
    Scala简介、安装、函数、面向对象
    Hbase优化
    管理员必备的20个Linux系统监控工具
    iOS 关于webView的使用方法
  • 原文地址:https://www.cnblogs.com/angle-yan/p/13463684.html
Copyright © 2011-2022 走看看