第十四节——计算属性computed

一、概念

如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法

1、监听值未在data中定义,以return返回值形式;

2、计算属性变量在computed中定义,属性监听在data中定义。

3、计算属性默认只有get来读取,手动修改计算属性时,会触发手写的set函数(不推荐)。

4、计算属性的值会被缓存,只有实例中相关依赖值改变时,才重新计算,性能好但不适合做异步请求。

5、计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数

二、基本使用

复制代码
<template>
  <div>
    计算属性
    <!-- 可以直接使用 -->
    {{arrLength}}
  </div>
</template>
<script>
  export default {

    data () {
      return {
        arr: [1,2,3,4]
      }
    },

    /**
   * 计算属性放在computed对象里面
   * 里面存放的是方法 方法的名字就是这个计算属性的名字
   * 方法的返回值就是计算属性的返回值
   * 只有内部数据变化才会重新计算
   */
    computed: {
      /**
     * 计算arr数组的length
     */
      arrLength () {
        // return的值就是arrLength的值
        return this.arr.length
      }
    }
  }
</script>

三、修改计算属性(一般来说计算属性不需要修改)

复制代码
<template>
  <div>
    计算属性
    <!-- 可以直接使用 -->
    {{ name }}
    <button @click="updateName">修改名字</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "张",
      lastName: '三'
    };
  },

  /**
   * 可写计算属性
   * 计算属性默认是只读的。
   * 当你尝试修改一个计算属性时,你会收到一个运行时警告。
   * 只在某些特殊场景中你可能才需要用到"可写"的属性,
   * 你可以通过同时提供 getter 和 setter 来创建
   * 不推荐直接使用
   */
  computed: {
    /**
     * 计算arr数组的length
     */
    name: {
      // getter
      get() {
        return this.firstName + " " + this.lastName;
      },
      // setter
      set(newValue) {
        // 注意:我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(" ");
      },
    },
  },

  methods: {
    updateName () {
      this.name = '李 四'
    }
  }
};
</script>
相关推荐
拉不动的猪14 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
爱喝一杯白开水14 分钟前
SpringMVC从入门到上手-全面讲解SpringMVC的使用.
java·spring·springmvc
王景程23 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
zhang23839061541 小时前
IDEA add gitlab account 提示
java·gitlab·intellij-idea·idea
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