Прослушиватель Vue3, вычисляемое свойство

1. Отслеживайте и вычисляйте атрибуты
1. наблюдайте

watch (
   source,// 必传，要监听的数据
   callback // 必传，侦听到变化后要执行的回调函数
   // options //可选，一些侦听函数
)

2. Существует два способа создания вычисляемого: принять функцию- получатель , вернуть объект ref , доступный только для чтения , и принять объекты с функциями get и set для создания объекта ref
с возможностью записи. 3. watchEffect — это новая функция прослушивания Vue3 , которая может упростить поведение watch.

<template>
  <div>
    <p><input type="number" v-model="count"></p>
    <p><input type="number" v-model="plusOne"></p>
  </div>
</template>

<script setup>
import {ref, computed, watchEffect, watch} from 'vue';
const count = ref(0);

//创建一个只读的计算属性 ref;
// const plusOne = computed (() => count.value + 1)
// 创建一个可写的计算属性 ref
const plusOne = computed({
   get: () => count.value + 1,
   set: (val) => {
      count.value = val - 1
   }
  })
  //定义监听，使用同上 //...some code else
  watchEffect(() => console.log(count.value, "watchEffect"));
  watch((count, (val, oldval)) => {
       console.log(val, oldval, "watch")
  }, {immediate: true})
  </script>
  
  <style scoped>
div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

input {
  margin: 10px;
}
</style>

Разница между watchEffect и watch 1. watch ленивое выполнение, то есть оно будет выполняться только при изменении отслеживаемого значения
, но watchEffect отличается. WatchEffect будет выполняться каждый раз, когда загружается код (игнорируйте конфигурацию третьего параметра watch, и он может быть выполнен немедленно, если вы измените элемент конфигурации). Свойства в объекте не разрешены, если только вы не используете функцию для его преобразования. следить за свойствами
объекта .