ZjSj0812-CSDN博客

原创 vue3.0 composition api

文章目录简单demosetup参数setup生命周期响应式APIreactivereftoRefs与toRefcomputedwatch在vue2中如果新增一个功能，需要在data中添加数据，在methods或computed或watch中添加逻辑，那么数据与业务逻辑是分散的。这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API

2021-03-26 16:45:30 315

原创基于G6的流程图绘制

最近项目中，有一个功能为流程图绘制，且需要根据当前以走到的流程在流程图中进行高亮。一开始是基于cavans进行绘制，但是由于绘制路线太多，计算点太多，最终放弃，选择基于g6重新进行了流程图绘制，该文章主要针对流程图模块，进行G6一些配置项的说明。安装： npm install --save @antv/g6引用： import G6 from '@antv/g6'简单demodata() { return { nodes: [{ id:

2021-03-22 17:42:32 2251

转载 Vue3 的新特性 —— 虚拟DOM的底层原理

本文原地址：Vue3 的新特性(二) —— Composition-ApiVdom （虚拟dom）凭借着出色的性能成为了目前的主流的前端框架都会选择的渲染方案。再加上优秀的 diff 算法对它的一步步的优化，使框架的价值得到了极致的体现，几乎成为了我们前端开发必不可少的方案。我们已经知道，Vue2.x 中的 Vdom 已经相当出色了，性能非常优秀。不过令人兴奋的是，尽管它够快，但在 Vue3 中还是对 Vdom 进行了重写，使 Vue3 突破了 Vdom 的性能瓶颈，更快！Vue3 如何重写 Vdom

2021-02-25 14:16:05 794

原创服务端渲染基础

SPA单页应用：优点：用户体验好；开发效率高渲染性能好可维护性好缺点：首屏渲染时间长不利于SEO传统的服务端渲染客户端激活为SPA同构应用：通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题通过客户端渲染页面接管页面内容交互得到更好的用户体验这种方式通常称之为现代化的服务端渲染，也叫同构渲染。服务端渲染基础什么是渲染：把【数据】+【模板】拼接到一起{msg: 'Hello World'}<h1>{{ msg }}

2020-12-31 14:36:23 113

原创 js中的继承方式

文章目录原型链继承盗用构造函数组合继承（结合原型链和盗用构造函数）js中继承的实现主要是通过原型链实现的，下面就一起来一下实现继承的方式吧~原型链继承将父类的实例作为子类的原型实现继承 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ console.log(this.property); } fu

2020-12-02 15:28:15 107

原创 Vue中Vnode的创建与处理

什么是虚拟DOM虚拟DOM（Virtual DOM）是使用JavaScript对象描述真实DOMVue.js中的虚拟DOM借鉴Snabbdom，并添加了Vue.js的特征，例如：指令和组件机制为什么要使用虚拟DOM：避免直接操作真实DOM，提高开发效率作为一个中间层可以跨平台，支持web端渲染，还可以支持服务端渲染虚拟DOM不一定可以提高性能：首次渲染的时候会增加开销复杂视图情况下提升渲染性能h函数vm.$createElement(atg, data, children,

2020-11-27 16:38:44 18560

原创 vue-set/delete/nextTick源码简读

Vue.set与vm.$set是向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新在vue中，一般会对初始化的数据进行响应式处理

2020-11-13 17:04:05 101

原创 Vue中的响应式处理（源码解读）

文章目录响应式处理入口响应式处理入口Observer函数定义在src/core/observer/index.js中，首先，我们来看一下这个函数的源码：export function observe (value: any, asRootData: ?boolean): Observer | void { // 判断value是否是对象 if (!isObject(value) || value instanceof VNode) { // 如果不是一个对象或者是vNode的一个实

2020-11-10 18:00:38 407

原创 vue初始化——源码简读

文章目录源码目录结构Vue的构建版本完整版与运行时版本的区别template与render执行顺序Vue函数的初始化Vue静态方法初始化Vue实例成员初始化过程Vue实例成员init方法Vue实例成员initState方法源码目录结构这里主要分析src目录下文件的主要功能compiler：与编译相关core：Vue核心代码components：keep-alive相关代码global-api：Vue静态成员相关初始化instance：Vue实例相关初始化observer：响应式相关代码

2020-10-27 15:17:36 416

原创 vue-router使用

文章目录路由使用编程式导航路由参数嵌套路由hash与history模式的区别路由钩子路由使用编程式导航push，replace，go(-1)与back的效果一样路由参数props嵌套路由hash与history模式的区别hash模式，（基于锚点与ononhashchange）history模式（基于HTML5中history Api， pushState（IE10以后才支持）， replacereplaceState）history需要服务器支持，单页应用中，地址找不到会返回找不到该

2020-10-09 15:55:45 124 1

原创 TypeScript入门学习

文章目录强类型与弱类型，静态类型与动态类型Flow静态类型检查方案什么是flow？安装使用flowTypeScript语言规范与基本应用强类型与弱类型，静态类型与动态类型强类型语言：总是强制类型定义的语言，要求变量的使用要严格符合定义，所有变量都必须先定义后使用。也就是说，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了弱类型语言：与强类型定义语言相反，弱类型的语言的东西没有明显的类型,他能随着环境的不同,自动变换类型一般来说：强类型偏向于不容忍隐式类型转换

2020-09-29 17:48:50 163

原创 JS的异步编程

文章目录同步与异步模式事件循环与消息队列异步编程的几种方式Promise的异步方案，宏任务/微任务Generator异步方案Async/Await语法糖同步与异步模式事件循环与消息队列异步编程的几种方式Promise的异步方案，宏任务/微任务Generator异步方案Async/Await语法糖...

2020-09-27 11:18:20 172

原创 ES6常见新特性总结

文章目录Object.assginObject.isproxyReflectpromiseclassObject.assgin【ES6学习笔记之】Object.assign()用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。使用方法：Object.assign(target, ...sources)使用场景：对象合并，为属性指定默认值，以下是为属性指定默认值的一个democonst DEFAULTS = { logLevel: 0, outputForma

2020-09-18 15:32:38 200

转载 js使用filter递归过滤树形结构数组

对树结构的数组进行数据过滤还是很常见的一种数据处理，这里进行一下记录以便以后使用// 菜单列表const menuList = [{ name: '系统管理', code: 'system_manage', children: [{ name: '用户管理', code: 'user_manage', children: [{ name: '添加用户', code: 'add_user

2020-09-16 14:48:13 3407 1

原创 Vue中实现父子组件双向数据传递的方式

文章目录双向数据传递v-mode双向数据传递这里提到的父子组件双向数据传递，即父子组件可以进行互相修改我们知道一般父向子传值，子通过props进行接收，子向父传值，是通过$emit发布一个事件，父通过事件的监听获取到子的值，详细可见vue-组件之间的通信这里我们通过v-model，model及sync来实现父子双向的数据传递v-mode在vue中的一些表单中，我们经常通过v-mode来实现数据的双向绑定，但其实v-model的本质是一个语法糖，如下代码<input v-model="

2020-09-05 09:49:29 957

原创基于elementUI的分页表格组件封装

在后台管理系统中，会经常大量的使用表格与分页，以下基于elementUI实现一个简单的table与pagination的封装这里在pageSize发生变化的时候，会令currentPage为1，即表格跳转到第一页，这里这么做的目的在于：例如当前页为10，当修改pageSize后，由于每页数据量变大，此时最大页数如果小于10，那么会再次触发current-change事件的发生，对到项目中，一般是会进行两次请求，因此这里直接跳转到第一页，那么由于是第1页，就不会触发current-change事件的发生

2020-09-03 17:50:05 1602

原创 vue中mixins、extends、extend使用及区别

文章目录mixinsmixinsmixins：选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中应用场景：在项目中，如果我们需要提取公用的数据或者通用的方法，并且这些数据与方法不需要组件间进行维护，就可以使用mixins...

2020-08-10 11:02:44 4862

原创 vue-cli3.0搭建服务端渲染SSR

文章目录关于SSR什么是SSR为什么要用SSRSSR原理通用代码约束：构建SSR应用程序创建vue项目修改router/index.js修改store/index.js修改main.js服务端数据预取客户端数据预取构建配置webpack进行打包操作创建服务关于SSR什么是SSR可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序简单点说：就是将页面在服务端渲染完成后在客户端直接显示。无需等待所有的 JavaScript

2020-07-31 21:58:04 2876 5

原创基于react-slick的react轮播图实现（大众点评分类菜单）

文章目录安装常见参数大众点评中分类菜单最近在看慕课网react实战课（大众点评），这里会将项目项目中一些主要的点记录下来以供以后参考安装npm install react-slick --save// css安装npm install slick-carousel --save常见参数属性名属性默认值属性含义arrowsbool (default: true)是否要显示左右箭头autoplaybool (default: false)是否自动播放au

2020-07-23 00:24:23 1955

原创 JS数组常用方法

push作用：给数组末尾添加一项返回值：数组的最新长度原数组发生改变var a = [2,3,4];var b = a.push(5);console.log(a); //[2,3,4,5]console.log(b); //4pop作用：删除数组最后一项返回值：被删除的内容原数组发生改变var arr = [2,3,4];console.log(arr.pop()); //4console.log(arr); //[2,3]unshift作用..

2020-07-12 00:02:26 101

原创 JS算法

文章目录排序冒泡排序快速排序插入排序斐波那契数列排序冒泡排序原理：从第一个元素开始，把当前元素与下一个元素进行比较，如果当前元素大于下一个元素，那么对两个元素进行位置交换，一直到最后一个元素，第一轮比较结束，此时最后元素即为数组中的最大值；之后再重复上述操作，由于此时最后一个元素已经是最大的元素，因此不需要比较最后一个元素，以此类推，直到比较结束，代码如下：function sort(ary){ let len = ary.length; for (let i=0; i<len;

2020-07-09 22:52:29 253

原创 js面试题

这是一篇js面试题原型与原型链prototype：每个函数都有一个prototype属性，它是一个对象，是调用该构造函数而创建实例的原型（可以将属性或方法暴露成共用的）proto：每个对象（除了null）上都带一个属性__proto_,他指向当前实例所属类的原型（即创建它的构造函数的原型对象）constructor：每个原型都有一个 constructor 属性,他指向当前所属类（即...

2020-07-08 17:48:21 290

原创 Webpack面试题整理

文章目录基本概念与配置性能优化基本概念与配置什么是loader？什么是pluginloader是模块转换器，使wenbpack拥有加载和解析非js文件的能力，是在module.rules中进行配置plugin可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果，在plugins中进行配置module， chunk， bundlemodule是开发中的单个模块，我们直接写出来的是 modulechunk是指webpac

2020-07-08 16:30:24 5280

转载简单实现vue中的依赖收集与响应

文章目录开始添加Observer添加Watcher添加Dep开始声明一个对象man，可以视为vue中的datalet man = { height: 180, weight: 70, wealth: 100000000}添加Observer作用在于将参数对象的属性变为响应式，只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例，将man作为参数扔进去。这里的proxyData是将man的属性代理到以man为参数的Observer实例上去。class Ob

2020-07-03 17:53:52 304

原创 Iterrator与Generator

文章目录Iterrator什么是Iterrator接口工作原理Iterrator的基本用法给对象添加Interator接口Generator基本概念next函数的用法yield*的语法Iterrator什么是Iterrator接口Symbol.iterator属性本身是一个函数可以为各种不同的数据结构提供统一的访问机制该接口主要供for…of来进行使用，即可以使用for…of进行遍历的就会具有Iterrator接口工作原理Iterator的遍历过程是这样的:创建一个指针对象，指向当前数

2020-07-01 15:51:07 223

原创 React基础（react-redux，中间件，异步action）—第四部分

文章目录react-redux中间件中间件用法applyMiddlewares异步actionredux-thunkredxu-sagareact-reduxreact-redux可以方便在react中使用redux提供的功能借助于Provider组件向根组件注入Store通过connect高阶组件，连接react组件和Redux状态层获取react组件所需的state和actionsreact-redux将所有组件分成两大类：UI组件和容器组件UI 组件负责 UI 的呈现，容器组件

2020-06-30 18:06:02 162

原创 React基础（redux）—第三部分

文章目录基本概念stateactionreducerreducer的拆分工作流程基本概念stateStore对象包含所有数据，用于集中管理数据，且是全局唯一state是只读的，唯一改变state的方法就是触发一个action其定义方式与React state相同{ todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: false }], vis

2020-06-30 17:20:34 117

原创 React基础（SCU，公共逻辑抽离）—第二部分

文章目录SCU、PureComponent与memoSCU：shouldComponentUpdatePureComponent和memo关于组件公共逻辑的抽离高阶组件Render PropsHOC vs Render PropsRedux基本概念store stateactionreducer单项数据流react-redux异步action中间件SCU、PureComponent与memoSCU：shouldComponentUpdateReact默认：父组件有更新，子组件无条件更新！！因此在不

2020-06-30 17:20:14 768

空空如也

空空如也