TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vue核心思想

zyz
2021-04-06
/
0 评论
/
501 阅读
/
正在检测是否收录...
04/06

一、传统前端数据交互

在传统中,前端页面显示的数据,是通过ajax异步获取到后台的数据,接着进行DOM操作将数据渲染。假设前端交互要改变数据时,又要再来一次上述步骤,而手动操作DOM是一个繁琐的过程且易出错。

二、Vue核心思想之数据驱动

Vue是一个提供了MVVM风格的双向数据绑定的Javascript库,专注于View 层。它让开发者省去了操作DOM的过程,只需要改变数据即可。
在后台获取到的数据,即是Model。Vue会通过Dircetives指令,对DOM做一层封装,当数据发生改变会通知指令去修改对应的DOM,数据驱动DOM变化,DOM是数据的一种自然映射(绿色箭头方向)。
Vue还会对操作进行监听,当视图发生改变时,vue监听到这些变化,从而改变数据,这样就形成了数据的双向绑定(蓝色箭头方向)。
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

三、数据响应原理

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data选项(图中就是a对象中的b属性,即a.b),Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter方法。[Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因]。 用户看不到 getter/setter方法,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
同时Vue会对模板进行编译,解析之后会生成指令对象,也例如 v-text, v-hide等。
当指令中v-text='a.b'时,其实就是触发getter方法,获取对应的数据。

另外每个属性都对应有一个Watcher,它有什么作用?
当data选项中a.b值发生改变时,就会触发setter方法,会通知到对应的watcher。之后再通知指令去调用update方法,由于指令是DOM的封装,所在在update时其实就是调用了原生javascript的DOM方法来更新界面。

四、Vue核心思想之组件化

组件化就是实现了扩展HTML元素,封装可用的代码,提高代码的复用性。例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

  • 组件说明

    - 页面上每个独立的可视/可交互区域视为一个组件。
    - 每个组件对应一个工程目录,组件所需的各种资源在这个目录下就近维护。
    - 页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面。
  • 组件树
    每个组件都会对应一个ViewModel,最终就会生成一个ViewModel树,其实和DOM节点树是一一对应的。

赞(0)
评论 (0)