Vue核心思想：数据驱动、组件化

叁歲伎倆 2022-05-21 08:48 232阅读 0赞

# 1.数据驱动 #

DOM是数据的一种自然映射。

传统的前端数据交互是用Ajax从服务端获取数据，然后操作DOM来改变视图；或者前端交互要改变数据时，又要再来一次上述步骤，而手动操作DOM是一个繁琐的过程且易出错。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它让开发者省去了操作DOM的过程，只需要改变数据。Vue会通过Dircetives指令，对DOM做一层封装，当数据发生改变会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射。Vue还会对操作进行监听，当视图发生改变时，vue监听到这些变化，从而改变数据，这样就形成了数据的双向绑定。

> MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

## 数据响应原理 ##

数据（model）改变驱动视图（view）自动更新。

![数据响应原理][1]

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data选项，Vue 将遍历此对象所有的属性，并使用 [Object.defineProperty][] 把这些属性全部转为 getter/setter。`Object.defineProperty` 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。用户看不到 `getter/setter`，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 `getter/setter` 的格式化并不同，所以你可能需要安装 [vue-devtools][] 来获取更加友好的检查接口。每个组件实例都有相应的 **watcher** 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的**setter**被调用时，会通知**watcher**重新计算，从而致使它关联的组件得以更新。

# 2.组件化 #

扩展HTML元素，封装可重用的代码。每一个组件都对应一个`ViewModel`。页面上每个独立的可视/可交互区域都可以视为一个组件。每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就进维护。页面是组件的容器，组件可以嵌套自由组合形成完整的页面。

## Tips ##

在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别?

**shim**

`shim`是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。

**polyfill**

`polyfill`就是一个用在浏览器API上的`shim`.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的`polyfill`.然后新旧浏览器就都可以使用这个API了.

术语`polyfill`来自于一个家装产品Polyfilla:Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些`polyfills`会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)Paul Irish发布过一个Polyfills的总结页面“HTML5 Cross Browser Polyfills”.es5-shim是一个`shim`（而不是`polyfill`)的例子,它在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,而且在Node.js上和在浏览器上有完全相同的表现(译者注:因为它能在Node.js上使用,不光浏览器上,所以它不是polyfill）.

[1]: https://user-gold-cdn.xitu.io/2018/7/2/1645aa9519525059?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Object.defineProperty]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2FdefineProperty
[vue-devtools]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue-devtools