【Vue学习笔记】计算属性（computed）

最新推荐文章于 2023-09-19 16:44:43 发布

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

最新推荐文章于 2023-09-19 16:44:43 发布

阅读量902

点赞数

分类专栏： Vue学习笔记文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/biancheng_/article/details/129212193

版权

Vue学习笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

什么是计算属性？

在模板(HTML)中放入太多的逻辑会让模板过重且难以维护，而且不好阅读。计算属性computed来帮忙。

计算属性是一个函数，是经过元数据（data里）进一步运算后的数据，计算属性的优点是：当元数据不发生变化时，不会再做计算（即：缓存了第一次调用函数的结果），只有元数据发生变化时，才做计算。是响应式的，需要在模板中渲染才可调用（计算属性只能在模板上使用）

语法

//定义
//1、计算属性默认是只读的
computed:{
  计算属性名: function(){return 返回值}		
}

//2、如果想修改计算属性的值
computed:{
    计算属性名:{
      //当读取计算属性的值时，会调用get函数  
      get:function(){        
        return 返回值
      },
      //当修改计算属性的值时，会调用get函数
      set:function(newVal){//newVal：是计算属性的新值。
        
      }
    }
}

//使用
使用:	{{计算属性}} |  v-指令="计算属性"

场景:拼接字符串案例

1.插值表达式实现


<body>
    <div id="root">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <!-- <p>{{firstName+"-"+lastName}}</p> -->
        <!-- 插值表达式不应写的过于复杂 -->
        <p>{{firstName.slice(0,3)}}-{{lastName}}</p>
    </div>

</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"李123123",
            lastName:"四"
        }
    });
</script>

2.通过函数实现


<body>
    <div id="root">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <!-- {{fullName()}}这句话应该是在页面渲染时调用了一次,那么以后随着
        数据的改动还会调用么? -->
        <!-- 只要data中的属性发生改变，模板就会重新重新渲染 -->
        <p>{{fullName()}}</p>
        <p>{{fullName()}}</p>
        <p>{{fullName()}}</p>
        <p>{{fullName()}}</p>
    </div>

</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"李123123",
            lastName:"四"
        },
        methods:{
            fullName:function(){
                console.log("heihei");
                return this.firstName.slice(0,3) + " " + this.lastName;
            }
        }
    });
</script>

3.计算属性实现


<script>
    // 1.计算属性定义:属性本身不存在(data中没有),通过计算产生的属性
    // 2.原理，本质就是通过object.defineproprty的get和set方法
    // 3.触发时间:a.页面第一次渲染的时候
    //           b.当所依赖的属性(data)发生修改时会触发
    // 4.好处:每次计算完会将属性值保留在缓存中，在为发生修改前不会多次调用
    // 5.修改需要使用set方法，且触发依然要修改所依赖的属性 (正常不会改)

    let vm = new Vue({
        el:"#root",
        data:{
            firstName:"李123123",
            lastName:"四"
        },
        methods:{

        },
        computed:{
            fullName:{
                get(){
                    console.log('get');
                    return this.firstName.slice(0,5) + " " + this.lastName;
                },
                set(v){
                    console.log('set');
                    this.firstName = v;
                }
            }
           // 简写形式，只有读的情况下 默认其实就get写法
            // fullName:function(){
            //     return this.firstName.slice(0,3) + " " + this.lastName;
            // }
        }
    });

⭐ computed和methods 的区别？

1.computed是响应式的，methods并非响应式。

2.调用方式不一样，computed定义的成员是像属性一样访问，methods定义的成员必须以函数形式调用。

3.computed是带缓存的，只有依赖数据发生改变，才会重新进行计算，而methods里的函数在每次调用时都要执行。

4.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读属性，这点是methods的成员做不到的。

5.computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化

如果声明的计算属性计算量非常大的时候，而且访问量次数非常多，改变的时机却很小，那就需要用到computed；缓存会让我们减少很多计算量。

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue学习笔记】计算属性（computed）

在模板(HTML)中放入太多的逻辑会让模板过重且难以维护，而且不好阅读。计算属性computed来帮忙。计算属性是一个函数，是经过元数据（data里）进一步运算后的数据，计算属性的优点是：当元数据不发生变化时，不会再做计算（即：缓存了第一次调用函数的结果），只有元数据发生变化时，才做计算。是响应式的，需要在模板中渲染才可调用（计算属性只能在模板上使用）
复制链接

扫一扫