Vue 计算属性之姓名案例的三种实现方法

目录

• 一、姓名案例-插值语法实现
• 二、姓名案例-methods实现
• 三、姓名案例-计算属性实现
• 四、计算属性简写

效果：

一、姓名案例-插值语法实现

    
    
    
    



    姓：


    名：


    全名：{{firstName}}-{{lastName}}

二、姓名案例-methods实现

数据一发生变化，模板需要重新解析

    姓：


    名：


    全名：{{fullName()}}

三、姓名案例-计算属性实现

    
    
    
    



    姓：
    名：
    全名：{{fullName}}

 计算属性 1、定义：要用的属性不存在，要通过已有属性计算得来 2、原理：底层借助了objcet.defineproperty方法提供的 getter 和 setter

get 函数什么时候执行? 1、初次读取时会执行一次，再读取计算属性不会执行，因为有缓存 2、当依赖的数据发生改变时会被再次调用

优势 与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注 1、计算属性最终会出现在vm上，直接读取使用即可 2、如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生变化

四、计算属性简写

当只考虑读取，不考虑修改时，可以使用简写形式

    姓：


    名：


    全名：{{fullName}}

到此这篇关于Vue 计算属性之姓名案例的三种实现方法的文章就介绍到这了,更多相关Vue 计算属性 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！