Vue 是一个 MVVM 框架，一个数据响应式的组件系统，通过把页面抽象成一个个组件来增加复用性，降低复杂性，提高维护便利性。所以重要的事情说三遍： 
页面一个视图区域抽象成组件，通用型工具抽出公共组件；
页面一个视图区域抽象成组件，通用型工具抽出公共组件；
页面一个视图区域抽象成组件，通用型工具抽出公共组件。
Vue 是数据操纵视图变化，Virtual DOM 把最少的变动应用到真实的 DOM 上，以提升性能。
截止至目前(2021年01月23日)，Vue 最新 release 版本为 2.6.12，Vue 3.0beta 版本已经发布。
下一个 release 版本将是 3.0.4。
此前的历史版本分别是 0.11、0.12、1.x。
vue-cli 最新版本 4.5.9，下一个 release 版本将是 5.0.0-alpha.0。 
Vue 流程图
相关文档
Vue.js 官网(https://cn.vuejs.org/v2/guide/)
Vue API(https://cn.vuejs.org/v2/api/)
Vue 官网仓库(https://github.com/vuejs)
Vue-Router 路由(https://router.vuejs.org/zh-cn/)
Vuex 状态管理(https://vuex.vuejs.org/zh-cn/)
基于 John Resig 的 HTML Parser(https://johnresig.com/blog/pure-javascript-html-parser/)
基于 snabbdom 的 Virtual DOM(https://github.com/snabbdom/snabbdom)
VSCode 搭建 Vue 源码调试环境(视频)(https://www.bilibili.com/video/av20149603/)
Vue 源码解析准备篇(精选)(https://www.jianshu.com/p/c914ccd498e7?from=timeline)
Vue 源码解析参考(https://github.com/answershuto/learnVue)
源码解析目录
1. 认识 Flow，Flow 的基本语法
2. 原型与原型继承
3. Object.defineProperty
4. Vnode 虚拟节点概念 (snabbdom)
5. 函数柯里化
6. Macrotask(宏任务) 与 Microtask(微任务)
7. 递归编程算法
8. 编译原理基础
9. Vue 源码目录设计
10. Vue 源码构建
11. Vue 运行机制
12. Vue 渲染 Render 函数
13. Vue 编译入口
14. Vue 编译之 parser(模板解析)、optimize、codegen(生成 render 工具函数)
15. JS 模拟 DOM 模型树
16. template 模板引擎
17. Vue 的 template 编译，从 template 到 DOM，看内部运行机制
18. new Vue 做了什么
19. Vue 怎么实现实例挂载
20. 响应式原理，及响应式对象
21. Vue 数据驱动，从源码角度看数据双向绑定
22. 依赖收集
23. Vue 响应式派发更新
24. Vue 实现的 VNode 虚拟节点
25. Vue 实现的 Virtual DOM 与 差异diff 及 patch 机制
26. Vue 批量异步更新 DOM 策略及 nextTick 原理
27. Computed(计算属性)与 Watcher(观察属性)
28. Vue 生命周期，组件生命周期
29. Vue 组件化，及 CreateComponent 创建组件
30. 组件合并配置
31. 组件注册
32. Vue 异步组件
33. 组件间通信
34. Vue 指令
35. Vue Event 事件机制
36. v-model
37. slot 插槽
38. keep-alive 组件的使用及其实现原理
39. transition
40. transition-group
41. Vue-Router 路由注册
42. Vue-Router 路由对象
43. Vue-Router 路径切换
44. matcher
45. Vuex 状态管理的工作原理
46. Vue 使用 Proxy
47. Vue 使用 TypeScript
48. Vue 插件体系设计
49. Vue 改(mo)良(fang) React Hooks
50. Vue 为什么可以做到不使用 Class

目录
数据获取
导航完成后获取数据
在导航完成前获取数据

数据获取
有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：


导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。


导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。


从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。
导航完成后获取数据
当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。
假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：
<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

在导航完成前获取数据
通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。
export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。
以上来自vue官网，留下足迹！！！

在vue中获取数据有两种方式，引入尤大大的话就是：导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。那么我们来实践一下这两种获取数据的方式，以及用户体验优化的一点思考。

一、首先是第一种：导航完成之后获取，这种方式是我们大部分都在使用的，（因为可能一开始我们只知道这种方式V）。使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。获取数据大家都会，这里说下用户体验的一些东西：在数据获取到之前，页面组件已经加载，但是数据没有拿到并渲染，所以在此过程中，我们不能加载页面内展示数据的那块组件，而是要有一个loading的加载中的组件或者骨架屏。当页面数据获取失败，可以理解为请求超时的时候，我们要展示的是断网的组件。如果是列表页，还要考虑到空数据的情况，即为空提示的组件。那么，我们的页面是要有这基本的三个部分的，放代码：
     <template>
    <div class="list">
        <!--加载中或者骨架屏-->
        <div v-if="loading">
       
        </div>

        <!--请求失败，即断网的提示组件-->
        <div v-if="error">
      
        </div>

        <!--页面内容-->
        <div v-if="requestFinished" class="content">
            <!--页面内容-->
            <div v-if="!isEmpty">
                <!--例如有个列表，当然肯定还会有其他内容-->
                <ul></ul>
            </div>

            <!--为空提示组件-->
            <div v-else>空空如也</div>
        </div>
    </div>
</template>

这种获取数据的情况下，我们进来默认的是展示loading或者骨架屏的内容，然后如果获取数据失败（即请求超时或者断网），则加载error的那个组件，隐藏其他组件。如果数据请求成功，则加载内容的组件，隐藏其他组件。如果是列表页，可能在内容组件中还会有列表和为空提示两块内容，所以这时候也还要根据获取的数据来判断是加载内容还是加载为空提示。二、第二种方式：导航完成之前获取这种方式是在页面的beforeRouteEnter钩子中请求数据，只有在数据获取成功之后才会跳转导航页面。
 beforeRouteEnter (to, from, next) {        
    api.article.articleDetail(to.query.id).then(res=> {            
        next(vm => {                
            vm.info = res.data;                
            vm.loadFinish = true            
        })        
    })    
},


大家都知道钩子中beforeRouteEnter钩子中this还不能使用，所以要想进行赋值操作或者调用方法，我们只能通过在next()方法的回调函数中处理，这个回调函数的第一个参数就代表了this，他会在组件初始化成功后进行操作。
我想，很多时候我们的api或者axios方法都是挂载到vue的原型上的，由于这里使用不了this，所以只能在页面组件内引入api或者我们的axios。
赋值操作也可以写在method方法中，但是调用这个赋值方法还是vm.yourFunction()的方式。
为空提示、断网处理等都和第一种方式一样，但是，由于是先获取到数据之后再跳转加载组件的，所以我们不需要在预期的页面内展示骨架屏或者loading组件。可以，我们需要在当前页面进入之前，即在上一个页面的时候有一个加载的提示，比如页面顶部的进度条。这样用户体验就比较友好了，而不至于因为请求的s速度慢一些导致半天没反应而用户又不知道的结果。全局的页面顶部进度条，可以在main.js中通过router.beforeEach(to, from, next) {}来设置，当页面路由变化时，显示页面顶部的进度条，进入新路由后隐藏掉进度条。关于怎么添加进度条，因为在另一篇文章已经写了，这里直接送上链接吧，就不再重复浪费地方了。操作也比较简单，可自行查阅。其实说到了这里，那么骨架屏的事情也就顺带已经解决了，一般页面骨架屏也就是一张页面骨架的图片，但是要注意这张图片要尽可能的小。

点击右上角的关注，不定期前端干货分享！！
vue源码分析之数组响应
前段时间有句话特别火，【哪有什么岁月静好，只不过有人在我们负重前行！】那么这句话类比到编程界同样适用。不信接着往下看。
今天继续来说说前端利器Vue，其在国内火热程度依然不减当年，几乎每个前端高手之路绕不过去的框架。接下来我说说今天的主题Vue如何兼听数组的变化。
没读过源代码之前，我相信很多人和我一样，认为数组的push,pop等操作本身就支持数据响应。为了验证这一点，我们做个实验就知道了。
我们知道Vue2.x是通过Object.defineProperty()；方法来实现数据劫持响应的。那么原生js是如何劫持数据的呢？看：
vue数据劫持最基本的实现方式
从上面的运行结果我们可以看到，只有当我们给name赋值数组的时候，set方法才会被触发，而当我们后面操作这个数组的方法去改变这个数组的时候，set并没有被触发！！！
But, 我们回过头来写Vue 的时候，我们去给数组push,pop等一系列的操作，都会影响视图的更新。由此我们可以得出结论，尤大神肯定给广大开发者做了处理了吧，带着这个疑问，我接下来带你们去看看关于这一块儿的源代码的实现吧。
文件在vue/src/core/observer/array.js 我们可以看到，数组的常用几个方法已经被手动处理了，光看这一块的代码我们可能不太理解，没关系啊，我们只需要看关键的42行。有一个ob.dep.notify(); 也就是说，当数组触发了[ 'push', 'pop', 'shift','unshift','splice','sort','reverse']这些方法的时候。Vue会去调用notify方法(有看过Vue源代码的童鞋应该知道这个方法就是通知我们的Watcher要去更新视图了)。我们可以大概的认为Vue帮我们拦截了数组的操作方法。从而实现了数组变化触发视图更新了。而这数组这些在Obeject.defineProperty上面的坑在vue2.x中已经被填好，那么在3.0中，这个问题将不存在了。数据的劫持用到的ES6的 Proxy 进行拦截。具体的可以参考我之前写的 Vue2.x 与Vue3.x 双向数据绑定区别 一文。
一个框架之所有流行。是因为他永远考虑的比普通的使用者更长远全面、而当我们回过头去查阅那引起大神们的源代码的时候，不得不由衷的感叹佩服。
所以前端高手成长之路可以说，源代码分析阅读是绝对绕不开的。官方的文档只会教开发者如何使用，却从不会说为何要这样做，为何可以这样做！后面的文章我将继续推出Vue系列源代码分析，敬请期待。
未完待续。。。