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

  • 相关阅读:
    常见算法复杂度解析
    Linux shell脚本根据文件路径信息获取路径和名称
    linux 目录递归替换差异文件
    Linux普通用户具备root用户操作权限
    java线上异常定位工具
    OCR
    国内镜像
    hadoop镜像
    处理Jsp出现乱码问题
    无缝滚动
  • 原文地址:https://www.cnblogs.com/angle-yan/p/13463684.html
Copyright © 2011-2022 走看看