Vue
挣钱去植发
关注一下呀
展开
-
[Vue源码解析] 最佳实践
[Vue源码解析] 最佳实践1、列表属性和v-if、v-if-else、v-else中使用key2、路由切换组件不变这是由于两个路由用的是同一个组件,由于组件复用,而不会进行重新渲染。解决方法:在watch中监测$route的query值在router-view组件上添加key(不推荐)3、为所有路由同一添加query使用全局守卫beforeEach,有指定query才放行,没有调用next(path+query)二次跳转使用函数劫持:拦截router.history.t原创 2020-12-20 17:45:17 · 171 阅读 · 0 评论 -
[Vue源码解析] 生命周期
[Vue源码解析] 生命周期、指令系统、过滤器分为四个阶段:初始化阶段、模版编译阶段、挂载阶段和卸载阶段errorCaptured与错误处理:用户代码的错误会通过handleError函数唤起errorCaptured钩子函数,这个函数的作用是捕获子孙组件的错误,可返回false避免错误继续向上传播,如果全局的config.errorCaptured被定义,那么所有的错误也会发给他。初始化实例属性:initLifeCycle挂载paren,paren,paren,root,children,child原创 2020-12-20 17:44:42 · 101 阅读 · 0 评论 -
[Vue源码解析】全局API的实现原理~
[Vue源码解析] 全局API的实现原理1、 Vue.extend(options)用法:使用基础的Vue构造器创建一个子类,options为自定义组件选项/** * Vue.extend(options) */let cid = 1Vue.extend = function (extendOptions) { extendOptions = extendOptions || {} const Super = this const SuperId = Super.cid c原创 2020-12-11 16:59:17 · 181 阅读 · 0 评论 -
[Vue源码解析]生命周期相关的API
[Vue源码解析]生命周期相关的API生命周期相关的实例方法有四个,vm.forceUpdate和vm.forceUpdate和vm.forceUpdate和vm.destroy是在lifecycleMixin中挂载到Vue原型上去的,vm.nextTick是在renderMixin中挂载到Vue原型上去的,vm.nextTick是在renderMixin中挂载到Vue原型上去的,vm.nextTick是在renderMixin中挂载到Vue原型上去的,vm.mount则是在跨平台代码中挂载上去的。原创 2020-12-10 18:30:27 · 106 阅读 · 0 评论 -
[Vue源码解析] 事件相关的实例方法
[Vue源码解析] 事件相关的实例方法在Vue中有五个重要的函数用来向Vue的原型中挂载方法:initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)在initMixin中会向Vue构造函数的prototype属性添加_init方法,执行new Vue()时,会调用_init方法来实现一系列初始化操作,包括整个生命周期的流程以及响应式系统流程的启动等。在stateMixin中向Vue原型原创 2020-12-08 18:14:21 · 56 阅读 · 0 评论 -
[Vue源码解析] 代码生成器
[Vue源码解析] 代码生成器代码生成器:将AST节点转换为代码字符串,代码字符串就是我们交给渲染函数的内容。代码字符串中具有生成VNode的方法,我们先罗列出这三种方法:1、createElement,创建元素VNode,别名_c,参数1:tag名称,参数2:包含属性的对象,参数三:子节点列表2、createTextVNode, 创建文本VNode,别名_v,参数:文本3、createEmptyVNode, 创建注释VNode,别名_e,参数:文本假如有一个模版为:<div id="e原创 2020-11-28 17:04:16 · 949 阅读 · 0 评论 -
[Vue源码解析] 优化器
[Vue源码解析] 优化器优化器作用:在AST中找出静态子树并打上标记好处:1、每次重新渲染时,不需要为静态子树创建新节点。2、在虚拟DOM中打补丁(patching)的过程可以跳过。步骤:1、在AST中找出所有静态节点并打上标记(static:true),若当前节点为静态节点,则其所有子节点也需要为静态节点。2、在AST中找出所有静态根节点并打上标记(staticRoot:true),AST中从上往下寻找,找到静态节点则标记为静态根节点,由于1的特性,其子节点也为静态节点。判断是否是静态节点:原创 2020-11-28 15:47:07 · 89 阅读 · 0 评论 -
[Vue源码解析] 解析器
[Vue源码解析] 解析器解析器类型:HTML解析器、文本解析器、注释解析器原理:将模版字符串按照一定的条件循环进行切割,对切割下来的内容进行类型判断,在生产对应类型的AST节点插入到父节点上,直到切割完毕最终生成一颗AST树。逻辑概览:/** * 整体逻辑 */export function parseHTML (html, options) { while (html) { if (!lastTag || !isPlainTextElement(lastTag)) {原创 2020-11-28 13:12:24 · 261 阅读 · 0 评论 -
[Vue源码解析] patching算法
[Vue源码解析] patching算法pathching算法:通过对比新旧VNode的不同,然后找出需要更新的节点进行更新操作:1、创建新增节点 2、删除废弃节点 3、修改需要更新的节点创建节点的三种类型:1、元素节点(tag属性):document.createElement 2、text属性(text属性和isComment属性为false):document.createTextNode3、注释节点(text属性和isComment属性为true):document.createCommen原创 2020-11-28 10:32:03 · 586 阅读 · 0 评论 -
[Vue源码解析] VNode类型
[Vue源码解析] VNode类型VNode类型:注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点VNode类:/** * VNode类 */ export default class VNode{ constructor (tag, data, children, text, elm, context, componentOptions, asyncFactory) { this.tag = tag this.data = data this原创 2020-11-26 23:13:03 · 510 阅读 · 0 评论 -
[Vue源码解析] 变化侦测相关API
[Vue源码解析] 变化侦测相关API1、vm.$watch(expOrfn, callback, {options})用法:用来观察单个数据或多个数据在Vue实例上的的变化。/** * 方法实现 * @param {*} expOrFn * @param {*} cb * @param {*} options */Vue.prototype.$watch = function (expOrFn, cb, options) { const vm = this options原创 2020-11-24 17:38:08 · 99 阅读 · 0 评论 -
[Vue源码解析] Array的变化侦测
[Vue源码解析] Array的变化侦测前言:数组由于具有许多原生方法对其元素进行修改,而上文中说过Object的变化侦测无法就这些方法改变的属性通知其依赖,所以需要新的方法来进行Array的变化侦测。核心思想:新建一个对象arrayMethods,称之为拦截器,用它覆盖数组的__proto__,即数组的原型对象Array.prototype,在数组更新数据时,即执行push、pop、unshift、shift、sort、reverse、splice这些方法时,执行拦截器其中的方法来通知依赖数组dep中原创 2020-11-23 15:01:02 · 165 阅读 · 0 评论 -
[Vue源码解析] Object的变化侦测
[Vue源码解析] Object的变化侦测含义:Vue中通过对state中Object属性的追踪,在其值变化时通知相应的组件,再让组件去寻找这一属性用到的位置作出更新,本篇文章探讨对Object属性的追踪。词义:1.observer:将对象转换为setter和getter形式。 2.dep:依赖数组,存对同一数据有依赖关系的watcher。(依赖也就是需要通知更新数据,对该属性有依赖的地方) 3.watcher:依赖。图解:代码实现:1.将object的属性转换成响应式数据(含se原创 2020-11-21 22:02:51 · 196 阅读 · 0 评论 -
上传图片到服务端
客户端上传图片到后端前端为vue,后端为node客户端代码1.1 template中:<input type='file' multiple='multiple' ref='selectfile' @change='onload' /> <--! multiple表示可传多个图片 -->1.2 script中:onload(){ var pic...原创 2020-04-25 22:49:23 · 215 阅读 · 0 评论