vue中computed的详细讲解

vue中computed的详细讲解

1.定义

   computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

2.用法

   一般情况下，computed默认使用的是getter属性

3.computed的响应式依赖(缓存)

   1. computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性**fullName**，它依赖了**firstName**和**lastName**这两个属性，只要它们其中一个属性变化，**fullName**就会重新执行。
    2.computed计算属性会被缓存，在下面代码中使用了两次**fullName**，但在控制台只输出了一次 “这是fullName”。

<template><div><div>
      姓：<inputtype="text"v-model="firstName"/></div><div>
      名：<inputtype="text"v-model="lastName"/></div><!-- 调用两次fullName --><div>姓名：{{ fullName }}</div><div>姓名：{{ fullName }}</div></div></template><script>exportdefault{data(){return{
      firstName:"张",
      lastName:"三",};},
  computed:{fullName(){
        console.log("这是fullName");returnthis.firstName +this.lastName;}}};</script>

4.应用场景

   当一个数据受多个数据影响时，可以使用computed
    1.本组件计算
    2.计算props的值
    3.计算vuex的state或者getters值的变化

参考：https://cn.vuejs.org/v2/guide/computed.html
https://segmentfault.com/a/1190000012948175