Vue3 监听属性学习笔记

在Vue3中，可以通过定义监听属性来实现对数据的监听和触发响应。在本篇学习笔记中，我们将介绍Vue3中监听属性的定义方式及其使用方法，并且会结合实例进行演示。

定义监听属性

在Vue3中，我们可以使用 ref 或 reactive 函数来定义监听属性，其中 ref 用于定义基本类型数据的监听属性，而 reactive 则用于定义对象类型数据的监听属性。

例如，我们可以通过以下代码来定义一个基本类型数据的监听属性：

Copy Code
import { ref } from 'vue'

const count = ref(0)

上述代码中，我们通过 ref 函数定义了一个名为 count 的变量作为监听属性，并将其初始值设置为 0。

同样地，我们也可以通过以下代码来定义一个对象类型数据的监听属性：

Copy Code
import { reactive } from 'vue'

const user = reactive({
  name: 'Tom',
  age: 18
})

上述代码中，我们通过 reactive 函数定义了一个名为 user 的对象，并将其属性 name 和 age 分别设置为字符串 'Tom' 和数字 18。在这个过程中，我们可以看到，通过 reactive 函数定义的对象类型数据也可以被设置为监听属性。

使用监听属性

当我们定义好了监听属性后，我们可以在模板中直接使用它们，并且可以通过特定的方法来修改监听属性的值。

例如，我们可以通过以下代码在模板中使用 count 变量：

Copy Code
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increase">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increase = () => {
      count.value++
    }

    return {
      count,
      increase
    }
  }
}
</script>

上述代码中，我们在模板中使用了 count 变量，并将其值显示在了 <p> 标签中。同时，我们也定义了一个名为 increase 的方法，在点击按钮时触发来增加 count 变量的值。注意到，在修改 count 变量的值时，我们需要通过 count.value 来访问它的实际值。

同样地，我们也可以通过以下代码在模板中使用 user 对象：

Copy Code
<template>
  <div>
    <p>{{ user.name }}, {{ user.age }}</p>
    <button @click="updateUser">更新</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({
      name: 'Tom',
      age: 18
    })

    const updateUser = () => {
      user.name = 'Jerry'
      user.age = 20
    }

    return {
      user,
      updateUser
    }
  }
}
</script>

上述代码中，我们在模板中使用了 user 对象，并同时将其属性 name 和 age 的值显示在了 <p> 标签中。同时，我们也定义了一个名为 updateUser 的方法，在点击按钮时触发来更新 user 对象的属性值。

实例演示

接下来，我们将结合一个小实例来演示Vue3中监听属性的使用过程。在本实例中，我们将创建一个简单的计数器，通过监听属性来实现对计数器数值的监听和响应。具体实现代码如下：

Copy Code
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increase">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increase = () => {
      count.value++
    }

    return {
      count,
      increase
    }
  }
}
</script>

在上述代码中，我们通过 ref 函数定义了一个 count 变量作为监听属性，并将其初始值设置为 0。同时，我们还定义了一个 increase 方法，在点击按钮时触发来增加 count 变量的值。

通过上述实例，我们可以看到，在Vue3中使用监听属性非常方便，且操作起来也非常简单。