- 博客(28)
- 收藏
- 关注
RSS订阅原创 watch，methods和computed的区别
1. watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的相关数据自动发生变化，也就是自动调用相关的函数去实现数据的变动。首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。在很多时候，computed是用来处理你使用watch和methods的时候无法处理，或者是处理起来并不太恰当的情况的。
2023-06-20 19:47:58
766
原创 Vue2响应式原理
5. 如何解决数据更新视图不更新以及出现这种情况的原因：一般出现这种情况的原因是因为被劫持修改的属性为引用数据类型，比如对象，数组，当修改其内部发生变化的时候，是无法被vue2监听到渲染的，这也是vue2响应式原理的缺陷，解决办法用this.$set或Vue.set进行解决。4. this.$set或Vue.set的原理：封装重写了数组或对象原型上的方法，比如：push，pop，shift，unshift等。
2023-05-24 09:00:34
426
原创 防抖和节流两者有什么区别，实现过程
函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。浏览器的resize，scroll，keypress，mousemove等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔500ms就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次。· 函数节流关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次。· 手机号，邮箱验证输入检测。
2023-04-23 18:55:47
78
原创 封装小程序请求
封装wx.request请求传递需要的参数（url，data，method，success成功回调，fail失败回调），封装常用方法POST，GET，DELETE，PUT……· 然后新建一个api.js文件，导入封装好的方法，然后调取相应的方法，传递数据。
2023-04-23 16:57:08
53
原创 小程序app.json全局配置文件描述
window：小程序所有页面的顶部背景颜色，文字颜色配置。· tabBar：小程序底部的Tab，最多5个，最少2个。· pages：用于存放当前小程序的所有页面路径。
2023-04-23 16:51:25
86
原创 Vue二次封装axios过程以及代码实现
大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置，当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间，设置请求头，根据项目环境判断使用哪个请求地址，错误处理等等操作，都需要写一遍。· 封装axios没有一个绝对的标准，只要你的封装可以满足你的项目需求，并且用起来方便，那就是一个好的封装方案。封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间……
2023-04-14 11:13:13
199
原创 WebSocket的理解以及应用场景
Sec-WebSocket-Key：客户端发送的一个base64编码的密文，用于简单的认证密钥。采用了二进制帧结构，语法，语义与HTTP完全不兼容，相比http/2，websocket更侧重于‘实时通信’，而HTTP/2更侧重于提高传输效率，所以两者的帧结构也有很大的区别。· 更好的压缩效果：WebSocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据。
2023-04-13 21:24:15
379
原创 Vue中的$nextTick有什么作用
如果没有nextTick更新机制，那么num每次更新值都会触发视图更新（上面这段代码也就是会更新10万次视图），有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。这是因为message数据在发现变化的时候，vue并不会立刻去更新DOM，而是将修改数据的操作放在了一个异步操作队列中。等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新。
2023-04-12 21:25:00
97
原创 小程序实现下拉刷新
scroll-view：使用该滚动组件 自定义刷新，通过bindscrolltoupper属性，当滚动到顶部/左边，会触发scrolltoupper事件，所以我们可以利用这个属性，来实现下拉刷新功能。· 通过在app.json中，将'enablePullDownRefresh'：true，开启全局下拉刷新。· 或者通过在组件.json，将'enablePullDownRefresh'：true，单组件下拉刷新。
2023-04-12 20:55:03
165
原创 em/px/rem/vh/vw的区别
相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。相对单位，可理解为root em，相对根节点html的字体大小来计算。：主要用于页面视口大小布局，在页面布局上更加方便简单。绝对单位，页面按精确像素展示。
2023-04-12 20:51:32
57
原创 JavaScript原型，原型链的理解
Person.prototype._proto_指向内置对象，因为Person.prototype是个对象，默认是由Object函数作为类创建的，而Object.prototype为内置对象。当时图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，一次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末端。_proto_作为不同对象之间的桥梁，用来指向创建它的构造函数的原型对象的。每个对象_proto_都是指向它的构造函数的原型对象prototype的。
2023-04-10 16:44:32
62
原创 闭包的理解以及使用场景
适用场景：封装组件，for循环和定时器结合使用，for循环和dom事件结合，可以在性能优化的过程中，节流防抖的使用，导航栏获取下标的使用。闭包说的通俗一点就是打通了一条在函数外部访问函数内部作用域的通道。正常情况下函数外部是访问不到函数内部作用域变量的。表象判断是不是闭包：函数嵌套函数，内部函数被return内部函数调用外层函数的局部变量。缺点：由于闭包长期驻留内存，则长期这样会导致内存泄漏。如何解决内存泄漏：将暴露全外部的闭包变量置为null。优点：可以隔离作用域，不造成全局污染。
2023-04-10 11:34:40
95
原创 作用域，作用域链的理解
挡在JavaScript中使用一个变量的时候，首先JavaScript引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。可见上述代码中在函数内部声明的变量或函数，在函数外部是无法访问的，这说明在函数内部定义的变量或者方法只是函数作用域。任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问。
2023-04-09 15:14:46
76
原创 深拷贝浅拷贝的区别？实现一个深拷贝
深拷贝开辟一个新的栈，两个对象属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。但是这种方式存在弊端，会忽略undefined，symbol和函数。即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址。基本类型数据保存在栈内存中。
2023-04-09 14:37:49
62
原创 元素水平垂直居中
这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin:auto它就可以上下左右都居中了。父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高。这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。· 当设置left，top为50%的时候，内部子元素为方块2的位置。· 居中元素（子元素）的宽高已知。
2023-04-09 14:20:00
58
原创 盒模型的理解
盒模型其实就是浏览器把一个个标签都看一个矩形盒子，那每个盒子（即标签）都会有内容（width,height），边框（border），以及内容和边框中间的缝隙（即内间距padding），还有盒子与盒子之间的外间距（即margin），用图表示。那如何在IE盒模型宽度和标准盒模型总宽度之间切换呢，可以通过box-sizing:border-box或设置成content-box来切换。其中：box-sizing：border-box //IE盒模型。
2023-04-09 11:39:58
60
原创 JavaScript继承
ES6继承是目前比较新的，并且主流的继承方式，用class定义类，用extends继承类，用super（）表示父类。ES5实现继承主要是基于prototype来实现的，具体有三种方法。JS继承实现方式也很多，主要分ES5和ES6继承的实现。组合继承是结合第一种和第二种方式。先说一下ES5是如何实现继承的。再说一下ES6是如何实现继承的。
2023-04-09 11:29:34
48
原创 Ajax的原理以及如何实现
AJAX全程（Async Javascript and XML）即异步的JavaScript和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页。Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。· 构建请求所需的数据内容，并通过XMLHttpRequest对象的send（）方法发送给服务器端。· 接受并处理服务端向客户端响应的数据结果。
2023-04-09 11:24:03
141
原创 Vue中的跨域问题
代理（Proxy）也称为网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。CORS（Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端JavaScript代码获取跨域请求的响应。一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。这些再次印证了跨域是浏览器的限制。
2023-04-09 11:11:18
935
原创 vue双向数据绑定的原理（vue2和vue3）
在vue2.x版本中用object.defineProperty来实现双向数据绑定原理，而在vue3.0版本中用Proxy这个对象来代替object.defineProperty实现数据的双向绑定。1.不需要进行显示调用，vue的双向绑定原理就是通过数据劫持+发布订阅来实现的，比如angular的脏检查需要通过显示调用markForCheck，react则需要通过setState来进行显示调用。当访问或者设置对象的属性的时候，触发相应的函数，并且返回设置属性的值。· 直接监听数组的变化。
2023-04-02 21:16:54
618
原创 为什么data属性是一个函数而不是一个对象？
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。vue组件可能会有很多个实例，采用函数返回一个全新的data形式，使每个实例对象的数据不会受到其他实例对象数据的污染。· 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。首先可以看看vue初始化data的代码，data的定义可以是函数也可以是对象。vue实例的时候定义data属性既可以是一个对象，也可以是一个函数。这里我们模仿组件构造函数，定义data属性，采用对象的形式。
2023-03-29 10:56:31
84
原创 ES6的promise
promise.allSettled()方法接受一组promise实例作为参数，包装成一个新的promise实例，只有等到所有这些参数实例都返回结果，不管fulfilled还是rejected，包装实例才会结束。· 只有p1，p2，p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1，p2，p3的返回值组成一个数组，传递给p的回调函数。then是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数。
2023-03-29 10:22:27
60
原创 js内定操作方法
/ splice 增删改 本质是删除 splice(开始的下标,删除的个数,添加的值)// a,b代表数组两两相邻的元素 正序就是a-b。// unshift 头部添加。// reverse 数组反转。// 返回添加后的数组长度。// 返回添加后的数组长度。// shift 头部删除。// push 尾部添加。// 数组内定操作方法。// pop 尾部删除。// 返回排序后的数组。// 返回反转后的数组。// 返回删除的元素。// 返回删除的元素。// sort 排序。
2022-09-16 11:04:40
91
原创 对象的创建 遍历 合并
/ for of 不能遍历对象 可以遍历数组得到数组的每一项。// for in 遍历出来的是下标 可以遍历数组得到下标。// 对象有两种创建方式 字面量创建 构造函数创建。// 两种方式 1.对象.属性名 2.对象[]// 这样创建没有原型链上的方法。// 对象合并使用assign。
2022-09-15 11:51:14
186
原创 var let const的区别
var存在变量提升 let const不存在变量提升const声明基本数据类型可以改变 声明复制数据类型值可以改变let const在当前作用域不能声明声明过的变量否则会报错 tdz暂时性死区。
2022-09-14 11:48:37
123
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人