computed : Vue提供的一个配置项

注意: 当data中的数据发生变化,页面中的指令和表达式会重新计算, 有时候不相关数据变化会导致一直重新计算,所以这里引出了计算属性

  1. 如何使用?

    computed 和 data同级,计算属性写在computed中;

    写起来像方法;

    用起来像属性。

  2. 特点(注意点):

    1)一定要有返回值

    2)可以使用data中的已知值。

    3)只要跟计算属性相关的数据发生了变化,计算属性就会重新计算,不相关的属性无论如何变化,都不会导致计算属性变化

    4)计算属性名不能和data中的数据重名(因为要使用data中的数据)

  3. 什么时候使用?

    想要根据data中的已知值,得到一个新值,并且这个新值会随着相关数据的变化而变化

const vm = new Vue({
      el: "#app",
      data:{
        msg: 'hello vue'
      },
      computed:{
        reverseMsg(){
        /* 
        新增computed属性,在这个属性中
        新增一个方法,在方法中 return 值
        计算属性写法是函数,但是 编译到实例上是一个属性
        */
          return this.msg.split('').reverse().join("")
        }
      }
    })
  /*
  计算属性优势:
    1,计算属性在 首次计算后,会基于依赖(可以依赖多个值)进行缓存,首次计算后的值
    在多次使用这个计算属性时,如果依赖的值没有变化,不会重新调用,而会使用缓存的值
  */ 
 /* 
 注意:
  1,新增一个计算属性时,不要和 data中已经存在的 或者 实例上已经存在的其他属性重名
  2,默认 计算属性 是 不能被修改的 会破坏,和 依赖之间的关系
    如果要修改,应该去修改依赖

    如果修改计算属性 计算属性要写 完整写法 必须要加上setter 在setter中 去修改
 */
const vm = new Vue({
      el: "#app",
      data:{
        num: 20
      },
      methods:{
        changeNum2(){
          // 直接修改计算属性
          this.num2 = 100
        }
      },
      computed:{
        num2:{
          get(){
            console.log("获取了")
            return this.num*2
          },
          set(val){
            console.log('设置值了'+val)
            this.num = val/2
          }
        } 
      }
    })
Logo

前往低代码交流专区

更多推荐