Vue.js双向绑定原理解析

Vue.js双向绑定原理解析

Vue.js是一款基于MVVM模式的前端框架，在其特性中最为突出的便是双向数据绑定。本文将通过代码分析来解释Vue.js双向绑定的原理。

在Vue.js中，我们将数据绑定在DOM element上，如下所示：

<div id="app">
{{ message }}
</div>

Vue实例中，该元素可以通过el属性指定：

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

在vm实例化后，我们可以通过以下方式修改message的值：

vm.message = '你好，Vue！'

在控制台输入vm.$el.innerHTML，可以发现message被修改之后，DOM element已经被自动更新。

这就是Vue.js双向数据绑定的功效，但是具体原理是什么？其实，原理是在set()方法中实现的：

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

vm.message = '你好，Vue！' // 相当于调用了vm.$data.message = '你好，Vue！'，因为vm.message被代理到了vm.$data上

var data = vm.$data;

var message = 'Hello, Vue!'; // message为旧值

Object.defineProperty(data, 'message', {
get: function () {
return message;
},
set: function (newVal) {
console.log('数据被更新了：' + message + ' => ' + newVal);
message = newVal;
}
});

data.message = '你好，Vue！'

在set()方法中，我们使用了Object.defineProperty()来监听数据变化。当修改了数据之后，set()方法中的回调函数便被调用，将新值赋给原值，并在控制台输出提示信息。

Vue.js双向数据绑定就是通过数据劫持（Object.defineProperty()）来实现的。在代理数据时，我们把每个数据（比如message）都代理到了vm.$data上。当修改vm.message的值时，其实是调用了vm.$data.message的set()方法，从而实现了数据的更新和自动同步。

至此，Vue.js双向数据绑定的原理即被解析明了。