- 博客(23)
- 收藏
- 关注
RSS订阅原创 Diff算法
定义：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁其有两个特点：比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中当状态变更的时候，重新构造一棵新的对
2021-10-28 22:11:26
290
原创 js数组去重
条件：将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1、 ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undef
2021-10-28 22:03:17
134
原创 （v-slot）插槽
定义：在子组件中用<slot></slot>划出一块区域来显示父组件中页面结构，显示的结构在父组件的子组件标签中设置就可以了！插槽怎么显示数据显示的结构在父组件的子组件标签设置就行插槽分为几种默认插槽 具名插槽 作用域插槽具名插槽：给具体的插槽命名，并在使用的时候传入插槽的名称import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` ..
2021-10-28 19:29:21
185
原创 小程序生命周期+组件的生命周期+promise封装wx.request
小程序的生命周期：1.生命周期：生命周期是指一个小程序从创建到销毁的一系列过程2.小程序生命周期分为三部分：应用级别： App()来注册一个小程序 ；页面级别： 通过Page()来注册一个页面；组件级别： 通过Component()来注册一个组件；（1）应用级别的生命周期：App({ onLaunch: function(options) { // 监听小程序初始化。小程序初始化完成时（全局只触发一次） }, onShow: function(o..
2021-10-21 11:35:57
173
原创 Vue2与Vue3双向数据绑定的区别
新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()原理：Vue2.0使用Object.defineProperty对象以及对象属性的劫持+发布订阅模式，只要数据发生变化直接通知变化 并驱动视图更新。vue3.0双向数据绑定ProxyVue3.0中的响应式采用了ES6中的Proxy方法。Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）const p = new Proxy(target...
2021-10-21 10:41:54
168
原创 Typescript的基础用法
什么是TypeScript？定义：简单来说就是用来弥补javascript的缺点应用场景:TypeScript 非常适用于大型项目——这是显而易见的，类型系统可以为大型项目带来更高的可维护性，以及更少的 bug。在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有[类型推论][]，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重
2021-10-11 20:34:16
205
原创 JS工厂模式
一、单例模式定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点二、核心确保只有一个实例，并提供全局访问3、实现在vue脚手架项目开发中，我们需要对axios进行请求拦截，响应拦截，多次调用封装号的axios实例也仅设置一次，封装后的axios就是要一个单例。以下是vue-cli4中axios单例模式的案例：一般我会在项目的src目录中，新建一个network文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，ap.
2021-10-08 11:51:25
1736
原创 深拷贝与浅拷贝
深拷贝和浅拷贝的区别1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用（浅拷贝只拷贝一层）2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”（深拷贝层层拷贝）为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）内存模型JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。基本数.
2021-10-07 09:21:03
81
原创 Js继承 （Es5和Es6的继承方式）
前言：js是面向过程，不是面向对象面向对象：我们可以通过 new Object()和字面量创建，但是这两种方法不能判断对象归属问题以及不能批量产出对象，所以有了工厂模式，工厂模式是在函数中new一个对象，给对象赋值，然后return 对象，工厂模式解决了批量的问题，但是还是没有解决对象归属问题。所以又有了构造函数模式，构造函数解决了对象的归属问题，但是构造函数创建的对象的方法不能共享，每个对象都会创建方法，造成内存开销特别大，所以产生了原型的解决方法。我们一般情况下会采用构造函数和原型混合的模式来
2021-09-23 21:00:53
143
原创 vue-cli4打包最强优化（10M变300kb）
项目开始时webpack的配置vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 606.
2021-09-22 11:18:25
282
1
原创 js异步之宏任务（marcroTask）和微任务（microTask）
什么是微任务以及宏任务?宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早异步和单线程异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助异步和同步的区别:异步不会阻塞程序的执行， 同步会阻塞程序的执行，前端使用异步的场景：定时任务：setTimeout，setInverval 网络请求：ajax请求，动态<img>加载 事件绑定//
2021-09-16 21:26:32
103
原创 前端浏览器兼容问题以及解决方法
首先：不同浏览器的内核不尽相同，所以浏览器对网页的解析也有所差异。浏览器的内核主要分为两种： 一、 渲染引擎二、JS引擎。所以浏览器的兼容问题 一般是 css兼容问题，js兼容问题。二、浏览器的渲染内核浏览器 内核（渲染引擎） Chrome谷歌 之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋 现已改用Google Chrome的Bli..
2021-09-14 11:26:23
6356
2
原创 续前端面试题（html）
flex布局通过 display:flex来实现flex布局那么常用的属性值有哪些呢？容器的属性以下6个属性设置在容器上。flex-direction flex-wrap flex-flow justify-content align-items align-contentflex-direction属性flex-direction属性决定主轴的方向（即项目的排列方向）。它可能有4个值。row（默认值）：主轴为水平方向，起点在左端。 row-revers
2021-09-08 20:32:43
174
原创 续前端面试题（html）
1.清除浮动的四种方式为什么要清除浮动？为了解决父级元素因为子集元素引起的高度为0.第一种额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。优点：简便方便理解缺点：添加没有意义的标签，结构差<div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div..
2021-09-08 20:10:23
86
原创 前端常见面试题（html）
盒模型与BFC:什么是盒模型：在我们html中，每个元素都可以看做成一个盒子 ：分为 四个部分 分别是：1、内容区域（content）2、内边距（padding）3、外边距（margin）4、边框（border）四个部分组成！盒模型有两种：标准盒模型的总宽度=border+padding+width怪异盒模型的总宽度=border+padding+margin+（内容宽度）那如何在怪异盒模型宽度和标准盒模型总宽度之间怎么切换呢？box-sizing:border-box 怪.
2021-09-08 16:23:24
117
1
原创 vue中如何实现动态路由传参？
一、vue路由基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld fr
2021-09-02 11:03:43
5107
原创 如何实现跨域？
跨域是个比较古老的命题了，历史上跨域的实现手段有很多，我们现在主要介绍三种比较主流的跨域方案，其余的方案我们就不深入讨论了，因为使用场景很少，也没必要记这么多奇技淫巧。1. 最经典的跨域方案jsonpjsonp本质上是一个Hack，它利用<script>标签不受同源策略限制的特性进行跨域操作。jsonp优点：实现简单兼容性非常好jsonp的缺点：只支持get请求（因为<script>标签只能get）有安全性问题，容易遭受xss攻击需要服务端配合jsonp进
2021-09-01 21:30:27
612
原创 axios如何封装
axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。首先我们需要在src目录下新建一个http文件夹在t...
2021-08-31 11:26:45
687
原创 vuex基础用法
你知道什么是Vuex吗？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex能做什么呢？存储组件公共数据3.vuex的核心 state 存储数据 mutations 存储方法 用来直接操作state中的数据 actions 存储方法 调用mutations中的方法 里面的方法返回的是promise对象可以实现异步操作 getters 对state中
2021-08-30 21:52:08
89
原创 vue基础
Vue基础语法（一）Vue是一个渐进式的框架（可复用的组件、状态管理）安装–三种方式：{直接引入CDN（开发环境/生产环境）}下载和引入npm安装插值语法Mustache 也可以叫做双大括号 {{}}v-once：该指令后面不需要跟任何表达式元素和组件只渲染一次，不随数据改变而改变v-html：按照HTML语法进行解析v-text: v-text=" msg " 同 {{ msg }}5. v-bind:动态绑定：动态绑定class------>数组、对象比如.
2021-08-30 08:30:07
85
原创 关于git的使用（工作流程）
首先让我们了解一下git的基本工作流程当存在在git仓库中显示的文件名是红色的当存在在暂存区中显示的文件名是绿色的（1）git是什么东西？git是一个分布式版本管理工具 (还有一种类似与git的工具 svn)ZGGit 的使用Git 使用前配置在使用 git 前，需要告诉 git 你是谁，在向 git 仓库中提交时需要用到。配置提交人姓名：git config --global user.name 提交人姓名配置提交人邮箱：git config --global use..
2021-08-29 21:26:03
231
1
原创 适配多环境变量（工作流程）
首先我们需要在package.json里的scripts配置servetestbuild，通过--mode xxx来执行不同环境！然后在src外部新建三个文件夹.env.development(开发环境)代码如下：NODE_ENV='production' VUE_APP_ENV='production'.env.production(生产环境)代码如下：...
2021-08-27 11:12:42
304
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人