- 博客(66)
- 收藏
- 关注
RSS订阅原创 react使用ref获取DOM报Function components cannot be given refs.
解决useRef 获取函数式组件的警告
2022-11-03 14:58:06
1222
原创 vue3 setup详解
setup组合式api，新增生命周期钩子，在onBeforeMount之前。同时删除 beforeCreate created。setup接收两个参数 props 和 context setup(props, context) { const {attrs, slots, emit, expose} = context //非响应式可以解构 // 如果式响应式用 toRefs解构
2022-05-15 15:35:50
535
原创 vue3中props,watch,computed与vue2的区别
props在vue2中我门需要这样定义和使用props:['msg'] console.log(this.$props.msg)vue3需要这样 props:['msg'], setup(props){ console.log(props) }vue3引入的setup生命周期钩子，让methods，钩子，watch，computed做了一个整合。类似React的函数式组件，在setup中使用props它的底层是proxy来做数据响应。watch和v
2022-05-15 14:47:15
478
原创 js 优先级队列
当我们希望某个优先级权重比较高的数据，展现在最前面，插入数据的时候，应该按照优先级高低来排序，js的优先级队列最为合适。比如有这样一组数据校长 院长 老师 学生 他们的权重依次为 0 1 2 3，在乱序的情况下如何，按照权重依次插入 //优先级队列 class QueueElement { // 专门用来初始化数据 constructor(element, priority) { this.element = element
2022-04-11 15:26:27
533
原创 击鼓传花用class继承实现
当数到某个数的时候，就把这个人踢掉，比如当有五个人的时候，数到数字5把第五个人踢掉，我采用队列的算法。比如有五个人， 数到数字5的人踢掉。数到 第一个人 不踢，把队列头取出（第一个人拿出来），放到队尾，依次类推到第五个人直接踢掉。代码如下//先封装队列类 Queue class Queue { constructor() { // 初始化 this.list = [] } enqueue(item) { // 往队列尾放
2022-04-10 16:50:29
205
原创 react三种定义ref的方式
在react中要想获取节点，得借助ref来实现，第一种直接定义字符串 <input type="text" placeholder="失去焦点提示数据" ref="input2" onBlur={this.demo1} /> //然后在实例上的refs里面调用 demo1 = () => {//操作节点 console.log(this.refs.input2.value) } 第二种使用回调函数 <input type="
2022-03-14 20:31:23
1759
原创 apply bind原理
apply 能改变函数this，它的内部原理 Function.prototype.myApply = function(context){ if(typeof this != 'function'){ // 判断是否为函数 console.log('not a function') } context.fn = this // 保存this,context 为window
2022-03-12 16:47:39
298
原创 call 函数原理
call 函数可以更改this指向实现继承，具体原理 Function.prototype.myCall = function(context){ //console.log(context);// context 为window 对象 if(typeof this != 'function'){ throw new TypeError('not a function') }
2022-03-09 20:34:55
164
原创 js 中instanceof原理
instancof 是判断 对象是否 存在目标对象的原型链上比如 一个 实例对象的原型必定有object原型const RP=Object.prototype // object原型 function L() { sex: '男' } let LP = new L() LP = LP.__proto__ // 拿到实例对象原型 function myInstance(L, R) { while (true) { if (L == null) {
2022-03-09 19:23:10
205
原创 vue 中 diff中的key
vue中的diff 离不开 sbabbdom页面每一次更新diff将会使页面最小量更新，key就是节点的唯一标识，告诉diff，在更改前后透明是同一个DOM节点。const vnode1 = h('div', {}, [ h( 'p', { key: '1' }, 'A' ), h('p', { key: '2' }, 'B'), h('p', { key: '3' }, 'C'), h('p', { key: '4' }, 'D')])let container =
2022-03-08 11:17:26
626
原创 vue中 数据劫持原理
当我们在data中添加数据的时候，能在vue的实例对象中读取到该属性，这是利用了数据劫持原理 let person = { name:'小明' } //当读取 proxyPerson时候会 返回person中的数据,也就是用proxyPerson 劫持 person let proxyPerson = { } Object.defineProperty(proxyPer
2022-03-07 17:14:47
755
原创 snabbdom 中h函数原理
h函数 对函数重载，对传入不同种类的参数进行处理export default function (sel, data, c) { // sel 节点名，data 数据, c其他参数 if (arguments.length != 3) { throw new Error('参数错误') } if (typeof c == 'string' || typeof c == 'number') {// 当参数是数字或者字符串 // 调用h函数1 return vnode(sel, data,
2022-03-07 16:45:47
171
原创 vue中虚拟DOM原理
虚拟DOM：用js对象描述DOM的层次结构，DOM中的一切属性都在虚拟DOM中有对应的属性。比如<div><h1>你好</h1></div>虚拟DOM中是这个样子{"sel":"div","children":["sel":"h1","text":"你好"]}之所以成为对象的形式，要用到h函数首先cnpm i snabbdom -Simport { init, classModule, propsModule, sty
2022-03-03 09:55:01
464
原创 webapck5 缓存
缓存作用：让打包的构建速度更快语法：module.exports = { cache:{ // 全体缓存 type: 'filesystem',//必设置项 cacheDirectory: path.resolve(__dirname, '.temp_cache'), //将缓存存在 .temp_cache中 }}问题：浏览器总是获取上一次缓存，不能获取新的缓存。文件资源缓存： new miniCssExtractPlugin({
2021-12-15 17:43:03
860
原创 webpack5 eslint配置
eslint的配置采用 airbnb风格需要下载三个包npm i eslint -Dnpm i eslint-config-airbnb-base -Dnpm i eslint-plugin-import -D并在 page.json中配置添加 "eslintConfig": { "extends": "airbnb-base" // 继承airbnb风格，具体可在github中的airbnb仓库中查看详细风格 }在webpack中配置 eslint下载包npm i es
2021-12-11 14:29:30
1201
原创 webpack5 postcss-loader
在 mode属性中 module: { rules: [ { test: /\.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { // 配置插件 postcssOptions:{ // postcss 配置
2021-12-10 20:30:06
596
原创 webpack报错 static heartbeatInterval = 1000
用 npx webpack serve打包的时候报错（webpack-dev-server 已经弃用）显示以下错误static heartbeatInterval = 1000;SyntaxError: Unexpected token =安装webpack的信息“webpack”: “^5.64.4”,“webpack-cli”: “^4.9.1”,“webpack-dev-server”: “^4.6.0”原因node 版本过低解决办法安装最新的node版本因为 webpack-
2021-12-10 11:18:17
3081
5
原创 用Javascript实现栈问题
有六个元素 6,5,4,3,2,1 按顺序进栈，下列哪一项不是合法的出栈序列。A 54361 B 453216 C 346521 D 234156用JavaScript实现首先，栈是一种受限的线性表，它遵循后进先出的特点。那么就意味着栈只能在一端进栈和出栈。// 首先 用函数来 模拟栈，在栈中用 array数组来存储数据 function Stack(){ this.array = [] // 数组 this.popStack = []
2021-11-12 11:42:41
545
原创 exports 的this 指向问题
在文件模式下console.log(this === exports ); //输出为trueconsole.log(exports === module.exports);//输出为true可见 在模块中 this 和 exports， module.exports 指向相等。 为一个空对象。当 exports 和 module.exports 同时存在时在一个文件夹导出let name = 'node.js'let age = 18exports.name = name;modul
2021-06-20 18:10:13
761
原创 解构赋值的基本使用
let obj = { name:'小明', age:18}let {age,name} = obj // 对象中的名称必须和 obj中的名称保持一致console.log(age);console.log(name);let {age:ages} = objconsole.log(ages); //可以给对象中的属性起别名// let [a,b,c] = [1,2,3];// console.log(a,b,c);let [,d,] = [1,2,3]; // 一个逗号都
2021-06-20 17:43:34
109
原创 使用原型链继承
在es5时没有类，用原型链继承，所有的函数，数组，字符串，都有一个原型 proto 。对象的原型称为对象原型。 构造函数的原型称为 原型对象。下面利用 构造函数来实现继承。function Father(){ this.sex = '男'}Father.prototype = { height:'180cm', like: 'LOL', constructor: Father //父亲的原型，一般是公用的方法或者属性}function Son(name,age)
2021-06-11 18:14:18
62
原创 var let const不同点
var 是全局定义没有块级作用域，如果只想在一个作用域下 var 只能在函数内var 缺点 预解析 可以先赋值后定义可以命名相同的变量a = 10var a console.log(a); //输出为10var a = 10var a = 20console.log(a); //输出为20let a = 10 console.log(a);//先定义后赋值 结果为 10cconst let 将没有var 的缺点 拥有块级作用域 且不可变量提升不可定义相同的变量名称cons
2021-06-04 08:44:25
70
原创 js es6转es5
es6尚未得到所有浏览器的全部支持将es6转化为es5必要。下面将利用babel 转换js语法首先安装npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node在项目中创建 babel.config.js 文件（不可更改）在文件中写入如下代码const presets =[ ["@babel/env", { targets: { ie: "8", edge: "17", firef
2021-05-07 20:32:11
375
原创 路由跳转
跳转调用方法：this.$router.push(地址）网页向后跳转（即浏览上一条记录）：举个例子 <div id="app"> <router-view/> </div> const app = { template:` <div> <header class="header">后台管理系统</header> <!-- 中间主
2021-05-06 20:50:26
161
原创 命名路由的使用
除了指定路径外，可以自定义名称对路由匹配，举个例子。 <div id="app"> <router-link to="/user/123">user</router-link> <router-link :to="{name:'users',params:{id:456}}">users</router-link> <router-view></router-view>
2021-05-05 16:48:14
114
原创 动态路由匹配
在指定路径下可以匹配任意组件，可以通过$route.params.id 或者props来获取对应的值举个例子 <div id="app"> <router-link to="/user/123">user</router-link> <router-view></router-view> </div> const user = { template:`<h1&
2021-05-05 16:31:23
69
原创 VueRouter入门
Vue Router 是vue的路由管理器 使用它需要创建它的实例，用router-view 路由填充（相当于占位符）的使用，举个简单的例子<div id="app"> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <router-view><
2021-05-04 18:04:55
146
原创 路由基础
路由分前端路由和后端路由；后端路由是更具不同用户的rul请求，返回不同内容，本质上是url请求地址与服务器资源之间的对应关系；前端路由1：根据不同的用户事件，显示不同的页面内容本质是用户事件与事件处理函数之间的对应关系。对于前端路由可以基于hash来实现举个例子 <div id="app"> <a href="#/zhuye">主页</a> <a href="#/keji">科技</a> &l
2021-05-04 17:58:31
83
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人