VUE举例

<template>
  <div>count的值为：{{ count }}</div>
  <button @click="addCount">count+1</button>
  <button @click="addCountN(3, $event)">count+n</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(1)
const addCount = event => {
  count.value++
  if (count.value % 2 === 0) {
    event.target.style.border = '3px dotted'
  } else {
    event.target.style.border = '3px solid'
  }
}

const addCountN = (n, event) => {
  count.value += n
  if (count.value % 2 === 0) {
    event.target.style.border = '3px dotted'
  } else {
    event.target.style.border = '3px solid'
  }
}

</script>

引入watch机制

<template>
  <input type="text" v-model="cityName" />
</template>

<script setup>
import { watch, ref } from 'vue'
const cityName = ref('beijing')
watch(cityName, (count, prevCount) => {
  console.log(count, prevCount)
})
</script>

reactive({对象}）

<template>
  <div v-for="(value, name) in user" :key="name">
    属性名是：{{ name }} --- 属性值是：{{ value }}
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const user = reactive({ id: 11, name: '小明', gender: '男', })

</script>
<style></style>