在Vue.js开发过程中，数据处理是一个很重要的部分，尤其是Vue是一个MVVM的框架，也就是Vue经常谈到的双向数据绑定。双向数据绑定的大概原理就是：当数据发生改变变化的时候，视图也跟着发生变化；当视图发生改变变化的时候，数据同时跟着发生变化。
Vue.js是采用数据劫持结合发布者-订阅者模式的方式，是根据Object.defineProperty() 这个方法重新定义对象获取属性值和设置属性值的操作来实现，也就是劫持各个属性的setter和getter，在数据源的数据改变的时候发布消息给订阅者，然后触发相应的监听回调。
举一个简单的实例：
<div id="mvvm-app">
<input type="text" v-model=“title”>
{{ title }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
title: 'hello Vue!’
}
});
</script>
Vue实现数据的双向绑定，通过输入框的例子来做实例，整个实现过程可以分为以下几步：
1、首先把输入框以及文本节点与 data 中的数据绑定；
2、然后在输入框内容变化时，data 中的数据同步变化。即 view => model 的变化；
3、最后在data中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。
实现一个简单的数据双向绑定的方法： 使用Object.defineProperty()来定义属性的set方法，属性被赋值的时候，修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值，即可实现简单的数据双向绑定。
再举个栗子，具体内容如下;
<template v-slot:content>
<div class="content">
<a-row class="timePicker arow">
<a-col :span="8">
<span class="title">任务名称</span>
<a-input placeholder="在这里输入"
class="rightPart"
v-model="taskName" />
</a-col>
</div>
</template>
data() {
return {
taskName: "",
};
},
methods: {
//获取任务名字的方法
getName(e) {
let val = e.target.value.trim();
this.taskName = val; //给taskname赋值
},
}
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
三掌柜的新浪微博：
