vue双向数据绑定原理和示列

Vue的双向数据绑定是通过数据劫持和发布-订阅模式实现的。

数据劫持：Vue通过Object.defineProperty()方法来劫持数据的setter和getter方法，当数据发生变化时，会触发setter方法，从而通知订阅者更新视图。

发布-订阅模式：Vue通过一个事件中心来实现发布-订阅模式，当数据发生变化时，会通知订阅者更新视图。

示例：

HTML代码：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

JavaScript代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

在上面的代码中，我们使用了v-model指令来实现双向数据绑定。当用户在输入框中输入内容时，数据会自动更新，同时视图也会自动更新。这是因为Vue在内部使用了数据劫持和发布-订阅模式来实现双向数据绑定。