ꪤ、匿名-CSDN博客

原创虚拟DOM

1、虚拟 DOM 是什么？一个能代表DOM树的对象，通常含有标签、标签上的属性、事件监听和子元素们，以及其他的属性，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。2、虚拟 DOM 的优点？减少 DOM 操作虚拟 DOM 可以将多次操作合并为一次操作，比如你添加 1000 个节点，却是一个接一个操作的（减少频率）虚拟 DOM 借助 DOM diff 可以把多余的操作省掉，比如你添加 1000 个节点，其实只有 10 个是新增的（减少范围）跨平台虚拟

2022-05-29 16:25:45 218 1

原创 vue2到vue3生命周期的演变

将 Vue2 的生命周期钩子代码更新到 Vue3这个从Vue2 到Vue3的生命周期映射是直接从Vue 3 Composition API文档中获得的:beforeCreate -> 使用 setup()created -> 使用 setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdated

2022-05-24 21:03:25 272

原创 Vue3通过Proxy实现双向数据绑定

1.什么是Proxy？它的作用是？Proxy可以理解成，在目标对象之前架设一层 "拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。2.Proxy基本语法const obj = new Proxy(target, handler)被代理之后返回的对象 = new Proxy(被代理对象，要代理对象的操作)handler中常用的对象方法如下：get(target, propKey, re

2022-05-24 20:22:47 713

原创 HTTP状态码及其含义

HTTP状态码及其含义1XX：信息状态码 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息 2XX：成功状态码 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理 3XX：重定向 301 Moved Permanently 请求的网页已永久移动到新位置。 302 Found 临时性重定向。

2021-12-04 15:03:58 137

原创 VueX（Vue状态管理模式)

vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。应用vuex的好处能够集中管理共享的数据，易于开发和后期的维护高效的实现组件之间的数据共享，提高开发效率存在vuex的数据也是响应式的，能够实时保持数据与页面的同步应用场景多个组件共享数据或者是跨组件传递数据时vuex基本使用安装npm i vuex -s导入vuex

2021-10-23 16:09:41 362

原创 web前端性能优化方案

回流、重绘会影响网络性能优化回流: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 ( 几何大小和位置发生改变 )重绘: 当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘 ( 文字、边框、背景颜色、外观风格 )注意：回流必定触发重绘，而重绘不一定触发回流性能优化方案一、客户端1、压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为..

2021-10-22 17:23:46 525

原创 vue路由router的基本使用及路由跳转的方式

路由的基本使用1. 安装vue-router，npm install vue-router 2. 应⽤插件：Vue.use(VueRouter)// 下载路由之后，在main.js引入路由器import VueRouter from 'vue-router'// 注册全局使用Vue.use(VueRouter)3. 编写router配置项编写router文件夹里的index.js文件：// 引入路由import VueRouter from 'vue-router'// ..

2021-10-15 16:39:12 4875

原创 vue中组件注册及使用

全局注册1、Vue.prototype在多个地方都需要使用但不想污染全局作用域的情况下，这样定义，在每个 Vue 实例中都可用。$ 表示这是一个在 Vue 所有实例中都可用的属性常用于方法、变量等vue.prototype：实例上挂载属性/方法每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。//mian.jsimport Video from 'video.js'Vue.prototype.$video= video//..

2021-10-12 16:43:30 867

原创引用Vue.js组件的使用

组件的使用传统开发存在的问题：依赖关系混乱代码复⽤率不⾼在html中引用Vue.js来使⽤组件的三⼤步骤1. 定义组件（创建组件）使⽤Vue.extend(options)创建，其中options和new Vue（options）时传⼊的那个optins⼏乎⼀样，但也有区别。区别如下： 1）Vue.extend({})中，el不要写，为什么？-----最终所有的组件都要经过⼀个vm的管理，由vm中的el去决定服务于那个容器2）Vue.extend({})中，da

2021-10-12 16:34:45 388

原创计算属性computed、监听器watch、区别

计算属性computed定义：可以理解为能够在里面写一些计算逻辑的属性。原理：底层借助了Object.defineProperty⽅法提供的getter和setterget函数什么时候执⾏？1）初次读取时会执⾏⼀次2）当依赖的数据发⽣改变的时候会被再次调⽤set函数什么时候执行？1）当修改时调用，之后再执行get函数作用：1）减少模板中的计算逻辑2）数据缓存。当我们的数据没有变化时，不在执行计算的过程3）依赖固定的数据类型（响应式数据），不能是普通的传...

2021-10-12 15:33:00 175

原创 vue的特点及核心思想

一、声明式渲染命令式渲染：需要具体代码表达在哪里，做什么，关心如何实践。声明式渲染：只需要声明在哪里，做什么（what），而无需关心如何实现(how)。例子：声明式编码：无需直接操作DOM原生js或jquery(命令式编码)： 1.获取元素 2.给元素添加文字（按步骤）命令式渲染：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

2021-10-11 18:35:46 522

原创 vue2的生命周期

生命周期什么叫做vue的生命周期一个vue的实例在它创建到销毁的一系列过程，就叫做生命周期什么是生命周期钩子函数在vue实例的生命周期中，某个特定时刻会自动触发的函数，就叫做生命周期的钩子函数vue⽣命周期主要分为四个阶段，⼋个过程四个阶段Create 创建 Mount 挂载 Update 更新 Destory 销毁⼋个过程Create之前和Create之后 Mount之前和Mount之后 Update之前和Update之后 Destory之前和Dest

