响应式数据效果

		<div id="app"></div>
		<button onclick="fn()">change</button>
		<button onclick="look()">look</button>
		<script>
			
			var data={msg:"hello"};
			//1.获取元素
			//2.更新它的渲染属性: innerHTML  innerText
			var app=document.getElementById("app");
			app.innerHTML=data.msg;
			function fn(){
				//非响应式
				data.msg="666666";
				//响应式设计
				app.innerHTML=data.msg;
			}
			function look(){
				console.log(data.msg)
			}
			
		</script>	

app.innerHTML=data.msg;
data.msg="666666";
app节点对象的inneHTML并没有改变，即使改变了data.msg的值页面上显示的内容也不会改变这种就不具备响应式数据，除非再次操作app节点对象的inneHTML给其重新赋值页面上显示的内容才会改变。

响应式数据就是只要数据发生了改变就会重新刷新页面，改变页面的显示内容

响应式数据的设计

    <div id="app">
        <h1 id="title"></h1> 
	<p id="msg"></p>
    </div>
    <script>
        //利用 Object.defineProperty 自己实现双向数据绑定
        function MyVue(option) {
            let _myvm = {};// 这个对象会有传入函数的data对象的所有属性和属性值，就是把data对象的所有数据劫持了
            let arr = Object.keys(option.data);//获取data对象的所有成员名装入数组中，["title","msg"]
            // _myvum劫持data对象的所有数据
            for (let i = 0; i < arr.length; i++) {
                Object.defineProperty(_myvm, arr[i], {
                    set(v) {
                        //劫持，对_myvm对象的在数组中取出的arr[i]这个属性名做存值操作时就会执行set函数然后将存的值传入set函数中
                        option.data[arr[i]] = v;//该操作是存值操作，就将传入的值作为这个属性名的属性值，也就劫持了data对象的所有数据

                        //操作DOM节点刷新页面，响应-刷新页面
                        //获取节点，Vue框架底层采用了正则表达式匹配app这个模板下的所有节点然后做替换
                        let title = document.querySelector(option.el + " #title");
                        let msg = document.querySelector(option.el + " #msg");
                        title.innerHTML = _myvm["title"];//该操作是对_myvm对象取值操作，会执行get函数，get函数就会返回这个属性名的属性值然后刷新页面并显示在页面上
                        msg.innerHTML = _myvm["msg"];
                    },
                    get() {
                        return option.data[arr[i]];
                    }
                })
            }
            return _myvm;
        };
        let myvm = new MyVue({
            el: "#app",
            data: {
                title: "自己设计的响应式数据",
                msg: "myvue"
            }
        })
    </script>

如果内存中的数据变化了页面UI也会动态跟着刷新这种数据就是响应式数据。