vue实现数据双向绑定之入门版本

vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的javascript对象。而当你修改时，视图会进行更新。这使得状态管理非常简单直接。

1. vue实现数据双向绑定的体现

新建index.html文档

  <!-- 数据双向绑定渲染的表现 -->
    <div id="app">
        <input type="text" v-model="msg"/> 
        {{msg}} 
    </div>
    <!-- 状态的改变会引起视图的二次渲染 -->

 	const app=new Vue({
        el:'#app',//表示elements，即元素，在这个元素内部使用vue的语法
        data:{//设置初始化的数据，类似于module的功能，即数据源
            msg:'hello world'//
        }
    })

结合MVVM理解vue数据双向绑定的体现
初始化的model通过viewmodel将数据传给view,view视图含有主动性（事件行为），vue通过v-model这个指令（内部含有一层机制，只要你正在输入，我就会获取到你的数据）将数据交viewmodel，然后viewmodel就会改变数据源（即model，告诉model你改变了），然后model会告诉view，我已经改变，你也跟着变就行了

2. vue数据双向绑定原理

	let Book={
        name:'js权威指南'
    };
    let val;
    console.log(Book.name);
    Object.defineProperty(Book,'name',{
        set(value){
          //  val = '《'+value+'》';
          	val = value;
        },
        get(){
        //数据劫持，set和get都可以进行修改
        //若Book为一个空对象，则相当于新添加了属性，同时劫持了属性
            return  '《' + va l+ ‘》’ ;
        }
    })
    Book.name='html权威指南';//实际调用的是set方法
    console.log(Book.name);

双向绑定的原理

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

index.html

  <!-- 数据双向绑定渲染的表现 -->
    <div id="app">
        <input type="text" v-model="msg"/> 
        {{msg}} 
    </div>
    <!-- 状态的改变会引起视图的二次渲染 -->

 	const app=new Vue({
        el:'#app',//表示elements，即元素，在这个元素内部使用vue的语法
        data:{//设置初始化的数据，类似于module的功能，即数据源
            msg:'hello world'//
        }
    })

借助index.html文档再次解释双向绑定原理
Obeserver 监听器 劫持并监听所有属性，在这里劫持并监听了v-model这个属性，如果这个值有变动了就去通知订阅者{{msg}}。
v-model也是一个指令，扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
{{msg}}表示视图 Watcher 就是一个订阅者，接收到变化之后，就会执行相应的函数即双大括号里的语法，从而更新相应的视图