ccattempt的博客

require.context是webpack提供的一个api。通常用于批量注册组件。 require.context("文件夹路径", "布尔值，表示是否查询子目录", "正则表达式，用于过滤文件") 例如，假设当前目录下有个叫module的文件夹，里面放置了a.vue和b.vue两个文件，现在想要全局注册这两个组件： const files = require.context('./components', true, /\.vue$/i) // 筛选出components文件夹下所有的vue文件，

在vue中我们通常使用template进行模板的设计，但是在某些时候无法使用template进行渲染，此时需要使用render函数。实际在vue源码中，template会被转化成render函数。 目录1、render函数的简单用法2、使用render函数渲染插槽 1、render函数的简单用法 render函数接收1个参数(createElement函数)，返回值是createElement函数的返回值（实际就是一个虚拟DOM）。createElement函数接收3个参数，分别代表HTML标签名（也可.

主要梳理了一下$mount的执行和构建过程。文章重点有两块：1、公共的 $mount 方法的创建，2、带编译模板的 vue 给 $mount 扩展了编译部分。 上次梳理了vue入口文件的怎么查找，这次看一看$mount。由于后面尚未学习，只简单梳理流程。 1、扩展$mount 首先打开entry-runtime-with-compiler.js文件，这里我们可以看到对$mount的扩展： 先用 mount 变量存储Vue.prototype.$mount备用，接着重新给Vue.prototype.$m.

目录1、下载源码2、查找入口文件 1、下载源码 首先在Github上找到vue源码，使用git下载： git clone https://github.com/vuejs/vue.git 安装依赖： npm install 修改package.json的scripts里面的dev命令，添加--sourcemap，方便日后调试： "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev" 打包

源码用了flow做静态检查，这里去除flow部分 核心逻辑其实就两步： 保存回调函数 根据不同浏览器的情况选择不同的方法延迟执行回调函数 首先看函数nextTick的实现： const callbacks = [] let pending = false let timerFunc // cb: 回调函数 // ctx: 用于改变this指向 function nextTick (cb, ctx) { let _resolve // 保存通过then传入的回调函数 callbacks.pu.

目录1、搭架子2、注入Vue构造函数3、初始化并声明commit和dispatch4、利用Vue.observable实现响应式5、利用Object.defineProperty实现getters6、测试7、完整代码 1、搭架子 首先把大致的架子搭好。 let Vue; let _self; class Store { constructor(state, getters, mutations, actions) {} commit(cb, ...args) {} dispatch(cb, ..