首页 > 其他分享 >Vue2 计算属性

Vue2 计算属性

时间:2022-10-03 13:23:06浏览次数:49  
标签:缓存 Vue2 vue 调用 计算 数据 属性

概述

计算属性指的是通过一系列运算之后,最终得到一个属性值

间的的理解,当我们拥有一些数据时,我们需要将这些数据整合到一起,这时候计算属性就会完成这个操作,整合到一起的数据会变成实例的一个新属性值。当用户改变某个数据时,计算属性也会动态的调成整合后的数据。

这个动态计算出来的属性值可以模板结构或 methods 方法使用

使用

<body>
  <div id="app">
    <p>greeting1:{{greeting1}}</p>
    <p>greeting2:{{greeting2}}</p>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/gh/brokyz/cdn/vue/vue-2.7.10.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      start: "Hello, Vue!",
      end: "bye~",
    },
    computed: {
        // 简写
      greeting1() {
        return this.start + this.end;
      },
        // 完整写法
      greeting2: {
        get() {
          return this.start + this.end;
        },
        // 如果有修改计算属性的需求可以设置set(),根据值去修改依赖的属性。
        // set(value){}
      },
    },
  });
</script>

此时虽说我们没有手动创建 greeting 属性,但是计算属性的函数会给我们自动创建一个关联对应属性的属性。我们可以直接调用。当对应的属性发生改变时,r计算属性也会跟着动态改变

特点:

  • 虽然计算属性在声明时被定义为方法,但计算属性的本质是一个属性。
  • 计算属性会缓存计算的结果,只有计算属性依赖的数据发生变化时,才会重新进行计算。

注意:

  • 当计算属性第一次被渲染调用时,getter被调用,计算属性会存于缓存,之后只要计算属性所依赖的数据不发生改变,都会从缓存读取这个计算属性不会再次调用getter。

  • 当计算属性所依赖的数据发生改变时,getter再次被调用,计算属性改变,并会重新存于缓存。

  • 如果我们在vue实例外声明let a = 1,在计算属性中将其作为依赖,那么a发生变化时,页面不会发生变化。因为声明在vue实例外面,脱离了vue的控制。所以计算属性要使用vue实例已有的属性。

  • 只有考虑读取不考虑修改时才使用简写形式。

标签:缓存,Vue2,vue,调用,计算,数据,属性
From: https://www.cnblogs.com/brokyz/p/16750370.html

相关文章

  • Vue2 props
    props概述我们的组件进行展示数据时,里面并不是都是写死的。我们需要在使用组件时,向组件内部传值,并展现我们需要的值。数组形式接收propsTestProps.vue<template> ......
  • 计算机视觉与图形学-神经渲染专题-StructNeRF室内重建
    (说明:如果您认为下面的文章对您有帮助,请您花费一秒时间点击一下最底部的广告以此来激励本人创作,谢谢!!!)神经辐射场(NeRF)通过密集捕获的输入图像实现照片真实感视图合成。然而,......
  • CPU-计算机数的运算--浮点运算
    1.浮点运算的加减法;对阶,尾数求和,规格化,舍入,溢出判断;对阶:小->大尾数求和:补码    舍入:在对阶和右移的过程中,可能出现尾数末位丢弃,需要舍入......
  • CPU-计算机数的运算--定点运算
    1.定点表示;2.浮点表示; 3.1定点运算--算数移位,逻辑移位;3.2定点运算--加减; 溢出判断:一位符号位,数据最高进位和符号位进位采用异或电路判断;:二位符号位,运......
  • 面试官:vue2和vue3的区别有哪些?
    一、Vue3与Vue2区别详述1.生命周期对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上+“on”,功能上是类似的。不过有一点需要注意,Vue3在组合式API(Compo......
  • CSS 中可继承的属性有哪些
    继承就是指子节点默认使用父节点的样式属性。可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承。所有元素可继承:visibility和cursor。内联元......
  • StComputer2023概率密度和分布计算软件下载Probability density and distribution cal
    StComputer2023概率密度和分布计算软件下载Probabilitydensityanddistributioncalculationsoftwaredownload2023版更新记录: 2023EditionupdateRecord: 1.......
  • 计算机网络原理(三):运输层
    运输层服务多路复用与多路分解无连接运输:UDP可靠数据传输原理面向连接的运输:TCP拥塞控制原理及TCP拥塞控制 一、运输层服务1.1运输层服务运输层协议为运行在不......
  • 2022-2023-1 20221312 《计算机基础与程序设计》第五周学习总结
    作业信息班级链接:首页-2022-2023-1-计算机基础与程序设计-北京电子科技学院-班级博客-博客园(cnblogs.com)作业要求:2022-2023-1《计算机基础与程序设计》教学......
  • 2022-2023-1 计算机基础与程序设计 第5周学习总结
    2022-2023-120221424《计算机基础与程序设计》第5周学习总结作业信息这个作业属于哪个课程<班级的链接>(如2022-2023-1-计算机基础与程序设计)这个作业要求在哪......