vue:计算属性和监听器

前言

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板 过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

上面例子的计算属性改造：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

个人理解

计算属性 computed是：return的值发生变化，计算的值跟着变

监听器 watch是：监听的对象发生变化，执行对应的函数

应用场景

具有以来关系的数据监听

如下：

结果：

计算属性 computed

<template>
    <div>
        数组list的长度为：{{length}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
               list:[1,1,1]
            }
        },
        computed: {
            length() {
                return this.list.length 
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

需要特别注意并记住的是：

计算属性有缓存性，如果值没有变化，则页面不会重新渲染，这是计算属性的一个优势。

监听器 watch

<template>
  <div>
    <h3>计算属性 computed：</h3>
    <div>数组list的长度为：{{length}}</div>
    <h3>监听器 watch：</h3>
    <div>监听到数组list的长度为：{{listLength}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 1, 1],
      listLength: 0
    };
  },
  computed: {
    length() {
      return this.list.length;
    }
  },
  watch: {
    // 下面这种默认写法的监听器，初始化时不执行
    list(newValue, oldValue) {
      this.listLength = newValue.length;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

一、上述代码和页面中有一个问题：
我们写了一个监听器，用来监听数组list长度的变化，但是很不幸我们看到页面上所显示的listLength依旧是初始值0。
这是为什么呢?
这里就是我们需要注意的一个问题：
在我们使用watch即监听器来实现功能的时候，如果不加特别的声明，它表示所监听的对象变化之后才会执行，也就是说它一开始不会执行，所以listLength没有变化。

二、如何解决上述问题呢？
需要使用另一个写法，即带选项的watch，并且把immediate属性置为true
我们使用vscode snippets插件用vwatch-option，快捷生成的watch默认就是true

介绍一下带选项watch的两个属性:
immediate：
设置为true，会立即执行一次 immediate意思：立即的
deep:
比如一个数组，数组里面的每个元素都是对象，有各种属性，普通监听器是不会监听这个属性变化的，因为消耗很大，当我们需要监听这些属性的时候，就需要使用这种带选项的监听器，并且将deep即深度监听设置为true

<template>
  <div>
    <h3>计算属性 computed：</h3>
    <div>数组list的长度为：{{length}}</div>
    <h3>监听器 watch：</h3>
    <div>监听到数组list的长度为：{{listLength}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 1, 1],
      listLength: 0
    };
  },
  computed: {
    length() {
      return this.list.length;
    }
  },
  /* watch: {
    // 下面这种默认写法的监听器，初始化时不执行
    list(newValue, oldValue) {
      this.listLength = newValue.length;
    }
  }, */
  watch: {
    list: {
      immediate: true,// 设置为true，会立即执行一次  immediate意思：立即的
      deep: true,// 深度监听
      handler(newValue, oldValue) {
        this.listLength = newValue.length;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

当immediate置为true时，就会立即执行，我们来看结果

结尾

我是圆圆，如果我的文章对你的学习成长有所帮助，欢迎 点 赞 👍 支持，您的 点 赞 👍 支持是我进行创作和分享的动力！

如果有问题可以留言评论或者私信我，我都会一一解答~笔芯🤞