js
挣钱去植发
关注一下呀
展开
-
[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 · 186 阅读 · 0 评论 -
[Vue源码解析] 生命周期
[Vue源码解析] 生命周期、指令系统、过滤器分为四个阶段:初始化阶段、模版编译阶段、挂载阶段和卸载阶段errorCaptured与错误处理:用户代码的错误会通过handleError函数唤起errorCaptured钩子函数,这个函数的作用是捕获子孙组件的错误,可返回false避免错误继续向上传播,如果全局的config.errorCaptured被定义,那么所有的错误也会发给他。初始化实例属性:initLifeCycle挂载paren,paren,paren,root,children,child原创 2020-12-20 17:44:42 · 111 阅读 · 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 · 193 阅读 · 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 · 150 阅读 · 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 · 63 阅读 · 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 · 978 阅读 · 0 评论 -
[Vue源码解析] 优化器
[Vue源码解析] 优化器优化器作用:在AST中找出静态子树并打上标记好处:1、每次重新渲染时,不需要为静态子树创建新节点。2、在虚拟DOM中打补丁(patching)的过程可以跳过。步骤:1、在AST中找出所有静态节点并打上标记(static:true),若当前节点为静态节点,则其所有子节点也需要为静态节点。2、在AST中找出所有静态根节点并打上标记(staticRoot:true),AST中从上往下寻找,找到静态节点则标记为静态根节点,由于1的特性,其子节点也为静态节点。判断是否是静态节点:原创 2020-11-28 15:47:07 · 98 阅读 · 0 评论 -
[Vue源码解析] 解析器
[Vue源码解析] 解析器解析器类型:HTML解析器、文本解析器、注释解析器原理:将模版字符串按照一定的条件循环进行切割,对切割下来的内容进行类型判断,在生产对应类型的AST节点插入到父节点上,直到切割完毕最终生成一颗AST树。逻辑概览:/** * 整体逻辑 */export function parseHTML (html, options) { while (html) { if (!lastTag || !isPlainTextElement(lastTag)) {原创 2020-11-28 13:12:24 · 277 阅读 · 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 · 632 阅读 · 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 · 561 阅读 · 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 · 107 阅读 · 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 · 174 阅读 · 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 · 215 阅读 · 0 评论 -
跨域之jsonp
跨域问题:由于同源策略,跨协议、主机号、端口号其中之一便会产生跨域问题,导致请求无法发送。解决方法:主流的前端解决方法为jsonp,其他如iframe或flash(这个好像要淘汰了)未去了解。而且做项目的时候跨域问题好像一般都是后端解决,主要jsonp也就解决get请求跨域,遇见post就无能为力了。jsonp原理:运用了script标签可以跨域请求的特性,动态创建script标签发起请求,通过回调函数获取返回的参数。代码演示:function ajax(obj){ var de..原创 2020-11-09 16:21:21 · 626 阅读 · 0 评论 -
浅拷贝和深拷贝
1.浅拷贝通过循环,将a对象的属性和方法拷贝给b属性,但是由于拷贝时a对象内部的引用数据类型时,其值为堆里该引用数据类型的地址值,所以会造成a、b两个对象中的引用数据类型指向堆中同一块内存地址,这会造成牵一发而动全身,改动a的引用数据类型会导致b中的该值也受到牵连。var a = { name:"objectaaaaa", go:function(){ console.log("这是对象a的方法") }, another:{原创 2020-11-02 16:36:55 · 197 阅读 · 2 评论 -
js继承
对象拷贝function extend(old,new){ for(let key in old){ if(new[key]){ continue }else{ new.key = old[key] } }}2.原型继承function Person(){ this.have = 119}function Student(num,name,age){ this.num = num this.name = name ..原创 2020-10-29 17:30:16 · 60 阅读 · 0 评论 -
10.24算法
题:解:题解:找不重复子串的最长长度,首先对字符串每一个字符进行遍历,在遍历中计算出其每个字符对应的不重复长度,在过程中保留最大值。题:解:题解:采用两分法,两个数组合并,m+n个长度,处于新数组的右边的第一个数可以将原来的两数组各分为两个部分,暂记右边部分第一个元素为a和b,由于是合并,indexa+indexb = c.length,而且,indexa-1对应的元素必定小于indexb对应的元素,而indexb-1对应的元素也必定小于indexa对应的元素,通过这个特性不断循环寻..原创 2020-10-24 23:28:52 · 123 阅读 · 0 评论 -
10.23算法
题:解:题解:采用Hashmap的方法,键为数组value,值为其index,通过对其gap键对数组进行遍历寻找,找出其与target差值的下标题:解:题解:这题主要难在是链表操作,值不断相加,通过sun创建新节点直到最长的链表循环完毕为止,通过add标记是否进位,特别注意在循环最后还有一次进位没有计算需要警惕。...原创 2020-10-23 21:13:58 · 73 阅读 · 0 评论 -
canvas学习笔记
canvas 学习笔记canvas不建议在样式中设置尺寸,会导致画布中内容同步放大。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TihUgnoN-1589252734175)(C:\Users\86177\AppData\Roaming\Typora\typora-user-images\image-20200506211420624.png)]默认宽度1px,默认颜色黑色,线条存在粗细不一问题:对齐的点是线的中心位置 会把线分成两个0.5排序,显示的是原创 2020-05-12 11:06:21 · 219 阅读 · 0 评论