vue数据双向绑定原理和实例Vue的双向数据绑定的原理主要是通过 Object对象的defineProperty属性，重

1、原理

Vue的双向数据绑定的原理主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。

原理图：

2、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
    <form>
        <input type="text" v-model="number">
        <button type="button" @click="add">增加</button>
    </form>
    <h3>{{number}}</h3>
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data: {
            number:0
        },
        methods:{
            add: function(){
                this.number++;
            }
        }
    });
</script>
</html>