初衷：网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。本人在找文章时对此深有体会，故将以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解 MobX 源码；

================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码； 本系列文章： 《【用故事解读 MobX源码（一）】 autorun》 《【用故事解读 MobX源码（二）】 computed》 《【用故事解读 MobX源码（三）】 should...

================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码； 本系列文章： 《【用故事解读 MobX源码（一）】 autorun》 《【用故事解读 MobX源码（二）】 computed》 《【用故事解读 MobX源码（三）】 should...

本文作者来自 华尔街见闻技术团队 - 花裤衩 推荐先阅读 webpack 入门教程之后再来阅读本文。 Webpack 4 和单页应用入门 手摸手，带你用合理的姿势使用 webpack4 （上） 本文为手摸手使用 webpack4（下），主要分为两部分： 怎么合理的运用浏览器缓存 怎么构建可靠的...

onload 函数会被调用两次第一次是你手动调用 onload(3, 4, 5) 触发（实际调用的是 window.onload(1, 2,3)）第二次是事件函数被动触发

贴个传送门：[链接]

当然有很多方式可以曲线救国，下面说一个：打开 .babelrc 文件，把 env 替换为你全局安装的 babel-preset-env 的路径，比如我电脑上就是 /usr/local/lib/node_modules/babel-preset-env

在组件中定义一个属性，假设叫 beforeDataProcess，该属性传入的是一个函数，作用就是：将后端返回的数据转化为组件需要的数据格式

{代码...} & 是位操作符， && 才是并且的意思

vue 后面版本是打算做到 vm.items[indexOfItem] = newValue 也响应式更新页面的，不过也是要等到 3.0 版本之后，会通过 Proxy 这么个东西来搞

不完全是 父组件给子组件传递的属性，更像是把父组件的属性赋值给子组件，类似于： {代码...} 因此，如果父组件属性是个对象的话，那就是传递的引用，否则传递的是值的拷贝

如果你仔细观察，你上面的例子是会短暂的出现你刚才输入的值，于是立刻又变成了 1, 这是因为当你在 handleInput 里设置了 this.data，vue 观察到有数据变化了，会去更新页面，于是 input 框里的 value 会从上一次的 e.target.value 被重置为 1 (因为 :value = 1)

最后，在子组件对外提供的 api 设计上 ，建议把 showPanel 这个 prop 名称改成 visible，感觉会更直观，这方面可以参考下 element-ui 的 el-dialog

确实需要设置 defaultActive，不过你可以借助 this.$route.path 这个属性来计算 defaultActive，会比拦截地址栏，然后处理 url 匹配方便不少。

{代码...}

子组件需要的 props ['name','year','doSomething'] 是不变的，根据传入值不同，有不同的效果，那么这个子组件就是复用了的。这个可以类比下函数的复用，几个相近的功能，我可以封装一个函数，来提高代码复用性，提供几个参数来控制函数最后要实现的功能

如果你用的是 vue-cli 的 webpack 模板建的项目，那么你需要在 build/webpack.prod.conf.js 中加再一个 CommonsChunkPlugin：

按需引入 iview [链接] 按需引入 echarts [链接] 最后建议，把这些需要按需加载的模块放到统一放到一个文件里，后面好维护

@toBeTheLight 已经把开发工具说了，下面来说说怎么实现你的需求 首先在那个 vue-devtool 中找到你要查看的组件，选中它，保证组件名右侧有个 == $vm0 的东西，如下图， 然后去控制台，以我上面的组件为例，我要看组件上的 collapse 这个 prop，去控制台直接打印 $vm...

组件设计的有点问题，num-container 这个组件应该接受两个属性，一个 max-num 表示数量的最大值，一个是 num 表示现在展示的值，然后通过 .sync 将 num 属性做一个双向绑定