- 博客(42)
- 收藏
- 关注
RSS订阅原创 Vue3的watch侦听器以及与Vue2的watch的侦听器区别
2、vue2可以监听单个属性或深度监听整个对象，vue3默认只监听单个属性的变化，不在支持深度监听，如果需要深度监听需要使用deep来实现。开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。1、首先他们都可以监听数据对象和计算属性的变化，Vue3的还可以监听ref和reactive的变化。3、vue3中的回调函数可以接受到变化的新值和旧值作为参数，方便进行比较处理。通过watch监听的ref对象默认是浅层侦听的，
2023-07-23 22:12:31
542
原创 call、apply、bind三者的用法和区别
call、apply、bind可以将某个函数的this指向修改为传入这三个方法中的第一个参数，其中call、apply会立即执行，bind返回的是一个函数，需调用后执行。第二个参数是传入要执行的方法中的参数，call、bind是独立传递参数，apply是以数组传递参数的。2、当参数较少时可以使用call，参数较多可以使用apply以数组的方式传递。3、当需要重复调用时，可以使用bind新定义一个方法。1、需要改变某个函数的this指向时。
2023-07-15 10:51:09
110
原创 Webpack是什么？Webpack热更新原理
Webpack是一个开源的模块打包工具，它能够将JavaScriptCSS、图片等各种资源，通过模块化的方式打包成静态资源文件，用于在浏览器中显示。Webpack具有丰富的插件和配置选项，可以适应各种不同的前端项目，使得开发人员有更多的空间来构建各种复杂的应用程序。
2023-07-15 01:25:03
47
原创 重绘与回流
所以很多浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。（7）尽量不要使用表格布局，如果没有定宽表格一列的宽度由最宽的一列决定，那么很可能在最后一行的宽度超出之前的列宽，引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘（改变样式）。
2023-07-14 23:18:26
54
原创 防抖&节流
原理就是利用一个定时器，再创建一个变量作为锁，每次创建定时器都需要判断锁为true，当创建完后就把锁改成false，定时器执行完后才会把锁改成true。：原理就是利用一个定时器，但是在定时器前面清除定时器，这样就可以做到把前面触发的定时器清除，执行最后一个创建的定时器。防抖就是单位时间内，频繁触发某个事件，只执行最后一次。节流：就是单位时间内，频繁触发某个事件。一般用于页面滚动监听事件、防止用户频繁点击。一般用于搜索框的关键词。：将原函数进行防抖处理后返回。：将原函数进行防抖处理后返回。
2023-07-14 21:18:22
37
原创 什么是虚拟DOM与真实DOM，他们的区别
虚拟DOM（Virtual Document Object Model）是指用JS对象来描述DOM节点及其属性和内容的层次结构，它是对真实DOM的一种抽象表示，并不是真正的DOM节点。当页面需要更新时，虚拟DOM首先进行比较，找出需要更新的部分，然后批量更新至真实DOM，最终只会引起页面的局部重排和重绘，可以减少页面渲染的开销，提高性能。
2023-07-14 20:48:46
1035
原创 js的继承
把一个构造函数的实例对象直接赋值给另外一个构造函数的原型，那么这个构造函数就继承了赋值的那个实例对象上的所有成员。让一个class类extends继承另外一个类，那么此类就继承了那个类的所有成员。把实例对象上的公共成员挂载到原型对象上，那么实例对象就继承了原型的所有成员。
2023-07-14 09:14:27
31
原创 浏览器渲染原理
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
2023-07-14 03:22:54
36
原创 响应式网页
简单来说就是你页面的样式布局，会随着页面视口的大小进行自动匹配，我们知道不同的设备拥有不同屏幕大小即视口(viewport)，那么我们不可能一个样式适应所有的屏幕大小，那么响应式解决的就是网站自动去识别不同屏幕，然后去使用对应的样式去适应屏幕。条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。任意层级元素，在使用。中的增加了更多的媒体查询，就像。
2023-07-14 01:55:50
37
原创 如何在vue中合理拆分Vuex的store并配置全局getter
和store/modules统计创建geeters.js文件。store/modules/user.js文件。2、创建store/modules文件夹，分模块创建js文件。1、创建index.js文件，引入各个模块。
2023-07-11 17:35:22
232
原创 Vue中对Mixin的理解：Mixin是什么？Mixin和Vuex的区别？mixin的使用
将组件的公共逻辑或者配置提取处理，那个组件需要用到时，直接将提取的这部分混入到组件内部即可，这样可用减少代码的沉余度，也方便项目后期的维护。Vuex是公共的状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其他所有引用了Vuex中的该数据的组件都会跟这一起变化。这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码，也可以想象成MIxin就是。，Vue组件化让我们的代码复用性更高，那么组件之间还有重复部分，我们就使用Mixin在抽离一遍。
2023-07-10 22:13:02
149
原创 递归的原理与实际开发运用\递归函数求斐波那契数列\递归实现深拷贝
也就是JS执行函数时会进入另外一个空间执行函数，这个空间成为。若一个函数里面嵌套自己，最终会形成多个调用栈，一层层递进运算再回退运算称为。说白了理解递归就是函数。
2023-07-10 16:44:27
51
原创 Vue数据双向绑定的原理
2、compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。(3)待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。(3)待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。(1)在自身实例化时往属性订阅器(dep)里面添加自己。
2023-07-09 20:49:47
58
原创 Vue项目如何解决跨域问题
这里以vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。3、vue代理服务器proxy跨域。2、cors跨域(后端开启) 、
2023-07-09 00:59:02
153
原创 带你回顾TypeScript（3）
当尝试访问可能不存在的对象属性时，可选链运算符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链运算符也是很有帮助的。如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言。）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。如果是简单值，该类型可以省略，利用类型推导就可以。如果提供的默认值需要在模板中渲染，需要额外添加配置。与函数调用一起使用时，如果给定的函数不存在，则返回。链式运算符，不同之处在于，在引用为空 (
2023-07-07 23:20:58
86
1
原创 TypeScript泛型的理解
作用：泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决。即可声明一个泛型参数列表，接口里的其他成员都能使用该参数的类型。，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)语法：在函数名称的后面使用即可声明泛型参数，整个函数中（泛型（Generics）是指在定义接口、函数等类型的时候，即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型。语法：在类型别名type的后面使用。）的变量都可以使用该参数的类型。
2023-07-06 23:58:02
45
1
原创 带你回顾typeScript(2)
解释：str1是一个变量(let)，它的值可以是任意字符串，所以类型为:string。str2是一个常量(const)，它的值不能变化只能是 'abc'，所以，它的类型为:'abc'，此处的 'abc'，就是一个。概念：在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似。，也就是说某个特定的字符串也可以作为 TS 中的类型，任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用。应用场景：把一个大类型 缩小 为更加具体的类型。，并且不会有代码提示。
2023-07-06 23:20:48
43
1
原创 带你回顾typeScript基础知识(1)
typeScript是具有类型语法的javaScript，是一门强类型的编程语言静态类型检查，提前发现代码错误。
2023-07-06 22:26:07
52
1
原创 Vue3的pinia使用及持久化存储
2、pinia核心概念是 state、actions、getters、modules、plugins。1、安装：npm i pinia-plugin-persistedstate。1、Pinia 是 Vue.js 的轻量级状态管理库，是vuex的升级版。3、定义模块：例如 新建文件src/store/xxxx.js。5、结构导入的 countStore,2、在main.js中use。2、在main.js中导入。
2023-07-01 01:22:21
1057
原创 Vue3-router的基本应用
在v3中，组件中无法访问this，所以也无法像之前在vue2中采用的this.$route与this.$router来操作路由。4、设置路由出口App.vue。3、main.js文件中导入。
2023-06-30 22:57:20
55
原创 带你轻松学会Vue3（1）
script 上的setup是一个特殊的开关：打开之后，就可以使用组合式api不打开它，就可以继续兼容v2的写法。类似vue2的vue.config.js。create-vue是一个脚手架工具，用来快速创建v3的项目（Vuecli用来创建v2的项目）1、package.json：vue的版本是3 + 依赖vite做底层驱动。类似于生命周期钩子的写法，用于替代 Vue 2.x 中的 b。1、在你的电脑中寻找一个风水宝地，打开小黑窗口 输入。3、业务文件夹src/main.js。运行 npm run dev。
2023-06-29 23:43:05
48
1
原创 列表数据删除最后一条后跳转到上一页数据
当只剩下最后一条数据后点击删除，判断数据长度是否等于1 ，页数是否大于1 ，使page自减1 重新渲染即可。
2023-06-04 22:29:42
91
1
原创 css单位中px、em、rem的区别
区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的知识HTML根元素。这个单位可谓集相对大小和绝对大小优点于一身，通过他即可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应，目前，处了IE8及更早的版本外，所有浏览器都已经支持。px是相对于显示器屏幕的分辨率来的，是一个虚拟的长度大单位，是计算机系统的数字化图像的长度单位。3、rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HTML跟元素。
2023-06-02 22:41:45
298
原创 项目打包基本操作步骤
再次运行打包，我们会发现包的体积已经大幅减小：上面的三个包已经不在打包的目标文件中了。但是，对应的项目也跑不起来了： 缺少了js文件。找到vue.config.js文件，添加externals项， 作用：打包时 这里面的包不要打包进来。在vue.config.js中，设置chainWebpack。动态设置externals 在vue.config.js中。注：线上网址可以去BootCDN上面去找。webpack配置externals配置项。会自动生成一个dist文件夹。注入配置到html模板。
2023-05-29 16:25:58
590
1
原创 配置环境变量
下图是开发环境服务端口的在vue.config.js中 位置。在不同的运行环境下，它的值会自动改变。实际上是一个nodejs服务下的。
2023-05-28 21:54:09
142
原创 对于addRoute添加的路由，点击跳转进入404，在刷新时会白屏
【代码】对于addRoute添加的路由，点击跳转进入404，在刷新时会白屏。
2023-05-27 22:28:11
668
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人