扒扒手指头，做前端这个行业也有三年多了，嗯嗯，在我职业生涯的前两年，我最钟爱的前端集成框架还是jquery,谁让我是一个念旧的人呢，打开各种技术文档，扑面而来的就是三大框架有多好多轻量， so what!,,好吧，我的这种心态浑浑噩噩的过了两年，我是眼睁睁看着vue1熬到了vue2,直到我去了我人生中对我影响最大的公司，上海中赢金融，哈哈，故事开始了
面试官说我凭借美貌与智慧闯过重重关卡，一点都不慎重的就被录取了，当我进入中赢，他们主技术栈就是vue+vuex+webpack+element ui,好吧，说实话我其实一点都不熟悉这个技术栈，所以我就试图说服前端leader用jq吧，用jq吧，但是leader不听😄，好的，小子，我就去熟悉他的代码，我用了半个月时间学会了他的代码，以及他的代码习惯，好吧，我承认了，是时候抛弃jq了，一直钟情到现在，被vue的魅力所折服，废话不多说，让我跟你聊聊vue我所钟爱之处
老生常谈，我们的vue.js是一款优秀的MVVM框架，是一款专注于视图层，用于构建用户交互界面的响应式渐进框架，除了大大提高了开发效率并降低了维护成本以外，还拥有着优雅的API设计，快速上手的特性。
用vue也这么久了，对于vue的内部运行机制是否有过了解呢？我们可以先看一下柒陌所画的vue内部流程图
哈哈，看了上面的图是不是一脸懵逼，不急，我来用大白话给你们讲讲这一个流程，拒绝官方
首先呢，我们有写过vue项目都知道，有一个vue的入口是new Vue()这个东东，我们vue运行呢就是从这里开始的，在new vue()之后，vue会调用一个_init函数，这个函数执行的一个目的就是初始化,看过源码的小朋友，应该知道这个初始化的动作其实就是对一些vue的生命周期，事件监听，初始化渲染，回调钩子beforCreate/create，以及prop/data/computed/method/watch状态初始化，相当于一个vue页面初始化渲染的一个准备过程，源码如下1-1图，这时候就到上图的$mount这里，这个$mount是不是和vue生命周期里的mounted很像呢，我的理解是在init中对beforeCreate/Create进行了初始化，并且函数中最后一步就是对create周期的初始，那接下来正好进入mounted周期内，在模版渲染成html后调用，这里一般就是初始化页面完成后，再对html的dom节点进行一些需要的操作，我们这里$mount会挂载组件，然后开始进行编译，也就是上图中的compile(),编译一共三步走，parse,optimizer,generateCode,也就是上图中的三个，我们慢慢看，
第一步/：我们需要将template转换成抽象语法树（AST）
其实啥意思呢，就是我们写在template模块里的代码，在 parse 函数中，我们先是定义了非常多的全局属性以及函数，然后调用了 parseHTML 这么一个函数，这也是 parse 最核心的函数，这个函数会不断的解析模板，填充 root，最后把 root(AST) 返回回去。parse函数就是不断的重复这个工作，然后将template转换成AST。
第二步：optimizer，就是一个优化器，目的就是去找出AST中纯静态的字树。把纯静态子树提升为常量，每次重新渲染的适合就不需要重新创建新的节点了，会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了 patch 的性能。
第三步：generateCode，就是一个代码生成器，在这个函数里，我们将AST转换成为render函数字符串，就到了我们上图里的render function，，这个render function就是我们组件中渲染VNode所必需的。
然后就到了两个分支，一个到了getter和setter,这个getter和setter我是有必要说说的，这个其实函数 Object.defineProperty进行了绑定，它使得当被设置的对象被读取的时候会执行 getter 函数，而在当被赋值的时候会执行 setter 函数。其实就是我们vue的特点之一，数据双向绑定的原理，这一说是不是理解多了呢，在render function被渲染的时候,因为会读取所需对象的值，所以就会触发getter函数进行依赖收集，这里依赖收集目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中，在修改对象的值的时候，会触发对应的 setter， setter 通知之前「依赖收集」得到的 Dep 中的每一个 Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来更新视图，当然这中间还有一个 patch 的过程以及使用队列来异步更新的策略。通过updateChildren更新视图最后生成dom。渲染到我们的面前。
第二个分支：Virtual Dom，virtual dom是什么呢？
在浏览器中我们可以通过js来操作dom。但是这样的操作性能很差，于是virtual Dom就出来了，虚拟化dom,我的理解就是在js中模拟Dom操作的一种技术或思路。
render function 会被转化成 VNode 节点。Virtual DOM 其实就是一棵以 JavaScript 对象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。.
好啦，一整个vue的运行过程就结束啦，是不是so easy。
1-1
结束上面的话题，我们还可以从vue的一些特性来展示他的魅力
刚接触vue的时候，被它所吸引的就是它丰富的指令，内置指令啊或者自定义指令，虽然angular也有，（但是我不管，我的vue最好），还有不得不提的就是数据绑定，这个我们就要好好说一说angular了，也是我为啥不喜欢angular的原因，虽然两者都是有数据绑定的功能，但是原理上差别却很大，vue的数据绑定原理我在上面就已经和大家介绍了，利于object.defineProperty的getter和setter函数，使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的，而Angularjs依赖对数据做脏值检测循环，在性能上出发，你觉得你还会使用angular吗，在庞大的应用面前，这个差异还是会比较明显的
vue中还有一个比较强大的功能就是组件，，组件可以扩展HTML元素，封装可重用的代码，在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能，在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素，所有的vue组件同时也都是vue实例，所以可接手相同的选项对象并提供相同的生命周期钩子。父子组件之间也提供了很多通信方法，，，这里就不多介绍了
还有vue 前端路由vue-router，其实是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:
1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态管理模式、集中式存储管理 一听就很高大上，蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。
在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用
。。。
未完待续。。
网友评论