vue3 ，怎么修改页面变量

要修改Vue3页面变量，可以使用Vue3提供的响应式数据来实现。在Vue3中，我们可以使用`ref`或`reactive`函数来定义响应式数据。

1. 使用ref函数定义响应式数据

`ref`函数可以将一个普通变量转换为响应式数据。当变量的值发生变化时，页面中使用该变量的部分也会自动更新。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue'

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

    function increment() {
      count.value++
    }

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

在上面的代码中，我们使用`ref`函数定义了一个名为`count`的响应式数据，并将其初始值设为0。在页面中使用`{{ count }}`来显示变量的值。当用户点击按钮时，调用`increment`函数来修改`count`的值，从而更新页面。

2. 使用reactive函数定义响应式数据

`reactive`函数可以将一个普通对象转换为响应式数据。当对象的属性值发生变化时，页面中使用该属性的部分也会自动更新。

<template>
  <div>
    <p>{{ user.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

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

    function updateName() {
      user.name = 'Bob'
    }

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

在上面的代码中，我们使用`reactive`函数定义了一个名为`user`的响应式数据，其中包含`name`和`age`两个属性。在页面中使用`{{ user.name }}`来显示`name`属性的值。当用户点击按钮时，调用`updateName`函数来修改`name`属性的值，从而更新页面。