Vue从入门到再入门

2017-11-09

Vue.js是什么？

Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用 最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。

如何理解渐进式框架，渐进增量的设计？

（1）主张性少
（2）可弹性收缩：Vue从设计角度来讲，虽然能够涵盖声明式渲染，组件系统，客户端路由，大规模状态管理，构建工具这些所有的东西，但是你并不需要一上手就把所有东西全用上，因为没有必要。当所要解决的问题内在复杂度很低的时候，可以只用核心的这些很简单的功能；当需要做一个更复杂的应用时，再增添相应的工具。例如做一个单页应用的时候才需要用路由；做一个相当庞大的应用，涉及到多组件状态共享以及多个开发者共同协作时，才可能需要大规模状态管理方案。

如何理解声明式渲染？

DOM和数据都是响应式的，数据驱动。现在基本所有的框架都已经认同这个看法——DOM应尽可能是一个函数式到状态的映射。状态即是唯一的真相,DOM状态只是数据状态的一个映射，所有的逻辑尽可能在状态的层面去进行，当状态改变的时候，View应该是在框架帮助下自动更新到合理的状态，而不是说当你观测到数据变化之后手动选择一个元素，再命令式地去改动它的属性。

Vue.js的核心思想

数据驱动

双向绑定：DOM是数据的一种自然映射，在vue.js中只需要操作数据，vue.js通过directives指令去对DOM做一层封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射，vue.js还会对操作做一些监听，当我们修改视图的时候，vue.js监听到这些变化，从而去改变数据，这样就实现了数据的双向绑定。

我们在数据驱动的时候,并没有操作dom节点,也没有侦听任何的事件,这些框架都为我们做好了,框架采用一种数据绑定的方式,自动绑定dom节点的属性.这样就把你从操作dom节点的繁琐过程中解脱出来了,你只要专注于数据的状态,ui更新的事情你不需要去管了,不过是样式还是内容,可见性还是切换class,框架帮你把关注点从传统的dom操作转移到了数据,回归编程的本质:数据结果+算法.

组件化

(1) 目的

扩展HTML元素，封装可重用的代码

(2) 设计原则

页面上每个独立的可视/可交互区域视为一个组件
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

Vue对比React

React和Vue的使用范围是相似的都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。

相似之处
（1）使用了Virtual DOM
（2）提供了响应式(reactive)和可组合的视图组件(composable view component)。
注解：响应式并不是指CSS的响应式，而是指响应式的数据绑定也就是双向数据绑定。
（3）将注意力集中保持在核心库，同时也关注路由和负责处理全局状态管理的辅助库。
注解：都有各自的配套工具，核心虽然只解决一个很小的问题，但它们有生态圈及配套的可选工具，当你把他们一个一个加进来的时候，就可以组合成非常强大的栈，就可以涵盖其他的这些更完整的框架所涵盖的问题。

不同之处
（1）Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统
（2）在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。Vue默认使用模板(Template)。
（3）ReactNative 能使你用相同的 React 组件模型编写有本地渲染能力的 APP（iOS 和 Android）。能同时跨多平台开发。Vue 和 Weex 会进行官方合作，Weex 是阿里的跨平台用户界面开发框架，Weex 的 JavaScript 框架运行时用的就是 Vue

Vue的优势

模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积

React的优势

更适用于大型应用和更好的可测试性
同时适用于Web端和原生App
更大的生态圈带来的更多支持和工具

Vue项目构建

 # 最新稳定版本
npm install vue
 # 安装 vue-cli
npm install --global vue-cli
vue init webpack project-name
cd project-name
npm install
npm run dev

Vue实例生命周期

logo

如何使用钩子函数？

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容