详解vue2.0监听属性的使用心得及搭配计算属性的使用

下面是关于"详解vue2.0监听属性的使用心得及搭配计算属性的使用"的完整攻略。

1、监听属性的使用心得

Vue提供了一种便捷的方式来监听数据的变化：监听属性(即 watch 方法)。我们可以在 watch 中观察数据的变化，并在数据变化时执行指定的函数。以下是 watch 方法的语法格式:

watch: {
  数据名称: function(newValue, oldValue) {
    //执行指定的逻辑
  }
}

watch 方法可以监听到数据的变化，并在变化时执行指定的逻辑，常用于对数据的合法性校验、复杂计算、接口请求等场景。下面是一个示例说明：

<script>
export default {
    data () {
        return {
            num: 1
        }
    },
    watch: {
        num: function (newVal, oldVal) {
            console.log(`num的新值为${newVal}，旧值为${oldVal}`);
        }
    }
}
</script>

在上面的示例中，我们监听了 num 数据的变化。当 num 发生任何变化时，都会在控制台打印出新值和旧值。可以通过控制台的信息，方便地了解数据的变化情况。

此外，还经常搭配使用计算属性进行更复杂的计算或处理。

2、计算属性的使用技巧

计算属性是在模板的表达式中使用，对数据进行复杂的计算和处理。计算属性的语法格式如下：

computed: {
    计算属性名称: function() {
        return //计算逻辑
    }
}

计算属性可以使用缓存，只有依赖的数据发生改变时，才会进行计算。以下是一个示例说明：

<template>
  <div>{{ 全名 }}</div>
</template>

<script>
export default {
  data () {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    全名 () {
      return this.firstName + this.lastName
    }
  }
}
</script>

在上面的示例中，我们使用计算属性 full 返回 "firstName" 和 "lastName" 的合并值。当任一依赖项发生变化时，computed 计算属性会重新计算。

除此之外，计算属性还可以进行缓存。将返回的结果缓存在计算属性中，避免了重复计算的问题。

<script>
export default {
    data () {
        return {
            list: [1, 2, 3, 4]
        }
    },
    computed: {
        evenList: function() {
            //缓存，避免重复计算
            return this.list.filter(function(item) {
                return item % 2 === 0;
            });
        }
    }
}
</script>

在做数据的过滤时，如果需要多次使用，可以使用计算属性，避免了重复计算的情况。

综上所述，监听属性和计算属性可以很好地配合使用，对于数据处理和显示来说非常的方便。