Vue核心思想是什么

这篇文章给大家分享的是有关Vue核心思想是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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

1、数据驱动

传统的前端数据交互是用 Ajax 从服务端获取数据，然后操作 DOM 来改变视图；或者前端交互要改变数据时，又要再来一次上述步骤，而手动操作 DOM 是一个繁琐的过程且易出错。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它让开发者省去了操作 DOM 的过程，只需要改变数据。Vue 会通过 Dircetives 指令，对 DOM 做一层封装，当数据发生改变会通知指令去修改对应的 DOM，数据驱动 DOM 变化，DOM 是数据的一种自然映射。Vue 还会对操作进行监听，当视图发生改变时，vue 监听到这些变化，从而改变数据，这样就形成了数据的双向绑定。Vue 是一种 MVVM 框架。而 DOM 是数据的一个种自然映射。传统的模式是通过 Ajax 请求从 model 请求数据，然后手动的触发 DOM 传入数据修改页面。Vue 中，Directives 对 view 进行了封装，当 model 里的数据发生变化是，Vue 就会通过 Directives 指令去修改 DOM。同时也通过 DOM Listener实现对视图 view 的监听，当DOM 改变时，就会被监听到，实现 model 的改变，实现数据的双向绑定。

2、组件响应原理数据（model）改变驱动视图（view）自动更新

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

3、组件化

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

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

感谢各位的阅读！关于“Vue核心思想是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！