vue:计算属性和监听器

你的名字 2023-07-07 11:11 3阅读 0赞

# 前言 #

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

<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是：**监听的对象发生变化，执行对应的函数**

# 应用场景 #

**具有以来关系的数据监听**

如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]  
结果：  
![在这里插入图片描述][20200304212659883.png]

# 计算属性 `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>

![在这里插入图片描述][20200222201704590.png]  
**需要特别注意并记住的是：**

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

# 监听器 `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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]  
**一、上述代码和页面中有一个问题：**  
我们写了一个监听器，用来监听数组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时，就会立即执行，我们来看结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304212646513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[20200304212659883.png]: https://img-blog.csdnimg.cn/20200304212659883.png
[20200222201704590.png]: https://img-blog.csdnimg.cn/20200222201704590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200222203407290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020022221003311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70