vue2.x响应式数据/双向绑定原理

Vue 数据双向绑定：

Vue是以恶搞mvvm框架，即数据双向绑定框架，当数据发生变化的时候，试图也变化；当视图发生变化的时候，数据也变化。

数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。

简述

1. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
2. 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
3. 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
   
   另外每个属性都对应有一个 Watcher，它有什么作用？
   1.当 data 选项中 a.b 值发生改变时，就会触发 setter 方法，会通知到对应的 watcher。
4. 之后再通知指令去调用 update 方法，由于指令是 DOM 的封装，所在在 update 时其实就是调用了原生 javascript 的 DOM 方法来更新界面。

代码大致执行过程

1、实例化对象
2、实例化过程中，代码中重要的点是遍历data选项中的每个key
3、在defineProperty中添加上get方法
4、在set方法中添加 界面更新的函数调用 【注意: set方法触发后才是调用，此时只是添加set方法】
5、解析DOM 【即将data中的值，先更新到界面中】
6、并给每个key对应上 更新方法 存储在 watcher 中

之后，只要数据发生改变，此时就是触发了set方法，再从watcher中找到key对应的方法进行更新页面。

写法

在初始化的时候，把所有的变量都设定好，如果没有值，也可以用undefined或null占位

<div id="app">
　<p>{{a}}</p>
　<p>{{b}}</p>
</div>
<script>
var vm = new Vue({
　 el : '#app'，
　 data : {
　 a:1
　 }});
　 vm.$data.b = 2;
</script>

组件类型的示例通过props来获取数据，也需要预先初始化预设好

 <my-component title='myTitle' content='myContent'></my-component>
var myComponent = Vue.component('my-component'， {
　 props : ['title'， 'content']，
　 template : '<h1>{{title}}</h1><p>{{content}}</p>'
})

引用

vue官网
https://blog.csdn.net/emperorzhi/article/details/104511064?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%25E5%258F%258C%25E5%2590%2591%25E6%2595%25B0%25E6%258D%25AE%25E7%25BB%2591%25E5%25AE%259A&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-8-104511064.first_rank_v2_pc_rank_v29