1. 计算属性和methods的对比

香菜大魔王(✪ω✪)

已于 2022-01-24 14:03:03 修改

阅读量139

点赞数

分类专栏： VUE2.0 文章标签： vue.js 前端框架

于 2022-01-20 18:03:02 首次发布

本文链接：https://blog.csdn.net/weixin_44020255/article/details/122607183

版权

VUE2.0 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<body>
    <div id="app">
        <!--1. 直接拼接: 语法过于繁琐，不采用-->
        <h2>{{firstName}} {{lastName}}</h2>

        <!--2. 通过定义methods-->
        <!-- <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2> -->

        <!--3. 通过computed-->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>

        <!-- 2和3 相似，但一般采用 3 
        方法多次调用，而计算属性内部缓存，只需调用一次，性能更高-->
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '哈哈',
                lastName: 'yingzi'
            },
            methods: {
                getFullName: function() {
                    console.log('getFullName');
                    return this.firstName + ' ' + this.lastName
                }
            },
            computed: {
                fullName: function() {
                    console.log('fullName');
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

香菜大魔王(✪ω✪)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1. 计算属性和methods的对比

<body> <div id="app">  <h2>{{firstName}} {{lastName}}</h2>  <!-- <h2>{{getFullName()}}</h2> <h2>{{getFullN.
复制链接

扫一扫

专栏目录