Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，先来看一下它的语法： obj 是要在其上定义属性的对象； prop 是要定义或修改的属性的名称； descriptor 是将被定义或修改的属性描述符。
比较核心的是 descriptor，它有很多可选键值，具体的可以去参阅它的 文档 。这里我们最关心的是 get 和 set ，get 是一个给属性提供的 getter 方法，当我们访问了该属性的时候会触发 getter 方法；set 是一个给属性提供的 setter 方法，当我们对该属性做修改的时候会触发 setter 方法。
一旦对象拥有了 getter 和 setter，我们可以简单地把这个对象称为 响应式对象 。那么 Vue.js 把哪些对象变成了响应式对象了呢，接下来我们从源码层面分析。
在 Vue 的初始化阶段，_init 方法执行的时候，会执行 initState(vm) 方法，它的定义在 src/core/instance/state.js 中。
initState 方法主要是对 props、methods、data、computed 和 wathcer 等属性做了初始化 操作。这里我们重点分析 props 和 data ，对于其它属性的初始化我们之后再详细分析。
props 的初始化主要过程，就是 遍历定义的 props 配置 。遍历的过程主要做两件事情：一个是调用 defineReactive 方法 把每个 prop 对应的值变成响应式 ，可以通过 vm._props.xxx 访问到定义 props 中对应的属性( 代理 )。对于 defineReactive 方法，我们稍后会介绍；另一个是通过 proxy 把 vm._props.xxx 的访问代理到 vm.xxx 上，我们稍后也会介绍。
data 的初始化主要过程也是做两件事，一个是对定义 data 函数返回对象的遍历 ，通过 proxy 把每一个值 vm._data.xxx 都 代理 到 vm.xxx 上；另一个是调用 observe 方法观测整个 data 的变化，把 data 也变成响应式，可以通过 vm._data.xxx 访问到定义 data 返回函数中对应的属性，observe 我们稍后会介绍。
可以看到，无论是 props 或是 data 的初始化都是把它们变成响应式对象，这个过程我们接触到几个函数，接下来我们来详细分析它们。
首先介绍一下代理，代理的作用是把 props 和 data 上的属性代理到 vm 实例上，这也就是为什么比如我们定义了如下 props，却可以通过 vm 实例访问到它。
我们可以在 say 函数中通过 this.msg 访问到我们定义在 props 中的 msg，这个过程发生在 proxy 阶段：
proxy 方法的实现很简单，通过 Object.defineProperty 把 target[sourceKey][key] 的读写变成了对 target[key] 的读写 。所以对于 props 而言，对 vm._props.xxx 的读写变成了 vm.xxx 的读写，而对于 vm._props.xxx 我们可以访问到定义在 props 中的属性，所以我们就可以通过 vm.xxx 访问到定义在 props 中的 xxx 属性了。同理，对于 data 而言，对 vm._data.xxxx 的读写变成了对 vm.xxxx 的读写，而对于 vm._data.xxxx 我们可以访问到定义在 data函数返回对象中的属性，所以我们就可以通过 vm.xxxx 访问到定义在 data 函数返回对象中的 xxxx 属性了。
observe 的功能就是用来监测数据的变化，它的定义在 src/core/observer/index.js 中：
observe 方法的作用就是给 非 VNode 的对象类型数据添加一个 Observer ，如果已经添加过则直接返回，否则在满足一定条件下去实例化一个 Observer 对象实例。接下来我们来看一下 Observer 的作用。
Observer 的构造函数逻辑很简单，首先实 例化 Dep 对象 ，这块稍后会介绍，接着通过执行 def 函数 把自身实例添加到数据对象 value 的 __ob__ 属性上 ，def的定义在 src/core/util/lang.js 中：
回到 Observer 的构造函数，接下来会对 value 做判断， 对于数组会调用 observeArray 方法，否则对纯对象调用 walk 方法 。可以看到 observeArray 是遍历数组再次调用 observe 方法，而 walk 方法是遍历对象的 key 调用 defineReactive 方法，那么我们来看一下这个方法是做什么的。
defineReactive 的功能就是 定义一个响应式对象 ，给对象动态添加 getter 和 setter，它的定义在 src/core/observer/index.js 中：
defineReactive 函数最开始初始化 Dep 对象的实例，接着拿到 obj 的属性描述符，然后 对子对象递归调用 observe 方法 ，这样就保证了无论 obj 的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或修改 obj 中一个嵌套较深的属性，也能触发 getter 和 setter。最后利用 Object.defineProperty去给 obj 的属性 key 添加 getter 和 setter。而关于 getter 和 setter 的具体实现，我们会在之后介绍。
首先在写页面的时候就要为响应式网页做准备，宽使用百分百，不设置固定高度。设置meta 进行适应移动端页面。
了解pc 端主流显示器分辨率，设置显示断点，例如1920 * 1080 通过媒体查询设置 1920 宽度的显示方式，1600*1200，设置 1600宽度的显示方式，其实一般是1200 以上的都设置同一个显示方式就可以了，主要是显示器分辨率低的，例如 800 * 600 设置它的显示方式，
xs: 576px sn:≥576px md: ≥768pxlg:≥992px xl:≥1200px xxl:≥1600px
一般需要通过媒体查询设置的pc端的范围有这些。
移动端的话一般不是通过媒体查询来设置， 先用 js 将单位设置为 rem, 即 1rem = 100px
这样则 默认字体为 0.16rem 通过百分百宽度来设置盒子的宽，让它根据屏幕来做调整。
如果使用框架的话还可以结合 栅格系统来做响应式兼容。
其实移动端的兼容是最麻烦的，因为手机品牌种类多，系统一般分 安卓 和 ios ,但是还有系统版本，问题，不同系统版本也会有不一样的显示方式（特别是ios系统）。
安卓主要是品牌种类的不同，屏幕 分辨率的不同。
想要做基本的兼容就是先设置meta，然后将宽设置为 百分百比
