Yabi0527-CSDN博客

原创 vue学习-v-if v-for优先级、data、key、diff算法、vue组件化、vue设计原则、组件模板只有一个根元素、MVC.MVP,MVVM

1：v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？//在vue页面中同时使用v-for与v-if后，打印渲染函数。console.log(app.$options.render)//app为Vue实例对象结论：1：显然v-for优先于v-if被解析2：如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能3：要避免出现这种情况，则在外层嵌套特，template，在这一层进行v-if判断，然后在内部进行v-for循环

2021-01-14 18:01:05 474

原创 css学习-文档流

文档流（normal flow）-网页是一个多层的结构，一层摞着一层-通过css可以分别为每一层来设置样式-作为用户来讲只能看到最顶上一层-这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是文档流中进行排列-对于我们来说元素主要有两个状态在文档流中，不在文档流中（脱离文档流）-元素在文档流中有什么特点-块元素<div> -块元素会在页面中独占一行 -默认宽度是父元素的全部（会把父元素撑满） -默认高度是被内容撑开（...

2021-01-13 14:36:34 183

原创服务端使用GZIP压缩数据

1：问题描述：在服务端查找的数据量太大，得到响应数据时间很慢，达到了10s。。。2：解决办法，服务端将数据进行GZIP压缩，时间大大缩短。参考https://zhuanlan.zhihu.com/p/24764131；https://segmentfault.com/a/1190000012571492...

2020-12-17 14:36:17 367

原创微信公众号内网页开发踩坑

1：多图上传业务需求，本地选择图片，调用wx.chooseImage后，得到包含localIds数组后，进行调用wx.uploadImage上传图片。由于上传图片每次只能传一张，故先是使用promise.all，同时进行上传。 localImgs2webImgs(localImgs){ // 因为多张图片且数量不定，这里遍历生成一个promiseList let promiseList = localImgs.map((item) => { re

2020-11-05 17:17:33 234

原创性能优化学习-浏览器简介、浏览器的内核（渲染引擎）、进程与线程

浏览器应有的功能网络：浏览器通过网络模块下载各式各样的资源，例如html文本，javascript代码，样式表，图片，音视频文件等。网络部分本质上十分重要，因为它耗时唱，而且需要安全访问互联网上的资源。资源管理：从网络下载，或者本地获取到的资源需要有高效的机制来管理它们。例如如何避免重复下载，资源如何缓存等。网页浏览：这是浏览器的核心也是最基本的功能，最重要的功能。如何将资源转变为可视化的结果。多页面管理插件与管理账户和同步安全机制开发者工具。。。.

2020-10-23 12:40:18 197

原创 html5学习-svg与canvas的区别

SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重

2020-10-19 17:37:30 188

原创 js学习1---定义变量预解析，作用域，函数预解析，es6行参默认值，匿名函数,箭头函数

1.1:两种定义变量的方式区别通过var定义变量，可以重复定义同名的变量，并且后定义的会覆盖先定义的如果let定义变量，“相同作用域内”不可以重复定义同名的变量1.2:是否能够先使用后定义var可以先使用后定义，预解析let不可以，报错，不会预解析1.3:能否被{}限制作用域将var定义的变量放到一个单独的{}里面，还是一个全局变量将let，是一个局部变量。在js中{}外面的作用域，作为全局作用域在js中函数后面{}的作用域，为局部作用域。在es6中只要{}没有

2020-10-07 12:25:44 210

原创 vue学习-v-if,v-show

1：v-moel.trim 去掉数据首尾空格2：es6解构赋值let {type,title} = this.inputthis.menu.push({ type,title,link:'http:google.com'})3：回车监听事件 @keyup.enter

2020-09-30 14:46:36 434

原创响应式数据的理解

数组和对象类型当值变化时如何劫持到。对象内部通过defineReactive，使用Object.defineProperty将属性进行劫持（只会劫持已存在的属性），数组则是通过重写数组方法来实现。【这里在回答时可以带出一些相关的知识点（比如多层对象是通过递归来实现劫持，顺带提出VUE3中是使用proxy来实现响应式数据）】内部依赖收集是怎样做到的，每个属性都拥有自己的dep属性，存放他所依赖的watcher，当属性变化后会通知自己对应的watcher更新（其实后面会讲到每个对象类型自己本身也拥有一个

2020-09-29 11:18:43 1367

转载 2020-09-24

网络监控软件，开发出来的使命就是监控网络中进进出出的所有通信流量https://mp.weixin.qq.com/s/FTTD1531gCbZ7ktQXvmMIg

2020-09-24 13:17:02 120

原创 2020-09-23

1事件频繁触发可能造成的问题？1）一些浏览器事件：window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题2）如果向后台发送请求，频繁触发，对服务器造成不必要的压力2如何限制事件处理函数频繁调用1）函数节流2）函数防抖3函数节流...

2020-09-23 13:58:36 64

原创工具函数lodash--call bind apply 会自己实现

1--工具函数库 lodash 1:封装了各种类型数据简化操作的函数库数组对象函数字符串类型判断。。。2.特点：模块化函数式/声明式按照文档声明一个函数，函数减少代码量，封装了各种各样的函数。对立（命令式编程，自己写代码）2--call() bind() apply()1：区别call（obj）/apply(obj):调用函数，指定函数中的this为第一个参数的值bind(obj):返回一个新的函数，新函数内部会调用原来的函数，且this为bind()指定的第...

2020-09-23 11:45:31 280

原创项目总结

引用了Antd-vue-pro ，一个github开源的项目，由一群伙伴仿照 antd-pro react版本写的。项目架构-node-yarn包管理工具-webpack-@vue/cli~3- [ant-design-vue]-expressExpress4.17.1 基于Node.js平台，快速、开放、极简的 Web 开发框架技术html 1：embed标签元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如...

2020-09-17 13:27:23 110

原创 Vue单页面和多页面的使用

Vue单页面和多页面的使用配置多入口文件Vue单页面只有一个页面index.html在里面切换不同的组件我想配置多页面？有多个页面写死的步骤只需要配置 vue.config.js就行module.exports = { //配置和你的文件夹匹配两套文件 //相当于写了两套代码。 //pages配置多页面入口 index 和ui pages:{ index:{ //page的入口

2020-09-15 17:58:09 778

原创学习--vue数据流 nuxt.js做服务器端渲染

问 vue数据流在vue react中数据流是单向的，由父节点流向子节点，如果父节点的props发生了改变，那么react会递归遍历整个组件父组件通过绑定props的方式，将数据传递给子组件，但是子组件自己并没有权利修改这些数据，如果要修改，只能把修改这一个行为通过event的方式报告给父组件，由父组件本身决定该如何处理数据。vue的另一个概念是v-model 双向绑定如何监听vuex里面的数据vuex是为了解决组件间状态共享而出现的一个框架，其中有几个要素是组成vuex的关键 st

2020-09-15 15:59:42 395

原创学习--动态路由

vue-router传参vue-router传值可以通过地址传值最简单的是url传值 url传值又两种，params和query参数传值params传值是指的动态路由传值{path:'/user/:id'} //定义一个路由参数<router-link to="/user/123"></router-link>//传值/user/123'/user/:id' ---123就是idthis.$route.params.id //取值专门获取：id这

2020-09-15 14:21:38 513

原创学习--keep-alive

组件缓存使用是vue提供的一个全局组件 vue原生自带用来缓存组件。vue组件是有销毁机制的，比如条件渲染，路由跳转时，组件都会经历销毁，再次回到页面时，又会回到重生。这一过程保证了生命周期钩子函数各个过程都会在这一生命周期中执行。用keep-alive包裹想要缓存的组件实例，组件创建之后，就不会再进行销毁，组件数据和状态得以保存。没有销毁，也就失去了重生，失去了原有的钩子函数，所以keep-alive包裹的组件都获取了另外的两个时间--如果缓存组件需要重新获取数据。唤醒 activat

2020-09-15 11:20:08 104

原创学习--解决跨域

vue中的data是一个对象还是函数组件里面尽量写函数：每次return都是新对象，组件互相不影响。对象，复杂类型，这样写，所有导入组件的会引起冲突。域名协议 ip地址端口任何一个不一样就跨域解决跨域1 jsonp --使用script的src发送，只能get请求<script src="http://www.baidu.com/abc.php"></script>//发送请求给abc.php//jsonp就是script src..

2020-09-15 10:14:58 91

原创学习--vuex

src->store->index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//1:下载vuex 导入use一下//2: new Vuex.Store//3:挂载到new VUEexport default new Vuex.Store({ state:{ //所有组件用的全局数据名字：值 count:100 }, mutations:{ .

2020-09-15 03:59:15 76

原创学习--xss和csrf

redux vuex是单页应用跨页面状态管理一个html多页应用跨页面数据传递多个htmlxss和csrf是什么攻击特点如何防范xss 跨站脚本攻击 cross site script是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页的时候，对用户浏览器进行控制活着获取用户隐私数据的一种攻击方式。攻击者对客户端网页注入的恶意脚本一般包括，javascript,有时也会包含html和flash。有很多种方式进行xss攻击，但它们的共同点为

2020-09-15 02:54:25 98

原创学习--fetch与axios比较

fetch与axios定位认识fetch是浏览器提供的api，axios是社区封装的一个组件。fetch:1语法简单，更加语义化。2:基于标准Promise实现，支持async/await3:更加底层，提供的API丰富（request,response）4:脱离了XHR，是ES规范里新的实现方式。是由whatwg 组提出，现在已经w3c规范。问题：是浏览器级别原生支持的API，可以认为是一个原生的XHR，所以使用起来不是那么舒服。需要进行封装。1:fetch只对网络请求报错，

2020-09-15 02:05:05 2055

原创一次完整的http服务的过程

一次完整的http服务的过程当我们在web浏览器的地址栏输入：www.baidu.com 具体发生了什么1：对www.baidu.com这个网址进行DNS域名解析，得到对应的ip地址url(www,baicu.com) =>ip(192.168.1.1)2：根据这个ip，找到对应的服务器，发起tcp的三次握手。3：建立tcp链接后发起http请求tcp是比http更底层一个连接协议（ip是tcp下面一层）4：服务器响应http请求，浏览器得到html代码5：浏览器解析

2020-09-14 16:36:17 177

原创学习--打包app

1、native app 原生安卓或者ios程序员写的手机app2、htbrid app 混合app 2.1 有安卓ios程序员写一部分，然后你写html代码，给ios或者安卓嵌套进去 2.2直接是html网站，给他打包，嵌套一个app壳，在壳里面，其实就只做了一个内嵌浏览器3、web手机端网页就是直接写html 在手机浏览器打开的网站开发移动端app的框架1:vue语法框架 weex 他可以打包生成app 1.1需要安装weex脚手架 1.2创建项目2:re...

2020-09-11 11:08:35 160

原创学习--websocket实现原理

聊天客服在线咨询即时通讯喜欢使用第三方服务环信即时通讯实现原理有两种1ajax轮询使用定时器，每隔1s时间，发送ajax到后台2websocket（常用）有一个好用的封装的socket.io一般在公司直接买一个，我们需要引入他的js原生js支持的websocket建立链接后就不会再断，相当于打电话，只要不挂断就一直通讯1：前端必须按照步骤写上链接websocket 2:后台也需要对应连接上websocket1:new websocket('xx...

2020-09-10 16:54:00 241

原创学习--浏览器缓存强缓存协商缓存离线缓存一点cookie

##cookie考察cookie存储 cookie放哪里，cookie能做的事情和存在的价值document.cookie="键=值;expires=过期时间"//cookie 后端会操作，前端也可以document.cookie="username=zs" //在控制台cookie里面可以看到写一次就多存一个cookie 就需要用split拆分处理字符串获取username或者ageconsole.log(document.cookie) //获取 cookiecoo.

2020-09-10 15:55:50 459

原创 vue学习--浏览器渲染引擎、html重绘和重排

html优化与重点概念##浏览器的运行机制1、构建DOM树（parse）,渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树（content Tree/DOM Tree）;2、构建渲染树（construct）:解析对应的css样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（rendering Tree/Frame Tree）;render tr

2020-09-10 13:44:30 1278

原创 vue学习---2x3布局用flex写

2x3布局用flex写<style> /* 父盒子开启flex子元素默认一行弹性布局的盒子如果不够实现默认伸缩**/ .box{ display:flex; flex-wrap:wrap;//强制换行 } .item{ width: 33.3333%; height:250px; display: flex; flex-directio.

2020-09-10 11:45:07 431

原创 vue学习--js代码执行机制简单

//凡是异步代码和定时代码都会等待主程序执行完毕后再开始//哪些事异步操作 1 定时器延时器2 ajax3 绑定的onclick事件函数，，，//注意new promise会立刻执行 console.log(1)new Promise(function(resolve,reject){ console.log(2)})console.log(3)=->>123//而.then需要异步执行console.log(1)let p1 = new Pro.

2020-09-10 11:19:52 458

原创 vue学习--ES6中的装饰器

装饰器就是相当于给人或事多加一些东西就是现实中装饰类似的意思化妆打扮加衣服装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法与属性。许多面向对象的语言都有这项功能，一般和类class相关普通函数不要使用进入代码就会执行完成装饰器就是一种函数，写成@+函数名，它可以放在类和类方法的定义前面。装饰类Foo@frozenclass Foo{ //装饰method方法 @configurable(false) method

2020-09-10 10:33:46 452

vue学习--ts

TypeScript是JavaScript的一个超集，支持ES6标准。TypeScript由微软开发的自由和开源的编程语言。TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上。简单来说，typeScript比javaScript有更严格的类型要求。好处：大家有类型约束，就不会乱写不同的值，大型项目中的bug就少。vue react中都可以使用。msg!:string 确定msg非空，msg?:strin

2020-09-10 09:39:56 97

原创 vue学习--async-await理解

四种异步：1：同步代码从上往下执行遇见同步会一直等，等到完成才会继续走异步代码从上往下执行遇见异步就先走了异步的代码后面执行2：说ajax 哪些是异步定时器 ajax 事件处理 nodejs 读取文件也有异步console.log(1)$.ajax({ url:"./php/ok.php", success:function(res){ console.log(2) console.log('ajax结果',res) }}) co...

2020-09-09 11:34:42 340

原创 vue学习---git管理项目

1：创建本地仓库（代码已经在本地了，在本地管理好了）2：创建远程仓库3：将本地仓库的代码推送到远程仓库4：本地代码修改，推送到远程仓库5：如果远程代码修改了，拉取到本地6：克隆远程仓库到本地根目录创建文件.gitignore/node_modules // 斜杠代表项目根目录，没有斜杠则表示所有文件夹下.vscode执行命令， git init 生成工作区git add . //将工作区代码添加到暂存区git commit...

2020-09-08 13:04:28 214

原创手写一个webpack.config.js

手写一个webpack.config.js//__dirname:代表当前文件所在目录的绝对路径 D:\xxx\xxxconst HtmlWebpackPlugin = require('html-webpack-plugin')const path = require('path') //用来解析路径相关信息的模块module.exports = { //配置对象 //入口 entry:{ xxx:path.resolve(__dirname,'src/inde

2020-09-07 18:31:21 209

原创 vue学习--自定义组件

一、自定义组件定义vm的时候data可以是函数也可以是个对象组件的data配置必须是返回对象的函数类型。如果引用多个组件，使用对象定义data，则多个组件引用的是一个data，数据混乱。如果data使用的是函数，调用函数产生对象，产生的是不同的新的对象，各个组件的data对象是独立的。二、webpack打包1：初始化项目1）生成package.jsonyarn init -y ，所有的都是yes2)创建入口js:src/index.js3）在src外面创建页面文件

2020-09-07 11:17:34 66

原创 vue学习--生命周期

一，生命周期非严格模式定时器的this.，指向window，严格模式，undefined。beforeCreated ----this.isShow undefined实现数据代理，后面可以通过vm(this)读取data中的数据created -----this.isShow true判断有无el,有无template,进行指定的模版解析beforeMount将解析好的模版挂载到界面上做异步操作，启动定时器，发ajax请求mounted当数据更新（更新后）时...

2020-09-07 00:27:32 132

原创笔记--回调函数、计算属性、vm监听、深度监听

复习1：回调函数的3个问题什么时候执行回调，作用是什么，this指向什么2：vm监视data中数据的特点

2020-09-04 18:38:54 424

原创 vue学习-事件处理

1：绑定监听<button @click="test('dsad',$event)"></button><script> test(value,e){ console.log(value+e.target.innerHTML) } </script>2：事件修饰符阻止(prevent)事件的默认行为停止(stop)事件冒泡<a href="http://www.baidu.com" ..

2020-09-04 13:37:20 87

原创 vue学习-列表渲染

arr.splice（index,1,newp）,删除长度为1，下标为index的arr中元素，并增加newp这个元素。改变数组后，双向绑定。一、Vue的数据绑定如何实现this.persons[index] = newp 数据改变视图不会改变没有改变persons的值，只是改变了下标的属性this.persons[index].name = newp.name 数据改变视图更新this.person.splice(index,1,newp) 数据改变视图更新this.p..

2020-09-04 11:52:13 96

原创 vue学习计算属性部分与强制绑定class和style

1：用对象结构来缓存计算属性数据属性名：标识名称，属性值，真正缓存的数据{ fullName:'A-B', fullName3:'A-B'}obj={}obj[obj] = obj;obj['[Object object]'] = obj计算属性：通过计算动态产生一个要显示的结果数据计算属性方法：包装getter执行的时机：1）初始显示第一次执行，得到初始值显示2）依赖数据发生改变就会再次调用计算属性有缓存，缓存由对象来存储计算属性数据，用...

2020-09-04 10:43:45 474

原创 es6中的class 创建类和对象继承类

es5的构造函数function Person(){ this.name = "jianlin" this.age = "18" this.say=function(){ console.log('person say') }}es6的classclass Person{ constructor(){ this.name="jianlin" this.age="18" } say(){ console.log('person sa

2020-08-28 11:51:31 339

空空如也

空空如也