Vue 计算属性 computed

最新推荐文章于 2023-06-02 14:31:01 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2023-06-02 14:31:01 发布

阅读量108

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/yueqin0512/article/details/109740312

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一：Vue计算属性

1.为何需要计算属性？

表达式的计算逻辑可能比较复杂，使用计算属性可以使模板内容更加简洁

2.计算属性的用法

computed: {
  reverseString: function(){
    //基于data中的数据来做处理
    return this.msg.split('').reverse().join('');
  }
}

直接调用<div>{{reverseString}}</div>

计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的，若data中的数据发生变化了，则重新计算，若不发生变化，则不会再次计算而是将第一次的结果缓存
方法不存在缓存，每次调用都会重新进行计算

区别测试：

<body>
    <div id="app">
      <div>{{reverseString}}</div>
      <div>{{reverseString}}</div>
      <div>{{fanzhuan()}}</div>
      <div>{{fanzhuan()}}</div>
      <div>{{fanzhuan()}}</div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"nihao"
            },
            methods: {
              fanzhuan: function(){
                console.log("methods")
                return this.msg.split('').reverse().join('');
              }
            },
            computed: {
              reverseString: function(){
                console.log("computed")
                return this.msg.split('').reverse().join('');
              }
            }
        });
    </script>
</body>

打印一个computed
打印三个methods

吃不胖的猫o(=^ェ^=)m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 计算属性 computed

一：Vue计算属性1.为何需要计算属性？表达式的计算逻辑可能比较复杂，使用计算属性可以使模板内容更加简洁2.计算属性的用法computed: { reverseString: function(){ //基于data中的数据来做处理 return this.msg.split('').reverse().join(''); }}直接调用<div>{{reverseString}}</div>计算属性与方法的区别计算属性是基于他们的依赖进行
复制链接

扫一扫

专栏目录