最近一直在学习Vue，官方文档也粗略的看过三四遍吧（有的东西老是记不住，可能是老了，开个玩笑）。然后自己写了一个简单的Demo，模拟了iPhone端的微信界面，实现了一个简单的聊天功能。
这里是GitHub的项目地址，目前虽然还是个半成品（有点懒），但对于初学者来说应该会有帮助，因为我也是初学者。使用到的技术栈包括Vue，Vuex，Vue-router，Vue-cli，Pug，Sass等。点击这里可在线查看效果，建议使用谷歌浏览器并在手机调试模式下查看。
这不是一篇纯技术文章，更多的是我自己总结的一些方法和对Vue的理解。
初学者的难题
根据我学习的经历，我觉得对于初学者学习Vue（或React）最大的难题可能就是环境的搭建，尤其是对于没有NodeJS方面经验的人来说。这里我要说一下自己对于学习Vue的一些见解，可供参考。
从Vue-cli开始
vue-cli是官方提供的一个命令行工具，可以一键部署开发环境，这样会省去很多麻烦。另外，通过vue-cli部署的环境可以直接进入到单文件组件的学习，这对以后的学习可能会更有帮助。如果自己搭建环境，一个webpack的相关配置都可能把你的意志消磨殆尽（webpack我就踩过很多坑），我猜很多学习Vue或React的新手都是死在环境搭建的过程中。初学者应该把注意力集中在Vue本身，等体会到其中的“乐趣”之后再回过头来学习npm和webpack等相关知识可能会更好。
vue-cli使用如下，建议使用cnpm代替npm，具体可自行百度或Google。
# 全局安装 vue-cli
npm install -g vue-cli
# 创建一个基于 Webpack 模板的项目
vue init webpack my-project
# 安装依赖
cd my-project
npm install
# 运行
npm run dev
直接进入到单文件组件开发
Vue可以直接通过script标签引入到HTML文件中，但我不建议这样学习。因为这就违背了学习Vue的初衷，Vue是一个MVVM框架，其核心思想就是分组件开发，组件的复用，组件解耦。
Vue还可以使用字符串模板以及Render渲染来开发组件，其弊端也很明显。字符串模板不支持语法高亮，而且写起来也不直观。Render函数渲染相对比较复杂，而且也不直观。最重要的是他们都无法封装CSS样式，也无法使用预处理器（Pug和Sass）。
单文件组件（.vue后缀名）很好的实现了组件的封装，让组件看起来更像组件。文件结构如下：
<template lang="html">
<!-- 这里是组件的 HTML 标签 -->
</template>
<script>
export default {
// 这里是组件 js 代码
}
</script>
<style lang="scss" scoped>
// 这里是组件的 CSS 样式
</style>
选择一款合适的编辑器
我曾经无数次纠结过这个问题：到底是使用Sublime，VS Code，还是Atom？或是WebStorm？百度一下，人们对这些工具也是各执其词，根本毫无可比性，一下子更不知如何选择了（选择困难症，十分痛苦）。现在想想其实也十分可笑，我们完全没必要把时间花在这些无聊的事情上。这些编辑器我在Windows和MacOS中都尝试过，最终还是选择了Sublime阵营。
简单的说一下，选择Sublime一个字快，两个字稳定，三个字插件丰富（假装三个字）。Atom界面最好看，尤其是在MacOS下；VS Code没什么心得，就是不喜欢；WebStorm相当于IDE，笨重但功能齐全，前端初学者神器（也是我的入门工具）。Atom我也是比较看好的，只是闲置在电脑中，暂时没怎么用。
如果你也跟我一样纠结的话，那我建议你选择Sublime，什么也别想，就选它。记住它的一些快捷操作，和一些实用技巧，我相信你会慢慢爱上它的。
Sublime作为前端编辑器，推荐几个好用的插件：
- Emmet：前端必备神器；
- DocBlockr：统一文档注释的风格；
- Babel：支持ES6语法；
- Pug：Jade的新叫法，语法高亮；
- Sass：支持Sass语法高亮；
- Vue Syntax Highlight：Vue必备，语法高亮。
另外推荐一款我在用的主题：Theme - SoDaReloaded。
纵观全局
我一直有一个观点：就是看事物要先看全局，忽略那些繁琐的细节，然后再逐个深究。比如看书要先看目录（虽然我讨厌看书），首先做到心里有数，知道自己在看什么或有没有必要再看下去(比如这篇文章)。
比较重要的几个概念
我不是一个语言表达能力很好的人，不会扯那些概念，我只能尽可能的说一些自己的理解。
这里先说一句，Vue中的this一般都指向当前的Vue实例。也是就说，在哪个组件中使用，this就指向哪个组件。当然，这只是对于组件本身具有的属性和方法而言。
Vue实例
通过Vue开发单页面项目，一个项目就是一个Vue实例（暂且这么理解吧），也就是通过new Vue()语句创建的对象。那么既然有了一个实例，那么要显示出来，就得放入HTML文档中，这就是挂载。对应语法：
new Vue({
// el是实例挂载点，会将根组件替换掉原文档中id为 app 标签
el: '#app',
// 通过render函数渲染
render: h => {
// 这里App是根组件
h(App)
}
})
// 第二种写法
new Vue({
el: '#app',
// 通过字符串模板
template: '<App />',
components: { App }
})
Vue扩展实例
严格来说，通过new Vue()方式创建的实例叫做根实例，而还有一种叫扩展实例。这里引用官方的一句话：所有的 Vue.js 组件其实都是被扩展的 Vue 实例（其实我也是刚刚理解）。
扩展实例创建方式：
const MyComponent = Vue.extend({
// 该对象就相当于 单文件组件中 export 导出的对象
// 这就是为什么说 所有的Vue组件都是被扩展的Vue实例
})
// 创建扩展实例
const component = new MyComponent()
同样的，Vue扩展实例也需要挂载，其语法与根实例挂载一样：
// 会替换掉 HTML 文档中 id 为 app 的标签
new MyComponent({el: '#app'})
// 但是这里不建议这么做，因为这样会与实例挂载点冲突
// 这里仅仅是为了说明扩展实例与 根实例的相似之处
扩展实例一个重要的用法就是在需要的时候才被插入到HTML文档中。比如点击一个按钮，弹出一个模态（modal）框。在我的Demo中，正是通过该方法实现一个加载等待的模态框。通过此方法有一个好处就是，可以将该功能封装成一个Vue插件，需要的时候通过一条指令就可以将组件插入到文档中，不需要预先将组件写入到HTML文档中。方法如下：
// 创建扩展实例
let component = new MyComponent()
// 挂载到虚拟DOM中
// 不传递参数，若传递参数会挂载到指定的地方
component = component.$mount()
// 通过原生语法将 扩展实例添加到HTML文档中
document.body.appendChild(component.$el)
同样，Vue根实例也可以通过该方式挂载到HTML中。
组件
组件就是扩展的Vue实例（哈哈）。反正记住在Vue中，一切可见的东西（但不限于可见的东西）都是组件，一个Vue实例就是由一大堆组件通过一定的组合和嵌套累积起来的。
学习组件无外乎就是它的创建和使用，通过扩展Vue实例也算是一种创建的方式，另外还有字符串模板和render函数渲染的方式。我一开始就建议直接使用单文件组件，具体请转移官方文档或从GitHub上Clone我的demo查看详情。
生命周期
每个组件都有自己的生命周期，从广义上来说，Vue实例其实也是一个组件。一般常用的几个生命周期钩子：created，mounted，updated，destroyed。mounted基本上用的最多。
所谓的生命周期钩子，就是说组件在特定的时刻会自动触发该事件，执行对应的函数。
学习Vue的基本思想
程序员，其实大部分时间是用于思考的。建立一种思想，一种思维方式很重要。这也是我现在一直在努力做的事。
学习一个框架，就要站在它的角度去思考问题。而Vue是一种MVVM模式的框架，所以有必要先理解什么是MVVM？然后再去思考Vue的基本原理，它能做什么？又是如何做到的？为什么要使用Vue？可以去看一下官方文档：Vue与其他框架的对比。
什么是MVVM
M就是Model（模型），V就是View（界面），MVVM也是就说通过模型的改变来更新界面，然后通过界面的一些行为事件又来作用于模型。当然，这只是从字面上来解释。要更好的体会到Vue的MVVM思想，我建议去学习Vuex。
之前，我们使用jQuery或原生JS要想更改界面上的内容，首先必须找到对应的DOM节点，然后通过直接操作DOM的语句来改变界面上的内容。而MVVM的思维方式就是：一个模型对应一个界面，界面的状态和显示的内容完全取决于它对应的模型。而我们只需改变模型，后台（Vue）就会通过某种机制自动去更新界面。
什么是MVC
顺便谈一下MVC设计模式，它其实是出现在MVVM之前，其中的C是指Controller（控制器）。MVC的基本思想就是：模型与界面之间的通信都是通过中间的控制器实现的。所以它的缺陷就是控制器层需要处理大量的业务逻辑代码，不利于开发和维护。
Vue的基本原理
我没有研究过Vue的源码，也解释不出来它是怎么实现的？毕竟我们是使用框架，通过它来提高开发效率，没必要太过于深究，否则就失去了使用它的意义（大神请忽略之）。记住一句话：我们是站在巨人的肩膀上开发的。如果什么都要去深究其原理，那还不累死？
Vue的核心是组件，一切可以看见的东西都是由组件构成。然后通过把不同的组件组合和嵌套在一起，最终组成了一个根组件，也就是App。根组件会挂载到Vue的根实例中，而Vue根实例本身也相对于一个组件，然后又挂载到真实的HTML文档中。对应的语句也就是main.js文件中的语句。
new Vue({
// 该属性会 将Vue实例挂载到 真实的HTML中
el: '#app',
// App 就是根组件，被挂载到Vue实例中
render: h => h(App)
})
后记
越写到后面感觉越偏离主题（不知所云，看来得好好练一下文笔了），实在写不出想要的那种效果，所以就先到此为止吧。先整理一下思路，后面有时间会接着更新，希望自己会坚持下去，这是第一篇。
最后，我只想说一句话：中国文字果然博大精深！
网友评论