- 博客(24)
- 收藏
- 关注
RSS订阅原创 逻辑运算符
逻辑运算符，顾名思义，是逻辑运算或者逻辑命题中的重要连接符号。不难发现，在实际应用中，它的主要作用就是把简单的语句给连接到一起，从而形成一个相对比较复杂的语句，或者说一些简单的命题通过这种特殊的编程方式的组合，可以变成一个复杂的命题。两个语句也会因为对逻辑运算符的应用而变成复合语句。
2022-11-16 21:39:05
220
原创 Vue3 与 Vue2 对比有哪些变化
Vue3组合式API需要引入，Vue2选项式API则可直接调用，如下所示：常用生命周期表格如下：Tips:setup 是围绕 beforCreate 和 created 生命周期钩子运行的，所以不需要显示地去定义。Vue3 支持了多根节点组件，也就是 fragment。Vue2 中，编写页面的时候，需要去将组件包裹在中，否则报错警告。Vue3 可以组件包含多个根节点，少写一层异步组件Vue3 提供 Suspense组件，，允许程序在等待异步组件时渲染兜底的内容，如loadin...
2022-07-03 12:57:49
794
原创 meta标签知识
一、概述meta 标签一般放在整个 html 页面的 head 部分1、定义：meta 是文档级元数据元素，用来表示那些不能由其它 HTML 相关元素（< base >、< link >、< script >、< style >或< title >）之一标识的任何元数据2、元数据的类型：如果设置了 name 属性，meta 元素提供的是文档级别的元数据，应用于整个页面如果设置了 http-equiv 属性 meta 元素则是编译指
2022-05-04 09:52:31
1008
原创 H5 和 C3 的新特性
H5 新增新特性1、拖拽释放拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 种，拖放是标准的一部分，任何元素都能够拖放2、自定义属性如：data-id3、语义化标签如：header、nav、footer、aside、article、section等4、音频（audio）、视频（video）如果浏览器不支持自动播放怎么办？在属性中添加 autoplay5、画布（Canvas）getContext() 方法返回一个用于画布上的绘图的环境 Canvas.get
2022-03-21 16:27:50
2221
原创 Vue 和 React 的区别
监听数据变得实现原理不同Vue 通过 getter / setter 以及一些函数的劫持，能精确直到数据变化React 默认是通过比较引用的方式（ diff ）进行的，如果不优化可能导致大量必要的 VDOM 的重新渲染。设计理念不同vue使用的是可变数据，而 React 更强调数据不可变数据流不同Vue 是双向绑定数据流，而 React 是单向数据流组合不同功能方式不同Vue 使用 mixins（混合），而 React 使用 Hoc（高阶组件：高阶组件本质上是一个函数，函数内
2022-03-20 00:28:24
7283
原创 VUE 的优缺点
优点：轻量级的框架 双向数据绑定 组件化开发 单页面路由 学习成本低 虚拟dom 渐进式框架 数据和结构的分离 运行速度快 插件化缺点：不支持IE8以下 社区可能没有Angular和React那么丰富 Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍 因为是单页面应用，不利于seo优化 初次加载时耗时多...
2022-03-20 00:07:31
1024
原创 vue3 中的 computed 和 watch 的使用
computed 函数import { computed , reactive } from 'vue';setup(){ const person = reactive({ firstName : '张'， lastName : '三' }) // 计算属性 --- 简写 const fullName1 = computed(()=>{ return person.firstName + '-' + pers
2022-03-13 20:18:00
1568
原创 vue3 中的 reactive 和 ref 的对比
从定义数据角度对比： ref 用来定义：基本类型数据 reactive 用来定义：对象（或数组）类型数据 备注：ref 也可以用来定义 对象（或数组）类型数据，它内部会自动通过 reactive 转为 代理对象 从原理角度对比： ref 通过 Object.defineProperty() 的 get() 与 set() 来实现响应式（数据劫持） reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect 操作 源对象 内部的数据 从使用角度对比：
2022-03-13 00:34:26
243
原创 Vue2 和 Vue3 的响应式
vue2 响应式实现原理：对象类型：通过 Object.defineProperty() 对属性得读取、修改进行拦截（数据劫持） 数组类型：通过重新更新数组得一系列方法实现拦截（对数组的变更方法进行了包裹）Object.defineProperty(data,'count',{ get () {}, set () {}})存在问题：新增属性、删除属性，界面不会更新 直接通过下标修改数组，界面不会自动更新vue3 响应式实现原理：通过 Proxy（代理）：拦
2022-03-12 23:59:18
122
原创 TypeScript的泛型工具
Partial将传入的属性变为可选项interface IPeople { title: string; name: string;}const people: Partial<IPeople> = { title: 'Delete inactive users'};实现原理：将映射对象类型 { Pink : T } 与索引类型 keyof T 查询结合使用来遍历已有对象类型的所有属性成员，在对其属性成员设为可选属性。interface
2022-03-09 00:09:10
174
原创 前端如何实现即时通信？
严格意义上：HTTP协议只能做到客户端请求服务器，服务器做出响应，做不到容服务器主动给客户端推送信息哪个如果服务器数据更新了，想要即时通知客户端怎么呢？（即时通信需求）即时通信需求：服务器一有更新，希望推送给浏览器面试提问的回答重心（重点）：即时通信有哪些方案？ 为什么使用了其中的某一个方案！（websocket）基于Web的前端，存在以下可实现即时通信的方式：短轮询（历史方案）开启个定时器，每隔一短时间发送请求（实时性不强）Comet - ajax 长...
2022-03-08 00:12:12
4050
1
原创 Vue2 组件中 data 为什么必须是函数
在 new Vue() 中， data 是可以作为一个对象进行操作的，然而在 component 中， data 只能以函数的形式存在，不能直接将对象赋值给它。防止各个component 实例中的 data 相互影响，保证了每一个实例的 data返回的对象都是独立的拷贝...
2022-02-27 11:07:42
272
原创 CSS水平垂直居中
父盒子和子盒子的结构<div class="parent_box"> <div class="sub_box"></div></div>父盒子和子盒子初始的样式 .parent_box { width: 500px; height: 500px; margin: 100px auto; border: 2px solid #000;
2022-02-23 17:05:01
374
转载 Flex 布局教程：语法篇
一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局.box{ display: flex;}行内元素也可以使用 Flex 布局.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上 -webkit 前缀.box{ display: -webkit-flex; /* Safari */ display: fle
2022-02-22 11:43:53
217
原创 HTTP 、 HTTPS之间的区别？
1. HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。2. HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。3. http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。4. HTTPS 其实就是建构在 SSL
2022-02-21 21:38:04
124
原创 v-if 和 v-for为什么不能一起使用？
原因：v-for 的优先级比 v-if 的高，所以每次渲染时都会先循环再进条件判断，而又因为 v-if 会根据条件为 true 或 false来决定渲染与否的，所以如果将 v-if 和 v-for一起使用时会特别消耗性能，如果有语法检查，则会报语法的错误解决方法：1. 将 v-if 放在外层嵌套 template （页面渲染不生成 DOM节点），在这一层进行 v-if 判断，然后在内部进行 v-for 循环2. 如果条件出现在循环内部，不得不放在一起，可通过计算属性computed 提前过滤掉
2022-02-21 21:10:47
2806
原创 computed 与 watch的区别
computed （计算属性）：一对多 或 一对一1、监控自定义的变量，这个变量不可以和 data、props里面的变量重复2、computed 属性的属性值必须有返回值，属性都是有一个 get 和 set方法3、支持缓存，只有依赖的数据发生改变才会重新计算，否则会去缓存中的数据4、不支持异步，在 computed 中操作 异步编程是无效的watch （监听属性）：多对一1、监听 data、props中的数据变化2、不支持缓存，每次都会重新计算3、支持异步编程，监听的函数接收两个参数，
2022-02-21 21:05:35
379
2
原创 ES6 基本总结
let一、声明变量let a;let b , c;let d = 100;let e = 6 , f = 'string' , obj = {} , arr = []; 二、特点：变量不能重复声明具有块级作用域（全局、函数、eval）不存在变量提升不影响作用域链const（常量）一、声明变量const SCHOOl = "菜鸟学院"二、特点：必须赋初始值常量的值不可修改具有块级作用域对于数组和对象的元素修改，不算做对常量的修改，不会报错不影响作用域链正常
2022-02-21 20:34:01
420
原创 什么是重绘和重排（回流）？
1、重排（回流）当渲染树（render tree）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排（回流）导致重排（回流）的操作1、页面首次渲染 浏览器窗口大小发生改变2、元素内容的变化（文字数量或图片大小等等）3、添加或删除可见的DOM元素4、激活 CSS伪类（如：hover）导致重排（回流）的属性和方法clientWidth、clientHeight、clientTop、clientLeftoffsetWidth、offset
2022-02-21 20:21:50
513
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人