网站banner尺寸aso优化吧
“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
Vue的data响应式
const vm = new Vue({data:{n:0}})
如果修改vm.n或者修改后面对象的n，那么UI当中的n被更新了，就会响应我。
Vue2 通过Object.defineProperty来实现数据响应式。
面试可不问你这么简单的问题
在Object.defineProperty 当中有一个小bug。
Object.defineProperty(obj,"n",{...})
在上面代码当中必须要有一个 n，才能够监听和代理obj.n。
如果说前端开发者在写代码的过程当中，忘记了给n怎么办？
栗子一
Vue会给出一个警告。
new Vue({data: {},template: `<div>{{n}}</div>`
}).$mount("#app");
上面代码当中，data是一个空的，然后再写了一个n，Vue一旦发现是undefined或者是null它都一律不显示在页面上。
在这里控制台会出现一个报错：“属性或者方法n 没有定义在实例上面，但是你却引用了它。”Vue依然会正常的去执行这些代码，但是当它渲染到div的时候却发现找不到n，所以不能再没有定义n的情况下进行使用。
！来给代码加点料
Vue只会检查第一成属性。
new Vue({data: {obj: {a: 0 // obj.a 会被 Vue 监听 & 代理}},template: `<div>{{obj.b}}<button @click="setB">set b</button></div>`,methods: {setB() {this.obj.b = 1; }}
}).$mount("#app");
这一回我们将a放在data这个对象里面，然后在页面中显示的是对象的b，这样可以完美的避开Vue的警告。
因为Vue在检查的时候只检查了第一成也就是data部分， 正常来说的话，Vue会正常的监听data，同时也会正常的监听a，只要写了都会进行监听。
如果我们对vue.obj.a进行变换，是可以正常的翻译到这个视图里面的，但是这里写的是obj.b，当button按钮被点击将会触发setB，然后将1赋值给b并展示在页面上面。
答案当然是没有反应，因为一开始只告诉了vue obj里面有一个a，vue当然就只监听了obj里面的a，b自然就不存在了。
解决办法
Vue有新提供api，Vue.set和this.$set
//接上面代码
methods: {setB() {//this.obj.b = 1; 老代码 Vue.set(this.obj,"b",1)}}
如果一开始知道这个b是不存在的，那么我们在使用的时候就先通知一下vue，我要set obj的一个新的值进去，然后再把值给带上去。
这样子点击button就能实现触发setB，然后新的值显示在页面上面。因为新增key会自动创建代理和监听，并且触发UI更新（但是并不会立即更新）
处理有响应式数据，当然也有响应式网页
早年设计Web时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。
响应式网页就是如果用户的窗口发送了改变，网页的内容就会立即做出改变或者响应，这就是响应式网页。