vue3 new proxy 双向绑定 请给出示例

以下是一个使用Vue3中的新代理（Proxy）实现双向绑定的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 Proxy双向绑定示例</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message">
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello, Vue 3!'
        }
      }
    })

    app.mount('#app')

    const data = app._data

    const proxy = new Proxy(data, {
      set(target, key, value) {
        target[key] = value
        console.log(`Property "${key}" changed to "${value}"`)
        app._instance.update()
        return true
      }
    })

    app._data = proxy
  </script>
</body>
</html>

在上面的示例中，我们使用了Vue.createApp创建一个Vue实例，并将其挂载到id为“app”的元素上。然后我们获取该实例的_data对象，使用Proxy代理该对象，并在代理的set方法中进行双向绑定的实现。最后将代理对象重新赋值给Vue实例的_data属性，以实现双向绑定的效果。

vue3 new proxy 双向绑定 请给出示例

vue3 new proxy 双向绑定请给出示例