计算属性computed

计算属性来描述依赖响应式状态的复杂逻辑
使用时需要引入 computed

  1. <template>
  2.   <p>Has published books:</p>
  3.   <span>{{ publishedBooksMessage }}</span>
  4. </template>
  6. <script setup>
  7. import { reactive, computed } from 'vue'
  8. const author = reactive({
  9.   name: 'John Doe',
  10.   books: [
  11.     'Vue 2 - Advanced Guide',
  12.     'Vue 3 - Basic Guide'
  13.   ]
  14. })
  16. // 返回值为一个计算属性 ref
  17. const publishedBooksMessage = computed(() => {
  18.   return author.books.length > 0 ? 'Yes' : 'No'
  19. })
  20. </script>

侦听器 watch

watch 的第一个参数可以是不同形式的“来源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter函数、或多个来源组成的数组： 

  1. //首先要引入 watch
  2. import { ref, watch } from 'vue'
  3. const x = ref(0)
  4. const y = ref(0)
  6. // 单个 ref
  7. watch(x, (newX) => {
  8.   console.log(`x is ${newX}`)
  9. })
  11. // getter 函数
  12. watch(
  13.   () => x.value + y.value,
  14.   (sum) => {
  15.     console.log(`sum of x + y is: ${sum}`)
  16.   }
  17. )
  19. // 多个来源组成的数组
  20. watch([x, () => y.value], ([newX, newY]) => {
  21.   console.log(`x is ${newX} and y is ${newY}`)
  22. })

注意，你不能侦听响应式对象的 property，例如: 

  1. const obj = reactive({ count: 0 })
  3. // 这不起作用，因为你是向 watch() 传入了一个 number
  4. watch(obj.count, (count) => {
  5.   console.log(`count is: ${count}`)
  6. })

用 getter 函数 可以解决这个问题 

  1. // 提供一个 getter 函数
  2. watch(
  3.   () => obj.count,
  4.   (count) => {
  5.     console.log(`count is: ${count}`)
  6.   }
  7. )