Vue的计算属性

最新推荐文章于 2023-04-02 20:50:09 发布

龟霸也是高达

最新推荐文章于 2023-04-02 20:50:09 发布

阅读量201

点赞数

分类专栏： JavaScript 基础 vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/109052740

版权

JavaScript 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

基础

28 篇文章 0 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

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

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

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

computed:{
      reverseText: {
      set : function(newValue){
      },
      get : function(){
        return this.text.split(',').reverse().join(',') 
      }
}

计算属性的缓存

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

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

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

计算属性computed只会执行时计算一次
方法methods会执行多次
因此计算属性computed的性能更好

龟霸也是高达

关注

0
点赞
踩
0

收藏

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

Vue的计算属性什么是计算属性?首先,按照名称,计算属性是用来计算的其次,他是个属性因此,早vue 中,一般处理文本的计算方法叫做计算属性所以,计算属性的引用一般都是取名属性的名字下面的demo中,两个结果都是一样,都是反转一列数字,但是用computed的方法更简洁直观.<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</tit
复制链接

扫一扫