- 博客(45)
- 收藏
- 关注
RSS订阅原创 vue虚拟DOM底层原理
总 的虚拟 DOM 底层原理是通过将真实 DOM 抽象为虚拟节点，使用虚拟 DOM 树进行高效的更新，在变化时只操作变动的部分，从而减少对真实 DOM 的操作，提高页面渲染效率和性能。渲染（Render）：Vue 使用虚拟 DOM 树作为中间层，通过对比新旧虚拟 DOM 树的差异，然后只对需要更新的部分进行实际 DOM 操作，从而提高渲染效率。虚拟 DOM 树（Virtual DOM Tree）：虚拟 DOM 树是由虚拟节点构成的树状结构，它可以完整地描述整个页面的结构。
2023-07-05 09:01:05
243
原创 怎么进行css性能优化
使用合适的CSS预处理器：CSS预处理器（如Sass或Less）可以提供更强大和可维护的CSS编写方式。预处理器提供了变量、嵌套、混合等功能，但在编译为最终的CSS文件时，要确保生成的CSS代码是简洁且高效的。压缩和合并CSS文件：通过消除空格、注释和无用的代码，减少CSS文件的尺寸。使用适当的选择器权重：选择器的权重决定了CSS规则的优先级。使用媒体查询进行响应式设计：通过在不同的屏幕尺寸上应用不同的CSS样式，可以减少不必要的样式渲染和布局计算。避免使用昂贵的CSS属性：一些CSS属性（如。
2023-07-05 09:00:52
405
原创 vue中nextTick底层原理
这种机制保证了在下次 DOM 更新循环结束后，回调函数能够被执行，同时避免了直接在当前代码执行过程中立即执行回调函数，而产生一定的副作用。后并不能立即获取到最新的 DOM 状态，而是需要等待下一轮的 DOM 更新循环结束后才能获取到更新后的状态。方法用于在下次 DOM 更新循环结束之后执行回调函数，常用于获取更新后的 DOM 状态。方法，开发者可以在更新后获取到最新的 DOM 状态，并进行相应的操作。当进行下一轮 DOM 更新时，Vue 会在更新结束后，优先使用微任务（）的方式将队列中的回调函数全部执行。
2023-07-05 08:59:16
183
原创 ts类型断言
无论是尖括号语法还是as语法，它们都可以达到相同的目的，即将一个变量断言为特定的类型。但是，推荐使用as语法，因为它在JSX语法中更常见，并且在某些情况下（如TypeScript与Angular或JSX混合使用）尖括号语法可能会产生歧义。在TypeScript中，类型断言是一种用于告诉编译器变量的类型的方法。需要注意的是，类型断言只在编译时起作用，不会影响运行时的类型。因此，在进行类型断言时，需要确保断言的类型和实际类型是兼容的，以避免运行时错误。在这个例子中，我们使用as语法将。
2023-07-05 08:56:11
229
原创 ts泛型的意思
总而言之，泛型是TypeScript中强大的特性，可以增加代码的灵活性和重用性。通过使用泛型，可以编写能够适用于不同类型的数据的通用代码，并在编译时进行类型检查，提高代码的可靠性和安全性。这意味着我们可以编写一次代码，然后在多个不同类型的数据上使用它，而无需编写重复的代码。TypeScript的泛型是一种在编程语言中用于增加代码的灵活性和重用性的特性。通过使用泛型，我们可以编写能够适用于不同类型的数据的可复用代码。：可以编写能够处理多种类型的数据的通用代码，避免重复编写相似逻辑的代码。
2023-07-05 08:55:59
181
原创 js常用继承优缺点
原型链继承的优点：简单易用：原型链继承是 JavaScript 中最基本的继承方式之一，使用简单，易于理解和实现。复用性：通过原型链继承，子对象可以继承父对象的属性和方法，实现了代码的复用，可以减少代码的冗余。原型链继承的缺点：属性和方法的共享：原型链继承会共享父对象的属性和方法。在创建子对象时，会将父对象的实例作为子对象的原型，这意味着所有子对象共享同一个原型对象。如果一个子对象修改了原型上的属性或方法，那么其他子对象也会受到影响。无法传递参数：使用原型链继承时，无法向父对象的构造函数传递参数。
2023-07-05 08:55:21
421
原创 ts有哪些主要内容
类型推断和联合类型：TS具有强大的类型推断能力，即使未显式指定类型，也可以根据上下文推断变量的类型。TypeScript（TS）是一种在JavaScript基础上构建的编程语言，它添加了静态类型检查和其他新功能，以提供更强大的开发工具和更好的代码维护性。类型声明文件：TS可以通过类型声明文件（.d.ts）为第三方库、JS库或模块提供类型声明。这些是TS的主要内容，它们为开发者提供了更好的代码可维护性、可读性和可靠性，使得Vue3项目在使用TS时更加高效和可靠。枚举类型提供了更好的可读性和类型安全性。
2023-07-05 08:54:52
202
原创 js常用继承方法
在 JavaScript 中，继承是一种通过使用现有的对象或类作为基础创建新对象或类的机制。继承允许新对象或类获得现有对象或类的属性和方法，并且可以在其之上添加新的功能或修改现有功能。这是一些常见的 JavaScript 继承方式，每种方式都有其自己的特点和适用场景。你可以根据具体的需求和情况选择适合的继承方式来实现代码的复用和扩展。javascript复制代码。javascript复制代码。javascript复制代码。javascript复制代码。
2023-07-05 08:53:17
29
原创 call、apply、bind的区别
在选择这三个方法时，可以根据具体的需求和使用场景来确定使用哪个方法。如果需要立即调用函数并传递参数，可以使用。是 JavaScript 中用于改变函数的执行上下文（this）的方法。如果需要创建一个新函数并稍后调用，可以使用。
2023-07-05 08:49:58
105
原创 H5中webSocket 的基本使用
监听 WebSocket 事件：通过为 WebSocket 对象绑定各种事件处理程序来监听不同的事件，以便在特定事件发生时执行相应的逻辑。常见的 WebSocket 事件包括连接建立成功、接收到消息、连接关闭等。需要注意的是，WebSocket 需要服务器端支持并实现相应的协议和逻辑。在事件处理程序中，可以访问接收到的消息内容，并根据需要进行处理和展示。这只是一个简单的示例，实际应用中可能涉及更多复杂的逻辑和处理方式。断开连接：如果希望关闭 WebSocket 连接，可以调用 WebSocket 对象的。
2023-07-02 19:07:22
1630
原创 ES6中export的几种暴露方式
这些是前端开发中常用的几种 export 暴露方式。具体在项目中选择何种方式，取决于项目需求、代码结构和开发团队的偏好等因素。在前端开发中，有几种常见的将代码模块暴露给其他模块的方式。javascript复制代码。javascript复制代码。javascript复制代码。
2023-07-02 19:06:42
363
原创 H5中的webWorker基本使用方法
注意：由于Web Worker在后台运行，所以不能直接访问DOM，也不能执行一些与页面交互的操作。然而，可以通过消息传递机制，在主线程和Web Worker之间进行通信。Web Worker是HTML5中引入的一项技术，它允许我们在后台执行JavaScript代码，以避免阻塞主线程。在事件处理程序中，可以处理Web Worker发送的消息并执行相应的操作。终止Web Worker：在不需要继续运行Web Worker时，可以使用。监听Web Worker的消息：在主线程中，可以通过。
2023-07-02 19:03:57
233
原创 H5中的Gelocation 使用方法
请注意，不同浏览器可能对Geolocation API的支持程度有所不同，一些浏览器可能需要使用HTTPS协议才能正常获取位置信息。你可以根据需要，进一步处理位置信息，例如展示在地图上或发送给服务器。是一个可选参数，用于指定获取位置的一些选项，例如超时时间等。也是一个回调函数，用于处理获取位置信息失败的情况。是一个回调函数，用于处理成功获取位置信息的情况。是一个错误消息，用于提供更详细的错误信息。是一个错误代码，用于指示错误的类型。javascript复制代码。javascript复制代码。
2023-07-02 19:03:15
181
原创 前端js面试题
jsonp是用来解决跨域获取数据的一种解决方案， 具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的is脚本，该脚本的内容是-一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax 技术。:将面向过程每一步进行推进:对同种对象的属性和方法进行抽象，成为一个类(js中没有类的概念，实际上也是一个对象)，然后通过类的方法和属性来访问类。403：客户端没有访问内容的权限，它是未经授权的，因此服务器拒绝提供请求的资源。
2023-06-08 09:47:48
38
原创 vuex完整板使用
3.组件中修改vuex中的数据: $store.dispatch('action中的方法名,数据)或$store.commit('mutations中的方法名,数据)4.mapMutations方法: 用于帮助我们生成与mutations 对话的方法，即: 包含$store.commit(xxx)的函数。在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享通信的方式，且适用于任意组件间通信。2.组件中读取vuex中的数据: $store.state.sum。
2023-06-07 17:42:55
66
原创 vue中的插槽
1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。数据所遍历出来的结构由App组件决定)(games数据在Category组件中，但使用。1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===>子组件。2.分类:默认插槽、具名插槽、作用域插槽。
2023-06-07 17:39:35
30
原创 vue中消息订阅与发布 (pubsub)插件
5.最好在beforeDestroy钩子中，用Pubsub.unsubscribe(pid) 去取消订阅。3.接收数据: A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件。2.引入: import pubsub from 'pubsub-js'4.提供数据: pubsub.publish('xxx’数据)1.安装pubsub: npm i pubsub-js。1.一种组件间通信的方式，适用于任意组件间通信。
2023-06-07 17:37:15
156
原创 vue脚手架配置代理
3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)1.优点:配置简单，请求资源时直接发给前端(8080)即可。1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。2.缺点:配置略微繁琐，请求资源时必须加前缀。
2023-06-07 17:37:10
110
原创 vue中自定义插件
本质:一个包含install方法的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的数据。对象.install = function (Vue, options) {使用插件: Vue.use()// 1.添加全局过滤器。功能:用于增强Vue。
2023-06-07 17:34:36
79
原创 微信小程序封装数据请求
/引入全局app.js，我们可以在globalData中定义一些公用的数据，比如baseUrl、token。const request = require("./request") //引入封装好的js文件。// },// header这里根据业务情况自行选择需要还是不需要。* option - 包含请求方式、请求参数的配置对象。* 封装一个Promise风格的通用请求。//请求头携带的token。2.在文件夹内创建一个js文件。//封装post方法。//post请求示例。//app.js内容。
2023-06-06 09:26:40
236
原创 vue3 provide 与 inject
套路: 祖组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据。let car = reactive({name:'奔驰',price:'40万'})作用:实现祖孙组件间通信。
2023-06-06 09:23:04
25
原创 vue3的生命周期钩子
Vue3.0也提供了 Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下。Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名。beforeDestroy 改名为 beforeUnmount。destroyed改名为unmounted。
2023-06-06 09:22:15
121
原创 vue3 watch几种情况和坑
监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视 (deep配置失效)},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效。},{immediate:true,deep:false}) //此处的deep配置不再奏效。//情况五:监视reactive所定义的一个响应式数据中的某些属性。//情况四:监视reactive定义的响应式数据中的某个属性。//情况一: 监视ref定义的响应式数据。
2023-06-06 09:20:36
232
原创 Vue3.0的响应式
console.log('有人修改了p的某个属性',target,propName,value);通过Proxy(代理): 拦截对象中任意属性的变化,包括: 属性值的读写、属性的添加、属性的删除等。console.log('有人读取了p的某个属性',target,propName);console.log('有人删除了p的某个属性',target,propName);//有人修改和添加p的某个属性时调用。//有人读取p的某个属性是调用。//有人删除p的某个属性时调用。name:'张三',
2023-06-06 09:17:25
33
原创 axios封装
/获取当前环境配置项中的地址，会自动追加到接口上。//获取配置项信息，可以做你的逻辑处理。console.log('开发');console.log('测试');console.log('正式');//开发环境下的执行操作。//测试环境下的执行操作。//生产环境下的执行操作。// 1.引入一次封装。//封装post请求。//post请求示例。
2023-06-06 09:16:06
29
原创 axios 原理
/request请求返回一个promise对象，成功用.then接受返回结果。//post请求返回一个promise对象，成功用.then接受返回结果。//axios返回一个promise对象，成功用.then接受返回结果。//axios返回一个promise对象，成功用.then接受返回结果。//axios返回一个promise对象，成功用.then接受返回结果。//axios返回一个promise对象，成功用.then接受返回结果。console.log('请求拦截器 成功');
2023-06-05 19:38:48
61
原创 Git常用命令
在提交到远程仓库之前，拉去最新代码并更新自己的代码，防止和别人代码产生冲突（需要创建一个新分支来存储，防止拉回来之后把自己代码覆盖）将代码推送至远程仓库（在主分支上推送不用 git push origin 分支名）添加本地需要提交的代码到暂存区 (一次只能提交一个文件)添加本地需要提交的代码到暂存区（提交全部文件）（添加本地需要提交的文件到暂存区）（创建一个分支，并切换到该分支）（提交本地分支到远程仓库分支）（克隆远程仓库代码到本地）提交本地分支到远程仓库分支。（提交暂存区到本地仓库）
2023-06-05 19:38:06
18
原创 js字符串常用方法
str.includes(searchString, position) //查找字符串中是否包含指定的子字符串 回true false。str.startsWith(searchString[, position]) //查看字符串是否以指定的子字符串开头。str.endsWith(searchString[, length]) //查看字符串是否以指定的子字符串结尾。str.split([separator[, limit]]) //字符串分割为字符串数组。
2023-06-05 19:36:43
16
原创 js常用数组方法
arr.splice(start, deleteCount, item1, item2, itemN)//方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。,*/ elementN)// 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。arr.lastIndexOf() //方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。arr.pop() //方法从数组中删除最后一个元素，并返回该元素的值。
2023-06-05 19:36:11
16
原创 js其他常用方法
JSON.stringify() //将一个 JavaScript 对象序列化成一个 JSON 字符串。map.get(key)：返回键5 key 对应的值，如果 key 不存在则返回 undefined。JSON.parse() //将一个 JSON 字符串解析成一个 JavaScript 对象。Object.create() //创建一个新对象，使用现有的对象来作为新创建对象的原型。var res = str1.split(/\s/) //分割字符串 返回数组。
2023-06-05 19:35:49
17
原创 vue2全局事件总线如何使用（$bus）
Vue.prototype.$bus = this //安装全局事件总线，bus就是当前应用的vm。1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。2.提供数据: this.$bus.$emit('xxxx',数据)1.一种组件间通信的方式，适用于任意组件间通信。
2023-06-05 19:33:18
906
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人