【vue】vue中的计算属性和监听属性详解

计算属性和侦听器

计算属性

1.计算属性

用来描述依赖响应式状态的复杂逻辑

<p>Has published books:p>
 
<span>{{publishedBooksMessage > 0 ? 'Yes' : 'No' }}span>

  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 计算属性的 getter，publishedBooksMessage的内容为yes或者no
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

意义：尝试修改data中的books数组的值，你将看到publishedBooksMessage如何响应的改变，可以像绑定普通属性一样，将计算属性的数据值绑定到模板中，Vue 知道 vm.publishedBookMessage 依赖于 vm.author.books，因此当 vm.author.books 发生改变时，所有依赖 vm.publishedBookMessage 绑定也会更新。而且最妙的是我们已经声明的方式创建了这个依赖关系：计算属性的 getter 函数没有副作用，这使得更易于测试和理解。

计算属性和缓存

计算属性使基于其响应式依赖被缓存，计算属性在相关响应式依赖发生改变时他们重新求值，也就是author.books不改变，多次访问publishedBookMessage 计算属性会立即返回之前的计算结果，而不用重复执行 getter 函数。

它所依赖的属性值发生变化，那么我们的computed才会重新计算

这也同样意味着下面的计算属性将不再更新，因为 Date.now () 不是响应式依赖：

computed: {
  now() {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。如果你不希望有缓存，请用 method方法 来替代。

计算属性默认只有getter，不过需要时也可以提供一个setter：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

再运行 this.fullName = ‘John Doe’ 时，setter 会被调用而 this.firstName 和 this.lastName 会随之更新。或者如下：

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

注意：
1）：getter中不要进行异步请求或者更改dom
2）：避免直接修改计算属性

总结： computed（多个变量计算出一个结果）
计算属性：依赖于其他属性，并且有缓存，只有它所依赖的属性值发生变化，那么我们的computed才会重新计算，并且支持同步

侦听器

在每次响应式属性发生变化时触发一个函数。当需要数据变化时执行异步或开销较大的操作时，使用watch属性

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  p>
  <p>{{ answer }}p>
div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js">script>
<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
    },
    watch: {
      // 每当 question 改变时，getAnswer这个函数就会执行
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = 'Thinking...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      }
    }
  }).mount('#watch-example')
script>

watch 选项也支持把键设置成用 . 分隔的路径：

 watch: {
    // 注意：只能是简单的路径，不支持表达式。
    'some.nested.key'(newValue) {
      // ...
    }
  }

深层监听器：

深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。

 watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true,
       // 强制立即执行回调,
      immediate: true
    }
  }
 

即时回调：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

this.$watch()

如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。它还允许你提前停止该侦听器。

 created() {
    this.$watch('question', (newQuestion) => {
      // ...
    })
  }

停止侦听器

const unwatch = this.$watch('foo', callback)

// ...当该侦听器不再需要时
unwatch()

计算属性 vs 侦听器

Vue 提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动：侦听属性。有一些数据需要随着其它数据变动而变动时,使用计算属性而不是命令式的 watch 回调。

<div id="demo">{{ fullName }}div>
<script>
// watch
const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#demo')



//  compute
const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}).mount('#demo')
script>

总结: 计算属性和侦听器选择的区别：
1.选择计算属性：有一些数据需要随着其他数据变动而变动
2.选择侦听器：当需要在数据变化时执行异步或者开销比较大的操作时
3.侦听属性：用来观察和响应当前活动的实例上的数据变动