Vuejs全家桶系列（四）---计算属性

最新推荐文章于 2024-07-11 23:14:56 发布

帕尼尼0_0

最新推荐文章于 2024-07-11 23:14:56 发布

阅读量447

点赞数

分类专栏： Vuejs基础文章标签： vue-js 前端框架 mvvm设计模式总结

本文链接：https://blog.csdn.net/Nate__River/article/details/78841236

版权

Vuejs基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简介

计算属性也是用来存储数据，但具有以下几个特点：
+ a.数据可以进行逻辑处理操作
+ b.对计算属性中的数据进行监视

依赖性

计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化

<body>

<div id="app">
     <input type="text" v-model="msg">
     <p>{{msg}}</p>
     <p>{{reverseMsg}}</p>
     <button @click="change">改变</button>
</div>

<script type="text/javascript">

  new Vue({
    el:'#app',
    data:{
      msg:'hello world'
    },
    computed:{
      reverseMsg:function(){
           console.log("computed");
          return this.msg.split(' ').reverse().join( );
      }
    },
    methods:{
      change(){
        this.msg = "aaa bbb ccc";
      }
    }
  });
</script>
</body>

这里写图片描述

点击 “改变”按钮后
这里写图片描述

缓存性

计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行

<body>

<div id="app">
     <input type="text" v-model="msg">
     <p>{{msg}}</p>
     <p>{{reverseMsg}}</p>
     <button @click="touch">点击</button>
</div>

<script type="text/javascript">

  new Vue({
    el:'#app',
    data:{
      msg:'hello world'
    },
    computed:{
      reverseMsg:function(){
           console.log("computed action");
          return this.msg.split(' ').reverse().join( );
      }
    },
    methods:{
      touch(){
        console.log(this.reverseMsg);
      }
    }
  });
</script>
</body>

因为一开始触发了一次计算属性reverseMsg，所以打印出了一句computed action
这里写图片描述

点击了7次 “点击”按钮后

这里写图片描述

我们发现computed action没有再执行，只是输出了7次“world hello”

get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
默认只有get，如果需要set，要自己添加

<body>

<div id="app">
     <input type="text" v-model="msg">
     <p>{{msg}}</p>
     <p>{{reverseMsg}}</p>
     <button @click="changeGet">改变Get</button>
     <button @click="changeSet">改变Set</button>
</div>

<script type="text/javascript">

  new Vue({
    el:'#app',
    data:{
      msg:'hello world'
    },
    computed:{
      reverseMsg:{
        get:function(){
          console.log("computed get");
          return this.msg.split(' ').reverse().join( );
        },
        set:function(data){
          this.msg = data;
        }
      }
    },
    methods:{
      changeGet(){
        this.msg = "aaa bbb ccc";
      },
      changeSet(){
        this.reverseMsg = "111 222 333";
      }
    }
  });
</script>
</body>