计算属性

2024-05-15  本文已影响0人  缘之空_bb11

官方文档-vue计算属性
参考Vue的计算属性

以前觉得这块挺简单,但是后来在项目中使用的时候,感觉特别的蹩脚,主要体现在这些方面:

  1. 计算属性不能设置一个固定的初始值,只能借助其他变量,为什么这样说了,看下它的 get 方法:
computed: {
    // 计算属性的 getter
    reversedMessage(){
      return this.message
    }
}
  1. 计算属性的 set 方法和 get 方法,在什么情况下触发.
    • 读取计算属性的值, 默认调用方法getter方法
    • 当数据改变时即给计算属性赋值时，默认调用set方法

注意:
1.只有computed里的值在模板里使用,更改了getter里使用的变量，才会触发computed的更新.
2.若是改变其 get 方法中绑定的表达式,这时只会触发其 get 方法, 只有对本计算属性进行赋值才会,触发 set 方法.
3. set 中的 newValue 代表着就是该数组的值
4.若给计算属性数组 push('5') 添加元素,你会发现只触发了 get 方法, 且等同于 给其 get 中绑定的数据添加新元素.

computed: {
    fullName: {
        // getter
        get(){
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set(newValue){
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

  1. 计算属性的作用和意义

    使用的利弊:

    当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护.
    即计算属性是使用处理一些简单的数据绑定逻辑的,对于一些比较复杂的逻辑建议放到方法中进行处理,方便后期的维护.

    computed主要的作用:

    • 分离逻辑(模板和数据分离) ???

    • 缓存值

      计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，页面每渲染一次就重新执行,所以每次都会重新计算。

    • 双向绑定(getter,setter)

    • 计算属性还可以依赖多个vue实例的数据，只要其中任一个数据变化，计算属性就会重新执行，视图也会更新。适用于比较费时的数据计算

    • 当使用组件时，计算属性也经常用来 动态传递props。

"动态传递 Props"的理解:
如果你想要根据某个prop的值动态地计算并传递一个新的prop给子组件，你可以使用计算属性来计算这个值，然后将这个计算属性作为prop传递给子组件。
并不是在子组件件...

计算属性 get 的用法:

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，通常里面都是一个个计算相关的函数 , 一般就是用来通过其他的数据算出一个新数据 , 只要最终返回一个计算出来的结果即可。
使用计算属性的默认方法 getter 来读取,里面可以执行一些逻辑或者直接return返回的值.

 computed: {
         // 计算属性的 getter
         reversedMessage(){
           //  在此之前调用函数方法 或 执行一些逻辑
           //  最终return 的是 通过其他的数据算出一个新数据 
           return this.message.split('').reverse().join('')
         }
     }

计算属性 set 的用法:

注意: 绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法

  computed: {
     fullName: {
       // 数据渲染时会自动调用get方法
       get: function(){
         return this.firstName  +  '-'  +  this.lastName
       },
       // 注意必须要传递参数,否则没有意义
       // 数据变化时自动调用set方法
       set: function(newValue){
         var names = newValue.split('-')
         this.firstName = names[0]
         this.lastName = names[1]
       }
     }
   }
   
  // 此时会调用set方法,若现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName也会相应地被更新；进而会触发getter被调用。
   fullname = 'Jay-Chou'

计算属性与watch的区别

1.触发条件不同
computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。
watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。
2.应用场景不同
执行异步操作，开销较大的操作，避免堵塞主线程，使用watch。
简单且串行返回的，使用computed
3.区别
区别在于watch是不断触发更新 , 而computed只有值更新后才触发一次

自己感悟:

1.什么时候使用计算属性:

当一个值变化时引起其他逻辑变化时,可以使用计算属性;
只有当该计算属性被用于模版展示时,才会触发Get方法,否则无效;

2. 计算属性数组:

计算属性有点像壳子,像是被封装一层的函数,你对其进行数组类型进行操作,其实都是对其实都是对 get 中绑定的原数组进行操作,而且此时会触发 get 方法,我们可以在其中进行 逻辑方法调用.

对其赋值操作时,会触发 set 方法,我们可以在其中进行 逻辑方法调用.其中 newValue 就是这个赋值的新值.

上一篇下一篇

猜你喜欢

热点阅读