VUE
及时行乐、
不求上进的码农不是好ADC
展开
-
【踩坑】掉进keep-alive 的 include的坑中
今天查看同事写的面包屑标签,发现其使用keep-alive来缓存路由组件,缓存组件输入内容和查询结果。后来我去测试,发现没有起到作用。查看代码,按需缓存逻辑没有错误,router上的name也是正确。于是产生疑惑,这是什么神奇的bug。切记!include配置的name,是组件的name,而不是router上的name!切记!include配置的name,是组件的name,而不是router上的name!切记!include配置的name,是组件的name,而不是router上的name!原来是na原创 2020-11-18 11:12:35 · 2231 阅读 · 4 评论 -
【Vue】Vue源码第五步——响应式原理(nextTick)
我本人的源代码是比较新的,以前的源码中,nextTick是使用microTimerFunc 和 macroTimerFunc 2 个变量控制异步任务队列的,这里只分析我本地的源码执行流程。src\core\util\next-tick.js文件定义了一些主要的变量callbacks:保存回调函数的一个数组flushCallbacks:拿到callbacks保存的数组,遍历执行timerF...原创 2020-05-08 10:14:55 · 276 阅读 · 0 评论 -
【Vue】Vue源码第五步——响应式原理(派发更新)
很久之前的文章说到,依赖收集是通过defineReactive方法中,对对象设置get方法并通过dep.depend()方法,添加到watcher上。派发更新操作,主要就是在对象的set方法中。src\core\observer\index.jsset: function reactiveSetter (newVal) {const value = getter ? getter.call...原创 2020-05-06 10:11:10 · 221 阅读 · 0 评论 -
【Vue】Vue源码第五步——响应式原理(依赖收集)
根据之前对Vue初始化的分析,我们可以得知,初始化数据的方法在initState中,分别对props,methods,data,computed,watch进行了初始化:export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initP...原创 2020-04-29 11:42:04 · 459 阅读 · 0 评论 -
【Vue】Dll plugin使用
最近工作较忙没时间更新博客,今天在搭建公司新项目,顺便分享一下这个提高编译性能的pluginwebpack里面自带dll plugin项目使用的是vue-cli 3.0构建出来的项目安装:npm install webpack-cli clean-webpack-plugin --dev项目根目录新增dll配置文件,用于生成提取出来公共模块webpack.dll.conf.jsco...原创 2020-04-22 15:40:31 · 2490 阅读 · 0 评论 -
【Vue】Vue源码第四步——组件化(组件注册、组件生命周期)
在Vue中,组件分为全局组件和局部组件,首先先看看全局组件Vue是怎么注册的。全局组件在Vue中其实内置了很多全局组件,在init做option合并的时候我们可以看到Vue内置组件,比如keep-live、transition具体调试位置是init时候,把组件options和Vue的option合并时候我们注册全局组件的时候都是使用如下方式注册:const Hello = Vue.com...原创 2020-03-09 11:32:40 · 373 阅读 · 0 评论 -
【Vue】Vue源码第四步——组件化(patch)
代码逻辑来看,我们Vue实例的时候会执行this._init方法,_init方法执行到最后会进行挂载,即执行mount;mount;mount;mount其实是执行mountComponent函数的结果,mountCopoment函数在src\core\instance\lifecycle.js中定义;mountComponent中有个vm._update,而这个_update方法是在lifecy...原创 2020-03-04 14:56:17 · 627 阅读 · 0 评论 -
【Vue】Vue源码第四步——组件化(createComponent)
我们在创建Vue实例的时候,经常会这样写new Vue({ data: { count : 1 }, render: (h) => h(App)}})之前初始化章节已经讲过,render函数的参数是createElementcreateElement作用十分重要,并且会有两种情况:1、如上例子,接收组件2、把template编译成rend...原创 2020-02-28 17:54:39 · 602 阅读 · 0 评论 -
【Vue】Vue源码第三步——初始化(eventsMixin、renderMixin)
eventsMixinon监听当前实例上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组,迭代调用emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组,迭代调用emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组,迭代调用on方法,在当前实例的events上添加事件监听注意,事件如果由$emit触发,那么f...原创 2019-12-26 08:56:13 · 796 阅读 · 0 评论 -
【Vue】Vue源码第三步——初始化(lifecycleMixin、stateMixin)
为了帮助更好理解,本人做了一个思维导图,大家可以搭配思维导图享用。Vue初始化源码——思维导图LifecycleMixin_update第一次和后面的更新使用不同的__patch__根据prevEl来设定属性,prevEl就是旧节点的el属性根据vm.el属性根据vm.el属性根据vm.el来设定属性,vm.$el是经过__patch__打补丁过的,可能删除了也可能变换了内容Vue....原创 2019-12-18 09:13:01 · 902 阅读 · 0 评论 -
【Vue】Vue源码第三步——初始化(initMixin)
为了帮助更好理解,本人做了一个思维导图,大家可以搭配思维导图享用。Vue初始化源码——思维导图Vue创建实例vue-dev\src\core\instance\index.jsimport { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './rende...原创 2019-12-12 16:12:19 · 547 阅读 · 0 评论 -
【Vue】Vue源码第二步——入口文件
我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/entry-runtime-with-compiler.js/* @flow */import config from 'core/config'import { warn, cached } from 'c...原创 2019-12-11 09:38:07 · 185 阅读 · 0 评论 -
【Vue】Vue源码第一步——目录结构
开始学习探索源码之前,要先熟悉整个源码的目录结构以及整个文件的架构是怎么组成的,所以第一章先看目录结构目录结构Vue.js 的源码都在 src 目录下,其目录结构如下。src├── compiler # 编译相关├── core # 核心代码├── platforms # 不同平台的支持├── server # 服务端...原创 2019-12-11 09:36:04 · 188 阅读 · 0 评论 -
【Vue】Vue 的 Props 如何初始化
1.为什么props在html模板中要使用kebab-case (短横线分隔命名),而在Vue的options里面声明props却要用camelCase (驼峰命名法)?2.Vue中是如何初始化props属性的?HTML层面:代码层面:在_init初始化过程中,如果Vue实例有props属性时候,会对props的属性进行遍历操作,把props里的内容(数组、对象)变成Vue实例的prop...原创 2019-11-27 09:39:58 · 4637 阅读 · 0 评论 -
【Vue】Vue的自动化测试之Jest 基础知识
单测(unit testing)Jest新建一个vue项目vue create test-example1、依赖安装1、依赖安装vue-jest、Vue Test Utils、babel-jest、babel-preset-envnpm install --save-dev vue-jest Vue Test Utils babel-jest babel-preset-envvu...原创 2019-11-14 16:00:30 · 4483 阅读 · 0 评论 -
【Vue】VUE查漏补缺
.sync和v-model区别.sync1、以前是父组件绑定一个值,然后通过props传给子组件,子组件需要修改时候,子组件触发$emit方法,提交给父组件进行修改。操作如下:this.$emit('update:title', newTitle)然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如:<text-document v-bind:title="doc...原创 2019-06-30 20:31:41 · 270 阅读 · 0 评论 -
【Vue】Vue源码--createElement
createELementVue.js 利用 createElement 方法创建 VNode,它定义在 src/core/vdom/create-elemenet.js// wrapper function for providing a more flexible interface// without getting yelled at by flowexport function ...原创 2019-07-11 09:29:54 · 769 阅读 · 0 评论 -
【Vue】Vue源码阅读笔记(1)
本文主要记录了VUE源码中的三部分:VUE初始化流程VUE中响应式实现VUE对数组做特殊处理初始化流程入口src\platforms\web\entry-runtime-with-compiler.js扩展$mount const options = this.$options // resolve template/el and convert to render fu...原创 2019-07-07 13:40:36 · 414 阅读 · 0 评论 -
【Vue】部署、测试
vue-cli环境变量配置四种方式来制定环境变量:在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.developmen...原创 2019-07-21 09:26:41 · 260 阅读 · 0 评论 -
【Vue】Vue中的Virtual Dom
Virtual Dom是如何提升VUE渲染速度的?总结:模板数据在发生变化的时候,Vue会重新编译渲染函数,渲染函数会生成一个新的VNode,同时在Vue内部中,这个新的VNode会和oldVNode进行对比(diff算法),找出差异的地方,进行更新。渲染函数: 生成Vue内部的虚拟VNode。VNode: 理解为Vue的一个虚拟文档节点,会被Vue创建成一个真实的dom节点。Virtu...原创 2019-06-26 14:27:26 · 174 阅读 · 0 评论