Vue3页面实时更新数据

Vue3提供了一个叫做`reactive`的函数，可以将一个普通的JavaScript对象转化为响应式对象，从而实现页面实时更新数据。具体步骤如下：

1. 在Vue3中，通过`createApp`函数创建一个Vue实例：

   const app = Vue.createApp({
     // 应用程序的选项
   })

2. 在Vue实例中使用`reactive`函数将数据转化为响应式对象：

   const state = Vue.reactive({
     count: 0
   })

3. 在Vue实例中使用这个响应式对象：

   app.mount('#app')

4. 在页面中直接使用响应式对象的属性：

   <div id="app">
     <p>{{ state.count }}</p>
   </div>

5. 在JavaScript代码中修改响应式对象的属性值：

   state.count++

这样就可以实现页面实时更新数据了。当修改响应式对象的属性时，页面中使用这个属性的地方也会自动更新。