Vue3 计算属性和侦听器

计算属性computed函数

computed函数调用时, 要接收一个处理函数, 处理函数中, 需要返回计算属性的值

<template>
  <div>我今年的年纪 <input type="text" v-model="age" /></div>
  <div>我明年的年龄 {{ nextAge }}</div>
  <div>我后年的年龄 <input type="text" v-model="nextAge2" /></div>
</template>

<script setup>
import { computed, ref } from 'vue'
const age = ref(10)
// 不带set的计算属性
const nextAge = computed(() => {
  return +age.value + 1
})

// 带set的计算属性
const nextAge2 = computed({
  get() {
    return +age.value + 2
  },
  set(value) {
    age.value = value - 2
  },
})

// 计算属性可以传参吗？ 答案是可以 
<div>任意年龄 {{ nextAge3(100) }}</div>

const nextAge3 = computed(() => {
  return val => {
    return val + Number(age.value)
  }
})
</script>

计算属性例子

<h1>{{message}}</h1>
<p> {{testMethod}}</p>
<p >{{testMethod()}}</p>
<p >{{testMethod()}}</p>
<p >{{testComputed}}</p>
<p >{{testComputed}}</p>
<p >{{testComputed2(1, 2)}}</p>
<p >{{testComputed2(1, 2)}}</p>
<p >{{testComputed2(3, 4)}}</p>

<script setup>
message: '我是data数据'

computed: {
  testComputed() {
    console.log('计算属性');
    return this.message + '现在我用的是computed'
  },
  testComputed2() {
      console.log(1111);
      // 计算属性也是可以传参的， 也是有缓存的 - 上面打印111只有一次
      return function(a, b) {
        return a + b
      }
    }
},

testMethod() {
  console.log('方法');
    return this.message + '现在我用的是methods'
}
<script>

侦听器watch函数

watch监视, 接收三个参数
1. 参数1: 监视的数据源
2. 参数2: 回调函数
3. 参数3: 额外的配置 -- 常用配置：立即执行，深度监听

// 监听单个ref
const money = ref(100)
watch(money, (value, oldValue) => {
  console.log(value)
})

// 监听多个ref
const money = ref(100)
const count = ref(0)
watch([money, count], (value) => {
  console.log(value)
})
watch([money, count], ([v1,v2]) => {
  console.log(v1,v2)
})
watch([money, count], ([v1,v2], [prevV1, prevV2]) => {
  console.log(v1,v2,prevV1, prevV2)
})

// 监听ref复杂数据 -- 如果是reactive就不用deep，侦听器会自动启用深层模式
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  user,
  (value) => {
    console.log('user变化了', value)
  },
  {
    // 深度监听，，，当ref的值是一个复杂数据类型，需要深度监听
    deep: true,
    immediate: true
  }
)

// 监听对象的某个属性的变化
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  () => user.value.name,
  (value) => {
    console.log(value)
  }
)