Vue
文章平均质量分 68
Vue的一些笔记
ccattempt
是的,就在那里。
展开
-
require.context的用法
require.context是webpack提供的一个api。通常用于批量注册组件。require.context("文件夹路径", "布尔值,表示是否查询子目录", "正则表达式,用于过滤文件")例如,假设当前目录下有个叫module的文件夹,里面放置了a.vue和b.vue两个文件,现在想要全局注册这两个组件:const files = require.context('./components', true, /\.vue$/i) // 筛选出components文件夹下所有的vue文件,原创 2021-10-18 16:06:00 · 426 阅读 · 0 评论 -
vue使用render函数和template模板的渲染对比
在vue中我们通常使用template进行模板的设计,但是在某些时候无法使用template进行渲染,此时需要使用render函数。实际在vue源码中,template会被转化成render函数。目录1、render函数的简单用法2、使用render函数渲染插槽1、render函数的简单用法render函数接收1个参数(createElement函数),返回值是createElement函数的返回值(实际就是一个虚拟DOM)。createElement函数接收3个参数,分别代表HTML标签名(也可.原创 2021-09-26 22:59:56 · 3209 阅读 · 0 评论 -
Vue源码学习2--$mount的执行流程
主要梳理了一下$mount的执行和构建过程。文章重点有两块:1、公共的 $mount 方法的创建,2、带编译模板的 vue 给 $mount 扩展了编译部分。上次梳理了vue入口文件的怎么查找,这次看一看$mount。由于后面尚未学习,只简单梳理流程。1、扩展$mount首先打开entry-runtime-with-compiler.js文件,这里我们可以看到对$mount的扩展:先用 mount 变量存储Vue.prototype.$mount备用,接着重新给Vue.prototype.$m.原创 2021-09-04 18:58:09 · 682 阅读 · 0 评论 -
Vue源码学习1--获取源码和查找入口文件
目录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"打包原创 2021-09-04 11:46:50 · 3376 阅读 · 0 评论 -
$nextTick的源码核心逻辑分析
源码用了flow做静态检查,这里去除flow部分核心逻辑其实就两步:保存回调函数根据不同浏览器的情况选择不同的方法延迟执行回调函数首先看函数nextTick的实现:const callbacks = []let pending = falselet timerFunc// cb: 回调函数// ctx: 用于改变this指向function nextTick (cb, ctx) { let _resolve // 保存通过then传入的回调函数 callbacks.pu.原创 2021-08-29 13:15:14 · 119 阅读 · 0 评论 -
利用Vue.observable实现简易的Vuex
目录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, ..原创 2021-08-28 14:20:24 · 391 阅读 · 0 评论