×

vue每日一学:聊聊计算属性的基本应用

作者:Terry2021.10.19来源:Web前端之家浏览:3979评论:0
关键词:vuejs

vue每日一学:聊聊计算属性的基本应用。

  • 计算属性:要用的属性不存在,要通过已有属性计算得来,计算属性要有一个全新的配置项computed

  • Vue来说,data里面的数据就是属性,只要Vue中的数据改变,就会重新解析模板,遇到插值语法里的方法会重新调用

基本知识

原理

  • 底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行?

  • 初次读取时会执行一次。

  • 当依赖的数据发生改变时会被再次调用。

优势

  • 与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

备注

  • 计算属性最终会出现在vm(Vue实例)上,直接读取使用即可。

  • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

举个例子:

computed: {
    "计算属性名" () {
        return "值"
    }
}

具体DEMO:

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

大家可以试下运行结果。

归结

归纳上面的内容,在这里分享下完整的写法。

计算属性写成配置对象的格式:对象中用get和set函数

get的作用::

当有人读取fullName时,get就会被调用,且返回值就作为计算属性的值  (get一定要写return)

get什么时候调用?

1.初次读取fullName时。 

2.所依赖的数据发生变化时。

get(){
     console.log('get被调用了')
     // console.log(this) //  此处的this是vm(Vue实例)
     return this.firstName + '-' + this.lastName
},

set:当计算属性的值被修改时被调用 形参接收的是传入的新值。

  ...
  computed:{
      fullName:{
          //get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
          //get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
          get(){
              console.log('get被调用了')
              // console.log(this) //此处的this是vm
              return this.firstName + '-' + this.lastName
          },
          //set什么时候调用? 当fullName被修改时。
          set(value){
              console.log('set',value)
              const arr = value.split('-')
              this.firstName = arr[0]
              this.lastName = arr[1]
          }
      }
  }
})

OK,差不多就这些内容了,至于其他的大家也可以留言讨论。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20211019a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: