• Vue04/ 计算属性computed 介绍和完整写法 get( ) set( )


    计算属性

    Vue computed计算属性

    1.计算属性作用: 解决渲染数据的代码 冗(rong)余 问题

    某些数据在渲染的时候 可能要经过一些复杂逻辑的计算处理

    2.计算属性的语法: 在vue实列的computed 对象中声明一个函数

    这个函数名就是计算属性的属性名

    在这个函数中 return 返回值 (是计算属性的属性值)

    3.注意点

    这个函数一定要写在 vue实列的 computed 对象中

    这个函数一定要有返回值 否则计算属性无法渲染

    4.计算属性特点及原理介绍

    a 计算属性本质是一个函数

    b 计算属性的值就是函数的返回值

    c 缓存机制

    (1) 计算属性在第一次使用时 会执行一次函数体 之后就会将返回值缓存起来

    (2) 下一次使用计算属性的时候 不会执行这个函数 而是直接从缓存中读取

    (3) 只有当计算属性中的数据发生变化时 这个函数才会执行一次

    计算属性的基本使用

    计算属性: 一个特殊顺序 值依赖于另外一些数据动态计算出来

    计算属性特点: 函数内使用的变量改变 重新计算结果 返回

    计算属性和函数的区别: 计算属性对比函数最大的优势在于计算属性有缓存

    计算属性访问方法: 由于计算属性也是属性,可以直接通过 this.计算属性名 访问

    作用:  计算属性依赖的数据如果发生变化 计算属性也只会计算一次后缓存 后续访问都从缓存中读取

    注意:

    1.计算属性必须定义在 computend 节点中

    2. 计算属性必须是一个 函数 , 计算属性必须有返回值

    3. 计算属性不能被当做方法调用 要作为属性来用

    4.计算属性也是属性 , 不要跟data内属性 重名

    计算属性缓存问题

    计算属性: 缓存

    计算属性只要计算了一次 就会把结果缓存起来 以后多次使用计算属性 直接使用缓存的结果 只会计算一次

    计算属性依赖的属性一旦发生了改变 计算属性会重新计算一次 并且缓存

    计算属性完整写法

    语法:

    1. computed:{
    2. 计算属性名:{
    3. get(){ },
    4. set(){ }
    5. }
    6. }

    get() : 如果要访问计算属性 会自动执行 get

    set(): 如果要修改计算属性 会自动执行 set

    注意: 1. 计算属性默认情况下只能获取 不能修改 , 如果希望计算属性可以修改 就需要使用 set写法

             2. 计算属性默认由部分组成 get和set 分别用来存储计算顺序和设置计算属性

  • 相关阅读:
    Nginx禁用TLS 1.0和TLS 1.1
    【面试心得】WebBench 整理
    如何系统的学习Python——Python的基本语法
    关于Linux中如何使用 systemd-run创建临时Cgroup来限制ad-hoc的资源消耗
    python线程和进程
    项目管理逻辑:项目经理如何掌控项目生命周期, 才能避免身心俱疲?
    4. 寻找两个正序数组的中位数
    51单片机:实现CSGO中C4下包功能(附功能实现视频和代码详解)
    1. 【力扣】银行账户概要 II
    DP53 取数游戏
  • 原文地址:https://blog.csdn.net/m0_64494670/article/details/127598519