- 博客(82)
- 收藏
- 关注
RSS订阅
原创 $set实现原理
Vue.set()和this.$set()应用的场景平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作，结果发现，咦~~，他喵的，怎么页面没有重新渲染。const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } }});vueInstance.$data.arr[0] = 3; // 这种骚操作页面不会重新渲染vueInstance.$data.obj1.b = 3; // 这种骚操作页面
2021-07-14 17:25:18
5892
1
原创 vue响应式原理
那依赖收集是如何实现的？在 new Vue() 后， Vue 会调用_init 函数进行初始化，也就是init 过程，在 这个过程Data通过Observer转换成了getter/setter的形式，来对数据追踪变化，当被设置的对象被读取的时候会执行getter 函数，而在当被赋值的时候会执行 setter函数。在修改对象的值的时候，会触发对应的setter， setter通知之前依赖收集得到的 Dep 中的每一个 Watcher，告诉它们自己的值改变了，需要重新渲染视图。更新页面上price的值。
2023-10-10 14:04:41
212
原创 vue中$attrs，$props，$listener
在子类组件的选项中设置：inheritAttrs:false，组件的根元素就会取消继承，绑定事件无效。props”，v-on="$listeners"也就是把之前父组件那里给它的属性再全部传到它的子组件。，而通常，我们是想在上绑定事件，所以要取消事件，然后再手动绑定到上。以上例子中，click、focus事件的作用范围是组件的根结点。props = 在使用组件时定义的所有属性，不包括事件。：当前组件从父组件那里接收的参数，通俗的讲和。那么在当前组件中使用v-bind=“在vue中父类在使用子类组件时，
2023-10-10 10:29:59
274
原创 nrm常用命令
那么，问题来了，如果哪天你又跑去国外了，淘宝源肯定是用不了的，又要切换回官网源，或者哪天你们公司有自己的私有npm源了，又需要切换成公司的源，这样岂不很麻烦？nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。再npm config ls查看，已经切换成功。
2023-03-22 17:37:11
440
原创 git commit提交规范
📈 (上升趋势图) :chart_with_upwards_trend : 添加分析或跟踪代码。🏁 (旗帜) :checkered_flag : 修复 Windows 下的问题。🌐 (地球) :globe_with_meridians : 国际化与本地化。✅ (白色复选框) :white_check_mark : 增加测试。💚 (绿心) :green_heart : 修复 CI 构建问题。🐧 (企鹅) :penguin : 修复 Linux 下的问题。🔒 (锁) :lock : 修复安全问题。
2022-11-03 11:36:56
2528
原创 TS （Record、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）常用的工具类型的使用
代码】TS （Record、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）常用的工具类型的使用。
2022-08-03 17:13:06
734
翻译 vue3.0 + setup +lang=“ts“
只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成setup函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return了），开发效率将大大的提高！vue3.0 + setup +lang=“ts”......
2022-08-02 14:12:11
1636
原创 关于原型链的解释（三）
七. 函数对象所有的构造器都来自于 Function.prototype，甚至包括根构造器Object及Function自身。所有构造器都继承了·Function.prototype·的属性及方法。如length、call、apply、bind。所有构造器（含内置及自定义）的__proto__都是Function.prototype，那Function.prototype的__proto__是谁呢？如下console.log(Function.prototype.proto === Object.pro
2022-01-07 15:02:21
715
原创 关于原型链的解释（二）
那原型对象主要作用是用于继承。举个例子：var Person = function(name){ this.name = name; // tip: 当函数执行时这个 this 指的是谁？ }; Person.prototype.getName = function(){ return this.name; // tip: 当函数执行时这个 this 指的是谁？ } var person1 = new person('Mick'); person1.getName()
2022-01-07 10:09:23
586
原创 关于原型链的解释（一）
一. 普通对象与函数对象JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){};var f3 = new Function('str','console.log(str)');console.log(typeof Objec
2022-01-05 11:55:06
99
原创 数据类型 的判断及转换
判断数据类型typeof 值 { undefined boolean string number function object //新增 bigint symbol}typeof 不能检测出Object 的衍生类型（Array）判断数组的方式有哪些let obj = [];Object.prototype.toString.call(obj)Array.isArrray(obj); //es6obj instanceof ArrayArray.prototype.
2021-12-14 17:03:13
936
原创 vue重置页面/组件 的 data某个值/data所有值
//重置 data中的某个属性值 eg:将data中的bh的值清空，其他值不变Object.assign(this.$data.bh,this.$options.data.call(this))//重置 data中的值 eg:将data中所有制清空//eg : 在页面有keep-live == true属性时，页面提交表单成功清除data的所有值，以防下次进来数据还是上次提交的数据还在Object.assign(this.$data,this.$options.data.call(this))
2021-11-11 16:42:33
1250
原创 数组对象去重
var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4}, {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];对数组对象的某一个key进行去重处理，这里对那么 结果显示为：[{name: 'a',id: 1}, {name: 'b',id: 3}, {name: 'c',id: 4}, {name: 'd',id: 7}];
2021-11-01 15:37:26
171
原创 vue中的hook
vue中hook的两点使用1. 在同一个组件中 (访问本组件中的生命周期)例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现mounted () { window.addEventListener('online', this.handleOnline) this.$once('hook:beforeDestroy', function () { window.removeEventListen
2021-10-26 10:30:45
1057
原创 15 个优雅的 JavaScript 个技巧
JavaScript 有很多很酷的特性，大多数初学者和中级开发人员都不知道。今天分享一些，我经常在项目中使用一些技巧。1. 有条件地向对象添加属性我们可以使用展开运算符号(...)来有条件地向 JS 对象快速添加属性。const condition = true;const person = { id: 1, name: 'John Doe', ...(condition && { age: 16 }),};如果每个操作数的值都为 true，则 &&
2021-10-20 09:51:00
367
原创 TypeScript
TypeScript 是一种类型化的语言，允许你指定变量的类型，函数参数，返回的值和对象属性。你可以把本文看做一个带有示例的 TypeScript 高级类型备忘单让我们开始吧！Intersection Types(交叉类型)交叉类型是一种将多种类型组合为一种类型的方法。这意味着你可以将给定的类型 A 与类型 B 或更多类型合并，并获得具有所有属性的单个类型。type LeftType = { id: number; left: string;};type RightType
2021-10-20 09:36:38
99
原创 小程序的template模板使用及注意
一定义模板使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：<!-- index: int msg: string time: string--><template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text>
2021-09-29 10:31:34
283
原创 小程序组件的使用及注意
一、创建组件1、新建组件文件在components文件夹下新建目录select，创建select下拉选项卡组件2、自定义组件样式及js①select.wxml文件 继承样式，如 font 、 color ，会从组件外继承到组件内。 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。 #a { } /* 在组件中不能使用 */ [a] { } /* 在组件中不能使用 */ button { } /* 在组件中不能使用 */ .a
2021-09-29 10:16:05
255
原创 20个js技巧，实用
1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。例如：const age = 12;let ageGroup;// LONG FORMif (age > 18) { ageGroup = "An adult";} else { ageGroup = "A child";}// SHORTHANDageGroup = age > 18 ? "An adult" : "A
2021-09-13 17:07:28
227
原创 微信小程序：woker多线程
js是单线程的，在有时候需要处理一些密集计算或者是高延迟的时候，总会出现不便。而且，现在的cpu都是多核的，单线程也无法充分发挥电脑的计算能力。正是基于这种情况，才有了worker的诞生注意事项1、主线程和worker线程之间是通过消息来通信的，主线程不能直接调用worker线程中的函数2、worker线程中不能使用使用wx系列的api。实现步骤配置、主线程中创建调用和销毁、worker线程中实现。步骤一：配置在app.json中配置worker目录步骤二：主线程中创建调用和销毁这一步
2021-08-27 15:13:03
1058
原创 weex＜==＞nvue书写样式需要注意的点（全部）
weex书写步骤全局样式规划：将整个页面分割成合适的模块。flex 布局：排列和对齐页面模块。定位盒子：定位并设置偏移量。细节样式处理：增加特定的具体样式。1.通用样式/*除此通用样式之外的属性，均不被支持*/1.单位只支持px和wx（不受屏幕宽度和viewPortWidth影响），不支持相对单位（em、rem）和百分比，vw/vh等；2. 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。（所以使用padding时应
2021-08-25 17:52:29
1169
原创 跨页面通信BroadcastChannel
BroadcastChannel，这个方式，只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。这个感觉就有点类似于广播了。 1，父页面发送数据var BroadcastChanne1 = new BroadcastChannel('name');//创建一个名字是name BroadcastChannel对象//广播值BroadcastChanne1.postMessage("data") 2，子页面接收var var BroadcastChanne1 = new
2021-08-16 16:48:40
585
原创 css功能实用 新
多年来，CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能，而在过去，您需要JavaScript或变通方法来实现这些功能。为了庆祝它在2021年取得的成就，在这篇文章中，我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情，讨论用例，浏览器支持，并给你一个快速的例子。CSS的新功能：现代CSS可以做什么这是CSS如今具备的一些令人惊奇的功能自定义属性/变量自定义属性基本上允许你在一个集中的地方定
2021-08-02 14:22:11
103
翻译 class 类
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例：//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）function Person(name,age) { this.name = name; this.age=a
2021-07-16 12:00:27
81
转载 miniwebpack实现原理
const fs = require('fs');const path = require('path');const parser = require('@babel/parser')const traverse = require('@babel/traverse').defaultconst babel = require('@babel/core')//moduleAnalyser：分析一个模块的文件依赖const moduleAnalyser = (fileName) => {
2021-07-13 17:36:00
78
原创 Array Object 自身属性及方法大全
Objectconsole.log(Object.getOwnPropertyNames(Object))// ["length", "name", "prototype", "assign", "getOwnPropertyDescriptor", "getOwnPropertyDescriptors", "getOwnPropertyNames", "getOwnPropertySymbols", "is", "preventExtensions", "seal", "create", "defin
2021-07-02 17:32:09
373
原创 前端性能优化
1. 减少 HTTP 请求一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616102442608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2F4enp5,size_16,color_FFFFFF,t_7
2021-06-16 10:25:18
102
转载 wx-open-launch-weapp标签跳转小程序问题
亲测有效<div class="launch-weapp-box"> <wx-open-launch-weapp id="launch-btn" username="跳转小程序原始id" //gh_ 开头 path="跳转地址" //不带参 '/pages/index/index.html' //带参 '/pages/project/project?id=1&name=lll' @launch="onLaunch" @e
2021-06-11 11:52:44
370
1
原创 Promise.all与Promise.race
//promise.all 所有请求并行发送 ,Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。let p1 = new Promise((resolve, reject) => { resolve('成功了')})let p2 = new Promise((resolve, reject) => { resolve('suc
2021-06-10 09:42:22
80
原创 循环里的异步问题，串行，并行
//首先有一个异步的函数：function sleep() { return new Promise((resolve, reject) => { setTimeout(() => { resolve() }, 1000) })}async function promiseAll() { let promiseArr = [] arr.forEach(item => { promiseArr.push((async (item)
2021-06-09 16:45:37
361
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人