- 博客(36)
- 收藏
- 关注
RSS订阅
原创 前端基本面试题
1.this指向问题1.在普通函数中，this指向window2.构造函数中this指向它的实例3.普通函数this谁调用就指向谁4.箭头函数中this指向父级上下文5.Function.prototype.call 或 Function.prototype.apply 调用跟普通的函数调用相比，用 Function.prototype.call 或 Function.prototype.apply 可以动态地改变传入函数的 this：2.对象和面向对象对象：..
2021-05-20 21:41:00
170
原创 微信小程序的生命周期
下面从三个方面来介绍小程序的生命周期：（1）应用生命周期（2）页面生命周期（3）应用及页面生命周期的触发顺序1.应用生命周期App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数（1）onLaunch: 初始化小程序时触发，全局只触发一次（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发（3）onHide: 用户从前台切换到后台隐藏时触发（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发
2021-05-06 19:28:14
356
原创 微信小程序和普通页面得区别
小程序简介小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序技术发展史小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。小程序与普通页面得区别小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。网页开发渲染线程
2021-05-06 18:54:01
748
原创 实现一个MVVM
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。function MVVM(options) { this.$options = options || {}; var d.
2021-05-05 20:25:01
105
原创 Vue源码解析--实现一个watcher
实现Watcher我们前面讲过，Observe()函数实现data对象的属性劫持，并在属性值改变时触发订阅器的notify()通知订阅者Watcher，订阅者就会调用自身的update方法实现视图更新。Compile()函数负责解析模板，初始化页面，并且为每个data属性新增一个监听数据的订阅者（new Watcher）。Watcher订阅者作为Observer和Compile之间通信的桥梁，所以我们可以大致知道Watcher的作用是什么。主要做的事情是:在自身实例化时往订阅器(dep.
2021-05-05 20:19:04
319
原创 Vue源码解析--实现一个指令解析器 Compile
结合 Vue源码解析--实现一个指令解析器 Compile基础上在解析指令渲染视图时添加观察者 并实现Proxy代理 和 input 视图驱动数据MVue.jsconst compileUtil = { getVal(expr, vm) { return expr.split('.').reduce((data, currentVal) => { return data[currentVal] }, vm.$da...
2021-05-05 20:14:27
249
原创 Vue源码解析--实现观察者Observer
Vue源码解析--实现观察者OBserverMVVM实现原理图vue采用数据劫持配合订阅者和发布者模式的方式 ,通过 Object.defineProperty 的setter 和 getter 对数据进行劫持 ,在数据变化时, 发布消息给依赖器 Dep(订阅者), 去通知观察者Watcher 做出对应的回调函数 , 进行视图更新MVVM 作为绑定入口 , 整合Observer , Compile 和Watcher 三者 , Observer来监听model数据...
2021-05-05 20:12:26
198
原创 项目总结之后台管理（2）
商品管理（商品列表）<template> <div> <!-- 面包屑导航区域 --> <bread/> <!-- 卡片视图区域 --> <el-card> <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入内容" v-model=
2021-05-05 20:00:03
173
原创 项目总结之后台管理（1）
项目结构上代码主页<template> <el-container class="home_container"> <!-- 头部区域 --> <el-header> <div> <span>电商后台管理系统</span> </div> <el-button type="info" @click="logout"...
2021-05-05 19:48:11
285
1
原创 项目总结之小米商城（2）
首先，首页的布局这个就是实现一个基本的布局这里应用到的技术点有全局变量以及那个浏览更多的路由跳转（1）模拟全局变量 ---直接上代码这个是要用到的全局需要用到的组件在main.js中注册在应用到的组件（2）浏览更多页面methods里然后这个是全部商品有面包屑、还有分类、以及商品详情分类这块应用到了路由切换商品详情<template> <div> <div.
2021-05-05 19:28:41
368
原创 项目总结之小米商城（1）
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。后端采取了MVC模式，根据前端需要的数据分模块设计了相应.
2021-05-05 18:40:25
1199
原创 项目总结之梦学谷（2）
上一篇总结了梦学谷这个项目的大概大概的架构这一篇主要总结一下这个项目的技术点以及代码展示首先封装API格式主要代码格式是这样的在项目里引入的方式（1）先在前面引入这个api在获取里面数据的时候写上你这个api的名字在.后写的是你在api里起的那个名字就可以获取到数据了axios的封装：这是在登录鉴权的时候多的用到的...
2021-05-05 18:00:24
97
原创 项目总结之梦学谷（1）
首先，看一下里面的首页里面的技术栈有：1.登录鉴权 2.mock.js模拟的数据 3.封装的API 4.axios的封装项目所有的模块介绍：（1）会员管理部分（2）供应商管理部分（3）商品管理部分（4）员工管理部分继续看下一篇！...
2021-05-05 17:48:12
95
原创 vue双向数据绑定原理
Vue2.0实现双向绑定所谓的双向数据绑定主要是mvvm设计模式中数据层(m)和视图层(v)的同步应用,在写入数据的同时,视图层也会自动同步更新,我们可以通过下面一张图来进行观察这种绑定原理:经过查资料我们可以看到网上的各种原理,最多的答案就是下面这样的解释:vue.js是采用的数据劫持结合发布者-订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter/getter在数据变动时,发布消息给订阅者,触发相应的监听回调具体步骤: ..
2021-04-30 11:22:34
124
原创 vuex的核心概念和运行机制
首先说一下什么是vuex以及它的使用场景一、简述一下vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据二、Vuex有什么好处？及使用场景 在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex三、介绍Vuex的核心概念及其作用1.state所有的数据都存储在state中 state是一个对象2、mutations 可以直接操作state中的数据3、actions
2021-04-30 11:09:28
113
原创 axios的封装
第一步：配置axios首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的UI库。import axios from 'axios'import { Message, Loading } from 'element-ui'const ConfigBaseURL = 'https://localhost:3000/' //默认路径，这里也可以使用env来判断环境let loadin
2021-04-30 11:09:08
93
原创 vue-router钩子函数和执行顺序
vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 constrouter=newVueRouter({ mode:"history", ...
2021-04-30 11:08:47
641
原创 $nextTick
Vue中DOM的更新采取的时候更新队列，Vue在观察到数据变化时候不是直接更新DOM，而是开启一个队列并缓冲在同一个事件循环中发生的所有数据改变。虽然Vue推荐我们采用数据驱动但是有些时候我们仍然需要使用一些原生DOM操作，当数据改变后，DOM并没有更新，这个时候是获取不到最新的DOM对象的，nextTick就是让我们知道DOM是什么时候更新完成的，所以我们可以把DOM操作的代码放到nextTick方法中执行也就是把代码推迟执行，DOM更新完成后在执行，比如我们用swiper做轮播图，图片是接口获取的，发现
2021-04-30 11:08:29
49
转载 修改数据页面不更新的原因和解决方案
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength举个例子：var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是
2021-04-29 19:05:40
275
原创 v-for中的key值的作用
key是dom节点的唯一标识，与内容相关联vue的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。比如一下这个情况：我们要在A、B、C、D、E列表中B后面插入F当key=index时，前后dom树是这样子的：把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有
2021-04-29 18:57:27
96
原创 v-if和v-for的优先级
首先：永远不要把v-if和v-for同时用在同一个元素上。其次：当 Vue 处理指令时，v-for比v-if具有更高的优先级将users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表将：<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li>&l...
2021-04-29 18:41:20
56
原创 vue生命周期
1.创建beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用 created() 最早开始使用 data和methods中数据的钩子函数2.挂载beforeMount()【芒特】 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数 3.更新beforeUpdate() 【开始更新】当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新upd
2021-04-29 16:43:09
42
原创 v-if/v-show的区别
v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以用v-else添加一个“else 块”：<h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no ????</h1>在<template>元素上使用v...
2021-04-29 16:20:23
46
原创 vue常用指令
vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）.
2021-04-29 11:08:12
176
1
原创 最全Vue传值方式
vue组件之间相互传值的方式我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。一、父组件向子组件传值 父组件通...
2021-04-23 20:24:01
1434
原创 什么是深拷贝，浅拷贝，如何实现
什么是深拷贝，浅拷贝，如何实现深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。深拷贝深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响， 对一个对象的修改并不会影响另一个对象。浅拷贝浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。可 以 使 用 for in 、 Object.assign 、 扩 展 运.
2021-04-19 20:01:36
369
原创 说一下从输入 URL 到页面加载完中间发生了什么?
答：大致过程是这样的：DNS解析 TCP连接 发送 HTTP请求 服务器处理请求并返回需要的数据 浏览器解析渲染页面连接结束注：这里会延伸出问 http 状态码，和三次握手和四次挥手相关问题：（1）http 状态码：1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码2xx （成功）表示成功处理了请求的状态码。常见的 2开头的状态码有：200– 服务器成功返回网页3xx （重定向）表示要完成请求，需要进一步操作。 通常，这些状态...
2021-04-19 10:41:36
126
原创 为什么组件中的data是一个函数？
1、从声明式渲染说起vue文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象，通过 new Vue 创建的 Vue 实例中，我们直接把data上的message属性通过模板渲染到页面上去了。但是在.
2021-04-12 21:28:12
90
原创 JS中常用事件
鼠标事件onclick：点击某个对象时触发ondblclick：双击某个对象时触发onmouseover：鼠标移入某个元素时触发onmouseout：鼠标移出某个元素时触发onmouseenter：鼠标进入某个元素时触发onmouseleave：鼠标离开某个元素时触发onmousedown：鼠标按下时触发onmouseup：鼠标抬起时触发onmousemove：鼠标被移动时触发onwheel：鼠标滚轮滚动时触发oncontextmenu：点击鼠标右键时触发键盘事件.
2021-04-09 11:39:39
166
原创 什么是跨域？以及跨域的解决方案！
什么是跨域跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去常见的跨域场景所谓的同源是指，域名、协议、端口均为相同。http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域
2021-04-08 16:13:50
140
原创 什么是重绘？什么是回流？他们的区别是什么？
html 加载时发生了什么在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的
2021-04-05 21:19:16
341
原创 JS中检测数组的四种方法
今天和大家分享一下 JS 中检测是不是数组的四种方法。1. instanceof 方法instanceof 用于检测一个对象是不是某个类的实例，数组也是一种对象所以也可以利用 instaceof 来进行判断。 let arr = [1, 2, 3]; console.log(arr.instanceof(Array)); // true这种方法在只有一个全局作用域的环境下是可以的，但是如果一个网页中包含多个框架，那么就会存在不同的全局环境，不同的环境 Array 构造函数是不同的...
2021-04-01 21:22:38
1193
1
原创 常用的数组方法整理
常用的数组方法 1：concat(); 2：join(); 3：pop(); 4：shift(); 5：unshift(); 7：reverse(); 8：sort(); 9：slice(); 10：splice(); 11：toString(); 12：valueOf(); 13：IndexOf(); 14：lastIndexOf(); 15：forEach(); 16：map(); 17：filter(); 18：every();
2021-03-31 19:48:22
1374
原创 vue中的key到底有什么用？
vue中的key到底有什么用？key是为了Vue中的vnode标记的唯一id，通过这个key我们的diff操作可以更准确、更快速*diff可以概括为:oldCh和newCh各有两个头尾的变量Startldx和Endldx·一共有4种比较方式。如果4种比较都没匹配。如果设置了key值，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦Startld>Endldx表明oldCh和newCh至少有一个遍历完了，就会结束比较，这四种比较方式就是首、尾、旧尾新头、旧头新尾。 - 准确
2021-03-30 21:43:22
223
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人