poppy.xu-CSDN博客

原创手写Promise

从使用的角度往前推Promise的原理 Promise 是一个类，在执行类的时候，需要传入一个执行器，执行器会立即执行 Promise 中有三种状态分别为成功 fulfilled、失败 rejected，等待 pending pending为初始化，可以变成fulfilled 或者 rejected, 状态一旦被改变就不能更改 resolve函数和reject函数用来改变Promise状态 resolve -> fulfilled reject -> rejected then

2021-02-20 15:00:22 125

原创关于函数式编程应该知道的基础

内容概要为什么学习函数式编程，以及什么是函数编程函数式编程的特性(纯函数，柯里化，函数组合) 函数式编程的应用场景函数式编程库 Lodash 为什么学些函数式编程随着React 的流行备受关注，Vue3.0也开始拥抱函数式，函数式可以抛弃this，打包过程中更好的利用tree shaking 过滤无用代码，方便测试，方便并行处理，有很多库可以帮助我们进行函数开发 Lodash,underscorce,ramda 什么是函数编程函数式编程是编程范式之一，常说的还有面向对象和面向过程面向对象：把

2021-02-18 14:20:27 1308

原创 Vue.js源码分析——模板编译过程

什么是抽象语法树，为什么使用抽象语法树什么是抽象语法树抽象语法树简称AST 使用对象的形式描述树形的代码结构此处的抽象语法树是用来形容树形结构的HTML字符串为什么使用抽象语法树模板字符串转换成AST后，可以通过AST对模板进行优化标记模板中的静态内容，在patch的时候直接跳过静态内容在patch的过程中静态内容不需要对比和重新渲染 ...

2021-02-08 17:10:00 682 2

原创解析snabbdom源码,理解virtual dom 实现

谈论Virtual DOM 之前，首先说下什么是DOM, 为什么需要虚拟DOM，他们之间存在着什么样的关系什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口，将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合，简单的说，DOM就是解析文档，将web页面和脚本或程序语言连接起来。更多内容可以参考MDN中对DOM的定义为什么需要虚拟DOM DOM主要问题是没有为创建动态UI而优化以前直接使用 DOM API 比较繁琐，然后有了 jQuery 等库来简化 DOM.

2021-02-04 15:53:40 348 2

原创 Vue.js源码分析——单步调试响应式

同样是Vue.js专栏系列，本文算是自己的查缺补漏，如果有不正确的地方欢迎大家指正，如果觉得在文中有所收获也欢迎大家点上宝贵的???? 写文不易，请多鼓励参考文章：图解Vue响应式原理准备代码这个文章很简单，主要是看下面的代码运行的过程 <script src="../../dist/vue.js"></script> <body> <div id="app"> {{ msg }} </div> <script&

2021-01-29 10:26:56 401

原创 Vue.js源码分析——页面首次渲染

最近在看Vue的响应式原理，记录下自己的总结，方便后续查看。如果这篇文章能给你一些思考，不要吝啬的帮我点上???? 哦要是写的有啥错误 ❌ ，也拜托大佬们不吝赐教 Vue初始化下面是vue的初始化模板，这段代码很简单，最后会在页面输出 hello world，下面我们从new Vue 开始来分析下他是如何实现的 <template> <div> {{ message }} </div> </template> <script

2021-01-27 14:38:55 3437 11

原创 git操作命令

git删除远程分支 git push origin --delete [branch_name] git删除本地分支 git branch -d name 在版本历史间切换 git reset --hard [commmit_id] 查看执行过的命令历史 git reflog 撤销工作区文件修改 git checkout --file_name 查看git提交记录 git log --graph 查看过去5次提交记录 git log -5 --pretty --oneline 切换远程仓库 g

2021-12-10 15:57:31 236

原创 Vue前端开发规范

规范的目的是为了提高团队协作，便于功能开发及后期维护，输出高质量的代码命名规范普通变量命名规范命名方法：驼峰命名法命名规范：命名必须是跟需求内容相关联的词，比如声明一个变量表示我的学校，那么可以定义为const mySchool = "我的学校" 变量的命名是复数的时候需要加s,比如我想声明一个数组，表示很多人的名字，const names = [] 常量命名规范命名方法：全部大写命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。 const MAX_COUNT .

2021-07-26 16:07:03 417 2

原创页面渲染基础知识

我们这里所讨论的渲染: 把[数据] + [模板] 拼接到一起内容概要传统的服务端渲染客户端渲染现代化的服务端渲染(同构渲染SSR) 传统的服务端渲染早期的wb页面渲染都是在服务端进行的工作流程代码服务端代码 const express = require('express') const fs = require('fs') const template = require('art-template') const app = express() app.get('/', (.

2021-03-08 18:31:53 277

原创组件之间的通信

前言本文从大概会包括以下几个内容常用的组件通讯方式 Vuex的核心概念和基本使用一个demo理解Vuex 模拟实现Vuex 组件通讯方式父子传子子传父亲不相关组件传值 Vuex核心概念

2021-03-02 20:09:48 233

原创那些Vue面试常问的原理问题(看一眼不亏)

请简述 Vue 首次渲染的过程。 Vue首次渲染的时候先去调用vm._init()方法，然后去执行两个实例方法vm.$mount，这两个$mount在不同的地方定义，一个作用是将模板编译成render函数，一个是渲染模板 vm.$mount /platforms/web/entry-runtime-with-compiler.js中定义核心作用是调用了compileToFunctions将模板编译成render函数 vm.$mount 在/platform/web/runtiem/index.j

2021-02-09 16:47:40 322

原创 v-for时为什么要写 key ?

开发vue的朋友也都知道，一定要去写上key 不然通过vue-cli创建的项目会报出警告。也知道key是用来标记当前元素。这篇文章的目的是看一下源码，了解下我们为啥要去写这个key ？

2021-02-01 16:20:08 1185 1

原创 Vue.js源码分析04—— patchVnode和createElm

下面我们来分析下这两个函数，这两个函数我们就不贴源码了，主要讲下大概流程，感兴趣的可以根据地址去看对应源码 patchVnode 他的作用是对比新旧vnode, 也就是执行diff算法找到差异，更新到真实dom。函数定义在core/vdom/patch.js里面 Created with Raphaël 2.2.0开始新节点没有文本新老节点是否都有子节点并且不相等对子节点，把子节点的差异更新到真实dom新节点有子节点，老节点没有子节点先清空老节点dom的文本内容清空，为当前dom节点加入子节点老节点有子节点

2021-02-01 13:39:27 402

雅萍儿的博客