先说一句题外话，对于 Vue 的探索和应用我只服 ElemeFE
基础
- 软件工程学
- 代码风格
- 基本功
- Vue.js 官方文档
- ES6
Vue 三大特性
数据的双向绑定
通过数据绑定连接 View 和 Model， 让数据的变化自动映射为视图的更新。
数据驱动的组件系统
用嵌套的组件树来描述用户界面，每一个组件对应MVVM中的ViewModel。
基于构建工具的单文件组件系统
借助webpack强大的loader API，来定义对不同文件格式的预处理逻辑，从而将 vue 文件当作 javascript 模块来使用，从而极大提升了代码的可复用性。
开始
俗话说“工欲善其事必先利其器”，再往前递推，工欲利其器必先得其器。在进行一次 vue 项目的开发之前，如何将 vue 引入是我们面对的第一个问题。
这里我主要介绍两种引入方式。
传统的<script>大法
遥想当年，在和jQuery一起玩耍的时候，在每撸一个页面之前，都会先把jq的cdn路径放在处于</body>前的<script>里面，因为这样做才可以和她愉快的玩耍。
虽说 jq 和 vue 不是一个概念（库 vs 框架），但是基于浏览器解析js的原理，两者可以用相同的方式引入。
npm install
NPM（Node Package Manager）是Node.js自带的一款包管理工具，只需要简单的在键盘上敲下
npm install *package name*
就可以将你需要的包安装至你的项目中，进而借助模块加载器就可以把她们引入到你的文件中。
当然，除了npm之外，还有其他的包管理工具，比如 bower 和 yarn，可以根据个人喜好进行选择。
不过值得一提的是，yarn 是 Facebook 推出的一款包管理工具，他们的工程师在使用 npm 的时候发现了很多需要改进的地方，为了达到预期的效果，打造了 yarn 这款工具。所以，如果你感兴趣，可以试试 yarn。
评估
对于上面两种方式的选择，你需要权衡一些因素：
- 如果你是尝试在已有的项目中添加一点新鲜的血液作为预研，建议选择
<script>标签的形式 - 如果你是在从零开始搭建一个 vue 项目，建议选择用包管理工具的方式
为什么需要构建
要回答这个问题，就要追溯到另外一个问题：在将代码发布到生产环境之前，我们还需要做什么？
如果能回答好这个问题，我们就会知道——到底为什么需要构建？
答案可以大致分为以下几种：
- 预处理
- 代码风格检测
- 资源压缩
- 静态资源替换
因为本文侧重点的关系，这里说一下预处理。
这又是另外一个问题了——为什么需要预处理？
因为无时不刻都在面临着浏览器的兼容问题，比如说ES6，一些语法糖写起来确实很爽，但是并不是所有浏览器都认识她；再者，React 的 jsx，Vue 的单文件，浏览器统统不认识，怎么办？只能预处理。
这里推荐 Vue 官方认证的好基友—— Webpack（其实我是gulp粉...）
如果你用的<script>来引入Vue，不用关注这个问题，因为你已经协助浏览器进行了“在线编译”。
组件化
Vue 的 slogan 是：轻量高效的前端组件化方案。
这些年，伴随着 React 对 Web component 的不断实践与推动，组件化的思想被前端er们毫无抵触的接受，相比 React，个人认为 Vue 对组件化的解决方案更加优雅一些——借助构建工具的单文件组件系统。
在一个.vue文件中，有三个主标签：<template>, <script>, <style>，分别对应着当前组件的结构、交互逻辑和样式。
口说无凭，举个栗子
先来看看 React 的 JSX
render(){
let { item } = this.props;
let children;
if ( items.length > 0 ) {
children = (
<ul>
{ items.map( item =>
<li key={item.id}>{item.name}</li>
) }
</ul>
);
} else {
children = <p>No items found.</p>
}
return (
<div className = 'list-container'>
{ children }
</div>
);
}
其实看起来也不是多么的不堪，能够利用完整的 JavaScript 功能来构建视图页面，也是一件有意义的事情。
相同的业务逻辑，用 Vue 来写
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
是不是比 React 的 jsx 语法和内联样式优雅的多呢？
你需要做的就是根据业务逻辑组织好你的 components tree，接着搭配一款模块化方案，就能实现一个基于 Vue 的单文件组件系统啦。
当然，Vue 也同样支持 jsx 语法，你也不必非得采用单文件的组织形式，一切都取决于你的业务以及你的团队。
Vue Object
每个 Vue 实例在被创建之前都要经过一系列的初始过程。Vue 在这一周期中提供了一些钩子函数，这就给我么提供了执行自定义逻辑的机会。
Vue 是否有“控制器”的概念？
答： 没有。但是你可以将组件的自定义逻辑分布并实现在这些钩子函数中。 、
附上一张描述 Vue 对象生命周期的官方神图 ↓
一个还算有趣的前端er
网友评论