vue.js响应式原理

JavaScript022

vue.js响应式原理,第1张

vue2响应式原理主要通过 Object.fefineProperty

当把一个普通的js对象传入 Vue 实例作为 data 选项,Vue将遍历此对象所有的属性，并使用 Object.fefineProperty 把这些属性全部转为 getter/setter 。 Object.defineProperty 是ES5中一个无法 shim 的特性，这也是Vue 不支持IE8 以及更低版本浏览器的原因。

vue3响应式原理主要通过 Proxy 代理对象

虚拟dom就是用普通的js对象来描述 DOM 对象

真实dom成员复杂，虚拟dom可以用简洁的方式来表示实现真实dom,创建虚拟dom开销小。

虚拟dom库

使用模块

Snabbdom 核心

patch 整体过程分析

谁告诉你一定要用google服务器上的js？实际上不需要一句js，就用css也能做响应式。

引用是因为有些js，比如：有个b开头的专门针对响应式开发的js就很有名，这些js把现成的东西做好了，大家发现用它们很便捷，所以都爱用。

再然后，google和百度之类的IT企业就建立了专门的服务器把这些网站都爱用的通用代码托管起来，利用自己分布在全球的服务器节点优势来加速这些代码的载入（因为服务器带宽强大还有CDN加速什么的，通常情况引用百度谷歌的服务器上的js比你把js传到你自己服务器上载入时更快）。

还有个好处就是，比如大量网站都引用了一个百度公用库的123.js，然后你也引用这个123.js，当我访问其他网站时就加载过这个js，在浏览器缓存没清空的情况下，我再访问你的网站，又遇到你引用了这个文件，那我缓存里面直接就有了，都不需要再去百度服务器加载，速度更快。

如果涉及到用js控制css宽度，边距等问题

在写响应式的过程中和写css一样，不要写成固定比，写成百分比的样式即可

这样js同样也能够在手机端，平板端，正常运行。