Vue的计算属性

Vue的计算属性

什么是计算属性?

  • 首先,按照名称,计算属性是用来计算的
  • 其次,他是个属性
  • 因此,在Vue 中,一般处理文本的计算方法叫做计算属性
  • 所以,计算属性的引用一般都是取名属性的名字
  • 下面的demo中,两个结果都是一样,都是反转一列数字,但是用computed的方法更简洁直观.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body> 
  <div id="app">
    {{text.split(',').reverse().join(',')}}
    <div>{{reverseText}}
</div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
     el: '#app',
     data: {
       text:'123,456,789',
       button: '按下'
     },
    computed:{
      reverseText: function(){
        return this.text.split(',').reverse().join(',')
}
},
    methods:{
      show: function(){
        console.log(this)
      }
}
  })
</script>
</body>
</html>

在这里插入图片描述

计算属性的getter 和 setter

其实上面的计算属性是简写,完整的计算属性应该是像下面这样写的
计算属性是个对象,他的属性也是个对象,属性中拥有setget两个函数方法
计算属性一般只需要实现get方法即可,他是个只读属性

  • 因为这个属性每次都写ge方法太麻烦了,所以直接用属性名命名函数再差值就可以了.
  • 所以计算属性不用加括号
  • 虽然一般用不到set方法,但是当用到的时候,不要忘记要在参数中添加newValue,因为你要设置参数拿到这个值呀
  • 计算属性可以依赖其他Vue的实例
computed:{
      reverseText: {
      set : function(newValue){
      },
      get : function(){
        return this.text.split(',').reverse().join(',') 
      }
}

计算属性的缓存

计算属性生效时会在本地做一次缓存,当重新执行时,他会观察数据是否发生变化.
如果没有发生变化,会把缓存的结果返回出去
如果数据变了,那么就会重新调用函数,再缓存
这样可以提高性能

  • 而调用方法,只要页面重新渲染,方法就重新执行
  • 计算属性只取决于依赖的数据变化才变化

"计算属性"和"方法"的对比

  • 计算属性computed只会执行时计算一次
  • 方法methods会执行多次
  • 因此计算属性computed的性能更好
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页