2021-10-11 16:25:02 152

原创浅拷贝、深拷贝、赋值

一、数据类型存储前面文章我们讲到，JavaScript中存在两大数据类型：基本类型字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。 (注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 ) 引用类型对象(Object)、数组(Array)、函数(Function)。基本类型数据保存在在栈内存中引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆..

2021-10-09 18:12:04 206

原创 ajax跨域

什么是跨域简单的理解就是因为javascript同源策略的限制同源:协议相同域名相同端口相同举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）不同域条件先看看域名的组成:同源政策的目的同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如..

2021-10-09 16:03:16 116

原创 JS异步编程的解决方案

js中解决异步编程有6种方案：1.1 回调函数异步编程的最基本方法，把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。优点：简单、容易理解和实现。缺点：多次调用会使代码结构混乱，形成回调地狱。function sleep(time, callback) { setTimeout(() => { // 一些逻辑代码 callback(); }, time);}1.2 事件监听...

2021-09-29 20:10:44 345

原创理解Promise

一、Promise是什么？理解1. 抽象表达 Promise是一门新的技术（ES6规范） Promise是JS中进行异步编程的新解决方案 Promise就是为解决“回调地狱”而生的备注：旧的方案是单纯使用回调函数2. 具体表达从语法上来说：Promise是一个构造函数从功能上来说：Promise对象用来封装一个异步操作并可以获取其成功或失败的结果值。二、Promise对象的状态改变Promise的状态指的是实例对象中的一个属性Prom...

2021-09-29 19:23:49 106

原创 JS 数组转对象

方法1使用forin遍历vararr=[1,2,3,4];varobj={};//定义空对象varobj2={};//定义空对象for(varkeyinarr){//key为键名（属性）obj[key]=arr[key]}console.log(obj)//{'0':1,'1':2,'2':3,'3':4}方法2for循环vararr=[1,2,3,4];varobj2={};//定义空对象for(var...

2021-09-27 19:01:11 417

原创 JS 对象转数组

方法一letobj={name:'xilin',age:23}letarr=[]for(variinobj){//console.log(i,obj[i])//namexilin,age23console.log(arr.push(obj[i]))//入栈12}console.log(arr)//['xilin',23]方法二es6方法Object.values返回一个对象的值的一个数组，Object.keys()返回对...

2021-09-27 18:50:37 398

原创可枚举属性、可迭代对象、迭代器(iterator)、for-in、for-of

可枚举属性可枚举对象的一个定义特征是，当我们通过赋值运算符将属性赋值给对象时，我们将内部可枚举标志（enumerable）设置为 true。这是默认值。但是，我们可以通过将其设置为 false 来更改此行为。经验法则是，可枚举属性总是出现在 for...in 循环中。可枚举属性和不可枚举属性是什么所谓的可枚举就是可遍历的意思，也就是说对象的属性是否能够通过遍历得到。即通过for...in循环遍历到。怎么判断属性是否可枚举对象的属性是否具有可枚举属性是由enumerabl

2021-09-26 19:28:53 1770 1

原创变量的解构赋值（ES6）

ES6介绍ES6，全称 ECMAScript 6.0 ,是 JavaScript 语⾔的下⼀代标准，在 2015 年 6 ⽉正式发布。它的⽬标，是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序，成为企业级开发语⾔。 ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6 ES6提供了大量的语法糖。 ...

2021-09-26 15:46:55 146

原创前端开发的3大软件架构设计模式

MVCMVC是软件架构中最常见的一种框架，它的意思是，软件可以分成三个部分：视图（View），用户界面；控制器（Controller），即业务逻辑；模型（Model），数据保存。各部分之间的通信方式如下：View传送指令到Controller；Controller完成业务逻辑后，要求Model改变状态；Model将新的数据发送到View，用户得到反馈。所有通信都是单向的。MVC还有一个重要的缺陷，view层和model层是相互可知的，这意味着两层之间存在耦合。耦合对于一个

2021-09-16 20:54:15 753

原创 gitee基本命令及使用

基本命令：git init -初始化 git status -查看状态 git add '文件名’ -提交到缓存区 git add * -提交全部文件，git add .* -提交包含隐藏文件的全部文件 git status -查看状态是否提交成功 git commit -m "first commit" -提交到本地源码库，并附加提交注释 git remote add origin https://github.com/chape/test.git ...

2021-09-14 18:56:32 5761 1

原创 cookie、localStorage、sessionStorage三种客户端存储方式

cookiecookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。sessionStorage（会话存储）同源策略：不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页：两个相同域下的标签页不能互通。即：在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionS

2021-09-14 15:03:01 2068

原创 JQuery中的ajax和axios的使用及区别

1、jQuery介绍jQuery是一个Javascript工具库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。jQuery功能：* 使用CSS选择器进行元素查询* 事件机制* Dom操作* 属性操作* 工具方法* Ajax2、jQuery中ajax的使用ajax定义简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示jQuery为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 A

2021-09-11 20:03:29 2261

原创了解及使用AJAX（JS原生ajax）

1.什么是AJAX？AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。对AJAX的印象：

2021-09-10 14:32:21 301

空空如也

空空如也