暮春初秋-CSDN博客

原创 vuex简述

1、概念：用户和视图交互更改状态的方式：actions,state:数据源，view:以声明方式将state映射到视图，数据的流向是单向的如下图：2、组件间通信：a.父子组件通信:子组件给父组件传值：props/$emit---在父组件中可以通过@eventa="参数1+=$event"获取值也可以通过正常的函数形参获取值,b.其他组件间传值（自定义事件):常用eventBus其他$parent,$root,$children,$refs等，3、vuex适用场景：a.多个视图以来同一状.

2021-11-08 16:25:15 320

原创 Vue 中模板编译的过程。

编译过程入口： src/platforms/web/entry-runtime-with-compile.js如果有render函数，进行render调用，没有render，进行模板转换render函数调用createCompile函数，接收baseCompile函数将模板转换为ast语法树，描述代码结构使用optimize(ast,options)优化抽象语法树将语法树转换为字符串形式的 js 代码最后会返回createCompileToFunction函数，是整个模板编译的入...

2021-11-05 16:46:52 206

原创虚拟 DOM 中 Key 的作用和好处

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下 Vue 虚拟 DOM 中 Key 的作用和好处。每天进步一点点。1、使用key可以最大程度的重用DOM，减少查询对比次数以及DOM操作；2、在具有相同父节点的时候，使用key可以避免渲染错误，最常见的用例是结合 v-for；3、用于强制替换元素/组件而不是重复使用它，比如给span标签设置key，当文本内容改变，总是会被替换而不是被修改，因此会触发过渡。在调用 patchVnode 进行新旧节点对比时，如果新旧节点都

2021-11-05 16:42:39 255

原创 Vue 响应式原理

1、Vue的实例init()方法中开始的，在init()方法中先调用initState()初始化Vue实例的状态，在initState方法中调用了initData()， initData()是把data属性注入到Vue实例上，并且调用observe(data)将data对象转化成响应式的对象。2、observe是响应式的入口, 在observe(value)中，首先判断传入的参数value是否是对象，如果不是对象直接返回。再判断value对象是否有__ob__这个属性，如果有说明做过了响应式处...

2021-11-05 16:12:03 101

原创 Vue 首次渲染的过程

一、从入口文件开始定义在 src/platform/web/entry-runtime-with-compiler.js二、Vue初始化过程1、首先取出Vue的$mount,对$mount进行重写,给$mount增加新的功能/ src/platform/web/entry-runtime-with-compiler.js// 保留 Vue实例的 $mount 方法const mount = Vue.prototype.$mountVue.prototype.$mount = f...

2021-11-05 15:20:40 670

原创简述domdiff

diff 的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。patch 函数接收两个参数 oldVnode 和 Vnode 分别代表新的节点和之前的旧节点,这个函数会比较 oldVnode 和 vnode 是否是相同的, 即函数 sameVnode(oldVnode, vnode), 根据这个函数的返回结果分如下两种情况：true：则执行 patchVnodefalse：则用 vnode 替换 oldVnodepatchVnode 函数做的工作:找到对应的真

2021-09-03 11:42:20 215

原创实现简易版Vue

// vue.js/**vue 功能:1.负责接收初始化的参数(选项) 2.负责将data中的属性注入到Vue实例,转换成getter/setter 3.负责调用observe监听data中所有属性变化 4.负责调用compiler解析指令/插值表达式* */ class Vue{ constructor(options){ //1.通过属性保存选项数据 this.$options=options.

2021-09-03 09:55:03 371

原创实现简单的vue-router之hash模式

/** * router分两部分一部分包含:options--记录构造函数中传入的对象(路由规则对象), * data--current--当前路由地址--响应式 vue.observable, * routerMap---记录路由地址和组件的对应关系, * 一部分包含:constructor,install(void),init(void) --调用后面方法的,initEvent(void),creatRouteMap(void),initComponents(void) * **/let .

2021-08-31 14:36:27 208

原创 vue基础知识

1当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。当我们点击按钮的时候动态给data增加成员,此时成员不是响应数据,如果想成为响应数据可以调用vm.set方法或者this.$set方法,其原理是通过调用此方法,将数据处理生成自己的get,set方法并添加到vue实例的属性中从而达到响应的目的2 Dom diff算法简述diff 的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给真实的 DOM 打

2021-08-23 09:58:55 150

原创 loader和plugin的区别

Loader，直译为"加载器"。主要是用来解析和检测对应资源，负责源文件从输入到输出的转换，它专注于实现资源模块加载,数据格式的转换，因为webpack只能处理js数据因此通过部分loader可以将webpack不能识别的数据转换成可识别的数据，在一定程度上可以将其视为管道，一个loader可以视为一个处理环节，loader通过返回处理过的结果给后续loader从而形成链式调用 Plugin，直译为"插件"。主要是通过webpack内部的钩子机制，在webpack构建的不同阶段执行一些额外...

2021-07-12 11:26:54 663

原创 Webpack 的构建项目的主要流程

Webpack的构建流程主要有哪些环节初始化参数：根据用户在命令窗口输入的参数以及 webpack.config.js 文件的配置以及环境变量，得到最后的配置。开始编译：根据上一步得到的最终配置初始化得到一个 compiler 对象，注册所有的插件 plugins，插件开始监听 webpack 构建过程的生命周期的环节（事件），不同的环节会有相应的处理，然后开始执行编译。确定入口：根据 webpack.config.js 文件中的 entry 入口，开始解析文件构建 AST 语法树，找出依赖，递归下

2021-07-12 09:59:25 180

原创浅谈this

浅谈前端this综述:一浏览器中综述:this是执行主体,即谁执行了函数,this就是谁一浏览器中1.全局情况下this是window2.块级作用域不影响this的指向(此处排除箭头函数)3.箭头函数中的this指向的是执行上下文的中的this(也可以说箭头函数中没有es5意义上的this)4.事件绑定中的this指向的是绑定事件监听的dom元素5.普通函数的调用依据函数前是否有点来判断有点的话this指向点前的变量没有指向的是window6.构造函数中指向是new的实例对象7.基于c

2021-06-01 20:11:49 64

原创 node开发脚手架工具初体验

node开发脚手架工具初体验

2021-05-07 22:10:52 122

原创 gulp常见方法使用

gulp常见方法使用常见方法使用gulp自带方法：1、src(url,option)2、dest(url,option):3、parallel(task1,task2....):4、series(task1,task2....):第三方插件1、gulp-sass（options）:2、gulp-babel（options）:3、gulp-swig（options）:4、gulp-imagemin（options）:4、del（options）:5、gulp-load-plugins:构建服务器：基本构建操作

2021-04-29 17:04:14 484

CSDNisSBa的博客