- 博客(25)
- 收藏
- 关注
RSS订阅转载 你需要知道的js面试题
this关键字(指向)1.谁调用指向谁2.自己调用指向window3.当函数作为构造函数的时候 this指向构造函数实例4.call/apply/bind 强制改变this指向事件模型：事件委托、代理？如何让事件先冒泡后捕获又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。先冒泡后捕获给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为...
2021-05-21 07:45:37
127
转载 vue中修改数据页面不更新的原因和解决方案
原因在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。如何解决Vue.set()Vue.set( target, propertyName/index, value )参数：target：要修改的对象或数组pro...
2021-05-06 08:32:26
1193
原创 v-for中key值的作用
可用于面试：对于用v-for渲染的列表数据来说，数据量可能一般很庞大，而且我们经常还要对这个数据进行一些增删改操作。v-for默认使用就地复用策略，列表数据修改的时候，会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素。key 是特殊的attribute主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地复用相同类型元素的算法。使用 key 时，它
2021-05-06 08:26:03
1848
1
转载 $nextTick的理解
原理Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。官方示例：new Vue({ // ... methods: { // ... example: function () { // modify data this.message = 'change...
2021-05-06 08:22:03
490
原创 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>&...
2021-05-06 08:17:22
144
转载 vue生命周期
1.创建beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用 created() 最早开始使用 data和methods中数据的钩子函数2.挂载beforeMount()【芒特】 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数 3.更新beforeUpdate() 【开始更新】当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新upd
2021-05-06 08:13:36
76
原创 路由导航守卫
vue-router路由导航守卫，在满足一定条件时会接着执行，否则就会被阻止向下执行。举例：你是一个小区的住户，进小区门卫要门禁卡，有卡就进，没卡就不行，门卫就好比路由导航守卫导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。constrouter=newVueRouter({mode:"history",base:process.env.BASE_URL,routes,});//全局前置守卫router.before...
2021-05-06 08:11:51
139
转载 MVVM的实现
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果function MVVM(options) { this.$options = options || {}; var data.
2021-05-06 07:58:56
202
转载 vue简版源码compile
function Compile(el, vm) { this.$vm = vm;//$vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选择器 去查找对应的元素 然后保存 this.$el = this.isElementNode(el) ? el : document.querySelector(el); //确定元素是否真正存在...
2021-05-05 21:37:05
65
转载 vue简版源码observer
function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { //暂存this确保指向正确 var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(...
2021-05-05 21:28:10
77
转载 vue简版源码watcher
function Watcher(vm, exp, cb) { //在实例上保存回调函数 this.cb = cb; //更新界面的回调函数 this.vm = vm; //实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //相关的dep的容器 this.value = this.get(); //当前表达式对应的value}Watcher.prototype = { update: functi..
2021-05-05 21:27:25
74
原创 电商后台管理（下）
下面是我在项目中负责的模块：左侧菜单栏 //菜单栏信息 async getmenu() { let { data: res } = await muney.getList(); console.log(res); this.menulist = res; },页面项目过程中的记录1 子组件和一些可复用组件2 slot插槽3 :routes="[child]" :key="child.path"4matched=[{pat.
2021-05-05 21:23:49
97
原创 电商后台管理（上）
技术栈：1.登录（axios实例和拦截器）2.动态侧边栏和面包屑(this.$router.options.routes,meta路由元的使用)3.iconfont的使用4.页面布局和可复用组件5.element-ui一些工具方法的使用6.vuex模块化项目思路分析登录:获取用户表单信息，提交后给后端接口验证，如果匹配则返回一个token,使用cookie存储，再根据token去拉取用户信息接口获取信息，这里的具体操作主要看后端接口如何书写，登录成功后，跳转至主页面。这里使用.
2021-05-05 21:04:25
94
原创 梦学谷项目报告
1.梦学谷项目基于Vue开发在团队我主要介绍下我负责的模块2.技术栈：vue vue-router axios封装 element实例解释：1.登录模块使用element-ui里面的from表单输入框,对表单信息验证,请求接口获取权限2.首页框架3.会员管理...
2021-05-05 20:51:15
150
原创 vuex的核心与机制
1.vuex的意义vuex是为vue.js应用程序开发的状态管理模式,它采用集中存储来管理组件的所有数据2.vuex的核心概念vuex有五大核心分别是:state:用来存储数据,是一个对象Mutations:用来操作state里面的数据Actions:调用Mutations的方法,进行异步操作Getters:类似于计算属性,对数据做些逻辑性操作Modules:将仓库分模块存储3.运行机制在组件中通过dispatch来调用actions中的方法在actions中通过commit
2021-05-05 20:04:57
199
原创 Vue组件中data为什么是个函数
浅拷贝：var a = 0;var b = a;b = 1console.log('a<<<' + a,'b<<<' + b) //a>>>0 b>>>1这个时候大家可以看到,我把a的值赋给了b,将b的值赋给了a,a的值也没有发生改变深拷贝：var a{ name:'张三' }var b=ab.name='李四'console.log(a.name)我把a对象的值赋给了b,修改啦b的na.
2021-05-05 20:02:07
83
原创 前端vue精简面试题
1.vue组件中为什么data必须是一个函数如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象2.vue常用的指令v-model：用来实现双向绑定v-for：用于数据循环v-show：显示内容（dom元素的display=block/none来控制元素的显示隐藏）v-hid
2021-05-05 19:50:21
112
原创 vue相关面试题
1、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新2、vue父子组件之间的传值：简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。（具体案例可以看我之前写的博客）。3、vue
2021-04-28 21:45:01
89
原创 vue中组件之间的传参
一、父子组件传值父传子2.父子件写法注意：如果想传递动态值:二.子组件向父组件传值1.子组件2.父组件3、兄弟组件之间传值（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例（2）在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 ， 数 据 是 以 emit(“事件名”,“参数”)来来派发事件，数据是以emit(“事件名”,“参数”)来来派发事件，数.
2021-04-25 09:24:58
2062
原创 Vue中的$nextTick()
一、NextTick是什么什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新<div id="app"> {{ message }} </div>const vm = new Vue({ el: '#app', data: { message: '原始值' }})修改messagethis.messag..
2021-04-12 21:40:00
113
原创 jsonp原理
下面是原生jsonp的使用案例。后端使用node搭建的简易服务器。前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
2021-04-08 19:20:14
57
原创 箭头函数与普通函数区别
一、箭头函数是匿名函数，不能作为构造函数，不能使用new箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连{ ... }和return都省略掉。还有一种可以包含多条语句，这时候就不能省略{ ... }和return。不能作为构造函数，不能使用new二、箭头函数内没有arguments，可以用展开运算符...解决三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数th...
2021-04-08 19:07:40
67
原创 ###JS数组排序
1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>a
2021-04-01 21:40:38
49
原创 Vue的scss配置
## vue内scss样式的引入 1.安装node-sass、sass-loader、style-loader npm add node-sassnpm add sass-loadernpm add style-loader 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置： { test:/\.scss$/, loader:['style','css','sass'] }...
2021-03-31 07:54:06
642
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人