# 计算属性 methods实现计算属性实现

qq_40051569

于 2023-03-08 11:53:12 发布

阅读量97

点赞数

分类专栏：笔记前端 vue 文章标签： java 前端开发语言

本文链接：https://blog.csdn.net/qq_40051569/article/details/129400518

版权

笔记同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

前端 vue

15 篇文章 0 订阅

订阅专栏

文章对比了Vue框架中计算属性(computed)和methods在处理数据响应式方面的差异。计算属性在数据变化时自动更新，具有缓存机制，而methods需手动调用来获取结果。示例展示了如何使用这两种方式来组合姓和名生成全名。

摘要由CSDN通过智能技术生成

计算属性 methods实现

    <div id="app">
        姓：<input type="text" v-model="firstName"><br/>
        名：<input type="text" v-model="lastName"><br/>
        全面:<span>{{fullName()}}</span>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                // 数据发生变化，Vue模板重新解析
                firstName:'柳',
                lastName:'三'
            },
            methods:{
                fullName(){
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>

计算属性计算属性实现

computed 方法计算

在这里插入图片描述

    <div id="app">
        姓：<input type="text" v-model="firstName"><br/>
        名：<input type="text" v-model="lastName"><br/>
        全面:<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        const vm =  new Vue({
            el:'#app',
            data:{
                // 数据发生变化，Vue模板重新解析
                firstName:'柳',
                lastName:'三'
            },
            computed:{
                // fullName:{
                //     // get 什么时候调用1.初次读取时，2.所依赖的数据发生变化时 3.调用get会被缓存
                //     // 有人读取fullName get会被调用 
                //     // get的 this的指向是 vm
                //     // vm存的fullName 是值，默认读取get获得
                //     get(){
                //         return this.firstName + '-' + this.lastName
                //     },
                //     // set 属性被修改时调用
                //     set(value){
                //         const arr = value.split('-')
                //         this.firstName = arr[0]
                //         this.lastName = arr[1]
                //     }
                // }
                // 简写只有get
                fullName(){
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>