本篇文章主要讨论 "vuex的state 和 getter 是如何映射到 各个组件实例中自动更新的？" 这个问题。首先，我们对问题进行简单剖析！ 从分析可知，要解答本篇疑问，我们需要从 vue 组件通信谈起！ 在使用vue的过程中，需要频繁的进行组件间通信！通信的主体之间的关系…

vuex作为vue生态的重要组成部分，是对store进行管理的一柄利剑。简而言之，vuex是vue的状态管理器。使用vuex可用使数据流变得清晰、可追踪、可预测，更可以简单的实现 类似时光穿梭 等高级功能，对于复杂的大型应用来讲，vuex将变得尤为重要，对于 store的切分、…

前端路由是构建单页面应用的关键技术，它可以让浏览器URL变化但是不请求服务器的前提下，让页面重新渲染出我们想要的结果。Vue-Router是Vue应用的前端路由插件，让我们来看看它的实现原理。 Vue为所有插件提供一个Vue.use()来安装注册插件，这个方法会调用插件导出对象…

keep-alive的使用只需要在动态组件的最外层添加标签即可。 简单的结果如下，动态组件在child1,child2之间来回切换，当第二次切到child1时，child1保留着原来的数据状态，num = 5。 按照以往分析的经验，我们会从模板的解析开始说起，第一个疑问便是：内…

9.1. 模板编译 Vue在挂载实例前，有相当多的工作是进行模板的编译，将template模板进行编译，解析成AST树，再转换成render函数，而有了render函数后才会进入实例挂载过程。对于事件而言，我们经常使用v-on或者@在模板上绑定事件。因此对事件的第一步处理，就是…

合并策略之所以是难点，其中一个是合并选项类型繁多，合并规则随着选项的不同也呈现差异。概括起来思路主要是以下两点： Vue针对每个规定的选项都有定义好的合并策略，例如data,component,mounted等。如果合并的子父配置都具有相同的选项，则只需要按照规定好的策略进行选…

Vue的使用按照官方的说法支持CDN和NPM两种方式，CDN的方式是以script的方式将打包好的vue.js引入页面脚本中，而NPM的方式是和诸如 webpack 或 Browserify 模块打包器配置使用，以npm install vue的方式引入，这也是我们开发应用的主…

watcher类，实例化watcher类相当于创建一个依赖，简单的理解是数据在哪里被使用就需要产生了一个依赖。当数据发生改变时，会通知到每个依赖进行更新，前面提到的渲染wathcer便是渲染dom时使用数据产生的依赖。 Dep类，既然watcher理解为每个数据需要监听的依赖，…

Vue作为单页面应用遇到最棘手的问题是首屏加载时间的问题，单页面应用会把页面脚本打包成一个文件，这个文件包含着所有业务和非业务的代码，而脚本文件过大也是造成首页渲染速度缓慢的原因。因此作为首屏性能优化的课题，最常用的处理方法是对文件的拆分和代码的分离。按需加载的概念也是在这个前…