- 博客(15)
- 收藏
- 关注
RSS订阅原创 谈谈你对vue3数据响应式的理解
vue2中是循环数据通过Object.defineProperty对每个数据进行get、set，从而完成数据响应式；vue3中是使用ProxyProxy本身的效率会比Object.defineProperty的效率更高，因为不必递归遍历所有属性，而是直接得到一个Proxy；在vue3中，对数据的访问是动态的，当访问某个属性的时候，再动态的获取和设置。极大地提升了组件初始阶段的效率；同时，Proxy可以监控到成员的新增和删除，这些操作均可触发重新渲染，但是在vue2中很难实现，需要通过$set进行设置。
2024-02-01 11:50:19
381
1
原创 为什么vue3中去掉了vue构造函数？
1、调用构造函数的静态方法会对所有的vue应用生效，不利于隔离不同应用2、vue2的构造函数集成了太多的功能，不利于tree shaking；vue3中把这些功能使用普通函数导出，例如采用具名导入的方法，能够充分应用tree shaking优化打包体积3、vue2中并没有把组件实例和vue应用两个概念区分开，通过new Vue创建的对象，即是一个vue应用，也是一个特殊的组件实例；
2024-01-31 11:12:21
554
原创 vue3的效率提升主要表现在哪些方面？
vue2在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在比对静态节点上。vue3的处理方式如下，用一个变量接收创建的节点，每次渲染时调用这个变量即可，这样节点 就只会创建一次。在调用render函数时，会调用cache缓存，判断cache[0]是否存在，存在即调用，不存在即赋值调用。例如<h1>你好<h1/>，这种属于永久不变的静态节点，vue2的处理方式如下。注：预字符串化只针对于连续出现的大量的静态节点，一般为超过20个的连续静态节点。
2024-01-30 17:47:44
699
1
原创 谈谈对vite的理解，对比webpack说明
webpack会先查询各项依赖，进行打包，然后启动开发服务器，请求服务器时给予打包结果；vite直接启动开发服务器，不需要打包，也就意味着不用分析模块的依赖、不需要编译。当浏览器请求某个模块时，根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩短了编译时间，项目越复杂、模块越多，vite的优势越明显。在HMR（热模块替换）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可。但webpack需要把该模块的相关依赖模块全部编译一次，因为vite的效率更高。
2024-01-30 10:11:26
503
1
原创 关于ES6中的Symbol
1 ） Symbol作为书姓名，该属性不会出现在for...in...、for...of...循环中，也不会被。Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。Symbol...for...会先检查给定的key是否已经存在（之前被用Symbol...for...定义过），若不存在，会创建一个新的全局的值，若存在，则返回已存在的值（不会产生一个新的）Symbol函数可以接收一个字符串作为参数，表示对Symbol的描述。
2023-05-09 11:37:45
154
原创 bootstrapTable实现分页时，获取到所有页码的复选框选中数据，在切换页码时保持勾选状态
bootstrapTable有很多的events可以使用，具体的大家可以去bootstrapTable的官网上去看，我今天主要是介绍我用到的几个事件。我用到的主要有四个事件，onCheck（单选）、onUncheck（取消单选）、onCheckAll（全选）、onUncheckAll（全选反选）备注事件位置：与responseHandler和onLoadSuccess是并列的位置。获取到所有页码的复选框选中数据，我是利用了session存储的方法，假设，我将在session中存储一个数组类型的选中数
2022-03-15 16:40:50
3165
8
原创 纯前端实现数据导出.xlxs文件
先上代码。以下是封装的一个前端 导出.xlxs文件的方法data为数据源，也就是要下载的数据数组；tableHeader 为表格的表头字符串String，例如：let str = ‘姓名, 地址, 电话’；contrastRelation 为表头与内容的对应关系，防止内容位置错乱，造成表头与数据不相符的情况，格式为对象Object。例如： letcontrastRelation = {"姓名":"name", "地址": "address", "电话":"phone"};fileName .
2022-03-15 15:04:36
1318
原创 vue中v-model和:value（即：v-bind:value）
1、区别 v-mode实现了视图和data中数据的双向绑定，两者其一改变均改变 v-bind:value只是将初始化时data中的数据绑定到input上，修改input中的值并不会改变data中的数据。 2、v-model的本质 v-model其实时一个语法糖，背后本质上是v-bind:value和v-on:input两个操作 父组件将值通过:value传给子组件，当值改变的时候，子组件通过@input通知父组件值发生了改变，形成单向数据流 3、$attrs 和 in
2022-02-21 11:56:32
16272
原创 实现垂直滚动条左侧显示
在父级元素中设置：overflow-y:auto; direction: rtl;在子级元素中设置： direction: ltr;不显示滚动条
2022-02-21 11:49:55
390
原创 JS中循环遍历总结
1、while循环 特点:先判断后循环语法:while(条件) 语句;2、do-while循环 特点:先循环后判断，最少执行一次循环语法:do {语句 } while(条件)4、for...in循环特点:for...in循环一般用于遍历数组或者对象的属性。一般情况下，for in循环只会遍历自定义的属性，原型上默认的属性不会被遍历出来，但是如果在原型中新增属性或者方法，for in会将原型中新增的属性和方法遍历出来语法:for(let key in obj){} k...
2022-02-21 11:45:57
2090
原创 ES6中set和weakSet
一、set1、定义：set是一种数据结构，类似于数组，但成员的值都是唯一的。2、去除数组的重复成员：[...new set(array)]。3、set实例的属性和方法3.1、set.prototype.size 总数3.2、set.prototype.add(value) 添加值，返回set本身3.3、set.prototype.delete(value) 删除值，返回布尔值，表示删除是够成功3.4、set.prot...
2022-01-04 15:58:04
3121
原创 前端面试题集合
以下内容为最近遇到的一些面试题，先把题目列出来，后续会慢慢地把答案补上ES5-ES7，以ES6为主（set、对象、promise、类、解构赋值等） 闭包（概念、使用过的闭包、题） 手写数组快排 浏览器缓存机制 http各版本区别 https加密算法 浏览器输入地址栏地址后，计算机执行的步骤（包括刷新） ajax原理 各种循环以及区别（forEach、map、reduce、reduceRight等） sessionStorage、locationStorage、cookie（重新打开一个
2021-12-17 11:50:00
150
原创 微信小程序在设置图片长按保存过程中踩过的坑及解决方法
一、API特点 1、wx.saveImageToPhotosAlbum，保存图片到系统相册 特点：当用户拒绝后，下次保存时，会直接执行fail中的代码，不会重新调起授权窗口。 2、 wx.getSetting 和 wx.openSetting （1）wx.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 （2）wx.openSetting 调起客...
2021-09-27 11:26:45
1411
原创 小程序内嵌H5、H5回跳至小程序、小程序打开公众号中的文章
一、小程序内嵌H5 1、前期准备：在微信公众平台小程序开发 --> 开发管理 --> 开发设置中配置业务域名。 2、语句： <web-view src=""></web-view> 3、官方链接：web-view | 微信开放文档 4、注意点：1、src打开的网页的域名必须跟小程序的业务域名保持一致。 ...
2021-09-27 10:29:11
1409
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人