计算属性computed

目录

1.计算属性中的getter

2.计算属性中的setter

3.计算属性简写形式

4.计算属性与methods中方法的对比

5.计算属性与侦听器的对比

---

1.计算属性中的getter

计算属性 : 要使用的数据不存在,需要通过已有的属性计算得到.

get函数中的返回值,作为计算属性的属性值.

get函数什么时候调用: 

  1. 初次页面渲染时调用

  2. 当get函数中依赖的数据发生改变时调用

 示例代码:

<div id="app">
    <h1>{{getValue}}</h1>
    <h1>{{getValue}}</h1>
    <h1>{{num}}</h1>
    <!--    页面显示 : 原数据 原数据 1-->
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            value:'原数据',
            num: 0
        },
        computed: {
            getValue: {
                // get函数第一次渲染页面调用,
                // get函数所依赖的数据发生改变时调用, 数据不发生改变直接用缓存数据
                get: function () {
                    this.num += 1
                    return this.value
                },
             
            }
        }
    })
   
</script>

注意 : 以上代码中,虽然多次使用了getValue计算属性,但是get函数只执行了一次,其他几次都是直接从缓存中获取的数据,所以num显示结果为1

 2.计算属性中的setter

set函数什么时候调用 :     

   计算属性被修改时调用

  示例代码:

<div id="app">
    <button @click="getValue=333">点击更改数据</button>
    <h1>{{getValue}}</h1>
    <h1>{{getValue}}</h1>
    <h1>{{num}}</h1>
<!--    初次页面显示 : 原数据 原数据 1-->
<!--    点击按钮后  : 333 333 2-->
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            value:'原数据',
            num: 0
        },
        computed: {
            getValue: {
                // get函数第一次渲染页面调用,
                // get函数所依赖的数据发生改变时调用, 数据不发生改变直接用缓存数据
                get: function () {
                    this.num +=1
                    return this.value
                },
                // 计算属性(getValue)被修改时调用
                set: function (params) {
                    this.value = params
                }
            }
        }
    })

</script>

分析 : 因为点击按钮时,修改了计算属性(getValue)的值,set函数被调用, get函数所依赖的数据发生了改变,get函数再次被调用,num值再次加1,value值被改为333, 所以页面显示最新的数据 :333   333  2

 3.计算属性简写形式

如果我们只是使用计算属性,不对计算属性进行修改,可以不用写set函数,只写get函数,

简写方式为: 计算属性名( ){ }

 简写方式如下:

<div id="app">
    <h1>姓: {{firstName}}</h1>
    <h1>名: {{lastName}}</h1>
    <h1>全名: {{fullName}}</h1>
</div>
<script>
     new Vue({
        el: '#app',
        data: {
            firstName:'张',
            lastName: '三'
        },
        // computed: {
        //     fullName:{                // 只写get函数,不写set函数,可以进一步简写如下
        //         get:function(){
        //             return this.firstName + '-' + this.lastName
        //         }
        //     }
        // },
        computed: {
            fullName(){               // 此时的计算属性,就是只有get函数,没有配置set函数
                return this.firstName + '-' + this.lastName
            }
        }
    })

</script>

4.计算属性与methods的对比

1. 计算属性必须有返回值

    methods中的方法可以有返回值,也可以没有

2. 计算属性有缓存,不会每次调用都执行

   methods中的方法没有缓存,方法每次调用都会执行

5.计算属性与侦听器的对比 

计算属性 : 
   1.1 计算属性的get函数中必须有返回值
   1.2 计算属性有缓存
   1.3 计算属性名称可以自定义
   1.4 计算属性不能处理异步任务,只能进行数据运算
侦听器:   
  1.1 侦听属性返回值可以有可以没有
  1.2 侦听属性没有缓存
  1.3 侦听属性的函数名称必须是data中的已有属性
  1.4 侦听属性可以用来处理异步任务,消耗性能的需求,如ajax请求等

官网地址:计算属性和侦听器 — Vue.js