vue3 学习--计算属性和侦听属性

计算属性 ----computed

它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref  **对象**。
import {  computed,ref } from "vue";    -----按需导入

const count = ref(1)
const plusOne = computed(() => count.value++)    -----因为需要返回一个值所以需要使用箭头函数返回

console.log(plusOne.value) // 2

plusOne.value++ // error    ------------计算属性不可直接改变



可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})
console.log(count.value) //2   ----直接打印调用get
plusOne.value = 1    --------修改调用set
console.log(count.value) // 0

侦听属性 ----watchEffect/watch

1. watchEffect

• 不需要手动传入依赖,可以一次监听多个值
• 每次初始化时会执行一次回调函数来自动获取依赖
• 无法获取到原值，只能得到变化后的值

import { reactive, watchEffect} from 'vue'

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。
const state = reactive({ count: 0, name: 'll' })
watchEffect(() => {
          console.log(state.count)   //0
          console.log(state.name)   //ll
  })
setTimeout(() => {
            state.count ++
            state.name = 'lsp'
          }, 1000)
 一秒以后 分别打印 1和lsp    

2. watch

• 需要手动传入依赖,可以一次监听多个值,但是写法复杂容易搞混
• 只有属性值改变才会运行
• 新旧值都可以获取

 let state = reactive({count: 0})
    let change = () => state.count++;
    watch(() => state.count, (oldVlaue, newValue) => {
      console.log(oldVlaue, newValue, '改变')
    })
setTimeout(() => {
            state.count ++
          }, 1000)
  一秒后打印 0,1,改变