更多详细内容,可以查看原文链接:Vue-概念理解
渐进式框架
Vue.js是一套构建用户界面的渐进式框架。
声明式渲染和组件系统是Vue的核心库所包含内容,而客户端路由、状态管理、构建工具都有专门解决方案。
声明式渲染
所有的逻辑尽可能在状态的层面去进行,当状态改变的时候,View应该是在框架帮助下自动更新到合理的状态。
在Vue2.0中,渲染层的实现做了根本性改动,那就是引入了虚拟DOM。
Vue的编译器在编译模板之后,会把这些模板编译成一个渲染函数 。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树 。
当我们有了这个虚拟的树之后,再交给一个patch函数,负责把这些虚拟DOM真正施加到真实的DOM上 。在这个过程中,Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中,侦测到的数据来源之后,之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。当重新进行渲染之后,会生成一个新的树,将新树与旧树进行对比,就可以最终得出应施加到真实DOM上的改动。最后再通过patch函数施加改动。
在Vue2.0的路由和内部的一些实践上,都大量地应用渲染函数做复杂的抽象组件 ,比如过渡动画组件以及路由里面的link组件,都是用渲染函数实现的,同时还保留了它本身的依赖追踪系统。
Vue的依赖追踪通过ES5的 Object.defineProperty
方法实现。比如,我们给它一个原生对象,Vue会遍历这个数据对象的属性,然后进行属性转换。每一个属性会被转换为一个 getter
和一个 setter
。同时每个组件会有一个对应的 watcher
对象,这个对象的职责就是在当前组件被渲染的时候,记录数据上面的哪些属性被用到了。
例如,在渲染函数里面用到A.B的时候,这个就会触发对应的 getter。整个渲染流程具体要点如下:
- 当某个数据属性被用到时,触发
getter
,这个属性就会被作为依赖被watcher
记录下来。 - 整个函数被渲染完的时候,每一个被用到的数据属性都会被记录。
- 相应的数据变动时,例如给它一个新的值,就会触发
setter
,通知数据对象对应数据有变化。 - 此时会通知对应的组件,其数据依赖有所改动,需要重新渲染。
- 对应的组件再次调动渲染函数,生成
Virtual DOM
,实现DOM
更新。
组件系统
在Vue中,父子组件之间的通信是通过 props 传递。从父向子单向传递;而如果子组件想要在父组件作用里面产生副作用,就需要去派发事件。这样就形成一个基本的父子通信模式。
客户端路由
有一个重要的功能叫做 deep-linking
,也就是当用户浏览到一个URL,然后把它传给另外的人或者复制重新打开,应用需要直接渲染出这个URL对应的状态。这就意味着应用的URL和组件树的状态之间有一个映射关系,客户端路由的职责就是让这个映射关系声明式地对应起来。
配合Webpack还可以实现基于路由的懒加载,一条路径所对应的组件在打包的时候,会分离成另外一块,只有当该路由被访问的时候,才会被加载出来。
状态管理
图中的这三个东西是一个单向数据流,State
驱动 View
的渲染,而用户对 View
进行操作产生 Action
,会使State
产生变化,从而导致 View
重新渲染。
构建工具
npm install -g vue-cli
vue init webpack-simple my-app
cd my-app
npm install
npm run dev
虚拟DOM
利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。
MVVM模式
Vue.js 是一个提供了 MVVM
风格的双向数据绑定的 Javascript
库,专注于 View
层。它的核心是 MVVM
中的 VM
,也就是 ViewModel
。ViewModel
负责连接 View
和 Model
,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
Vue 双向绑定原理
Vue.js 是采用 Object.defineProperty 的 getter
和 setter
,并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty
将它们转为 getter/setter
。用户看不到 getter/setter
,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty
的getter
和setter
来实现。
Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
Watcher 订阅者, 作为连接Observer
和Compile
的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher
),数据变动触发notify
函数,再调用订阅者的update
方法。
当执行 new Vue()
时,Vue 就进入了初始化阶段,一方面 Vue 会遍历 data
选项中的属性,并用 Object.defineProperty
将它们转为 getter/setter
,实现数据变化监听功能;另一方面,Vue 的指令编译器 Compile
对元素节点的指令进行扫描和解析,初始化视图,并订阅 Watcher
来更新视图, 此时 Wather
会将自己添加到消息订阅器中(Dep
),初始化完毕。
当数据发生变化时,Observer
中的 setter
方法被触发,setter
会立即调用 Dep.notify()
,Dep
开始遍历所有的订阅者,并调用订阅者的 update
方法,订阅者收到通知后对视图进行相应的更新。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。