前端Vue面试题
文章平均质量分 55
本博客持续更新Vue面试题,请关注收藏
절차 원숭이
欢迎访问我的博客
展开
-
前端面试题
1、this指向在全局中this指向window在函数中this谁调用指向谁构造函数中this指向new出来的实例本身我们可以通过 call、apply、bind来修改this的指向,但是在箭头函数中this永远指向父级的上下文,无法通过call、apply、bind来修改它的this指向2、事件模型:事件委托、代理、如何让事件先冒泡后捕获事件委托: 事件委托,又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。好处: 提高性能,减少了事件绑定,从而减少内存占用如原创 2021-05-20 21:50:33 · 127 阅读 · 0 评论 -
浏览器搜索引擎的SEO
一、什么是SEOSEO是浏览器的搜索引擎优化二、为什么要使用SEO例如:在百度搜索中都是花钱提高百度中被搜索到得几率,SEO是不花一分钱提高被搜索到的几率三、SEO的使用方法keywords它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类,从而增加了网页的被搜索效率语法:<meta name="keywords" content="关键1 ,关键2.。。关键n"/>建议及注意:关键字最好是8个,而且每个关键字最好是不一样的切有关联如果没原创 2021-05-06 21:23:05 · 367 阅读 · 0 评论 -
Vue简版源码Watcher
function Watcher(vm, exp, cb) { this.cb = cb; //用于更新页面的回调函数 this.vm = vm; //MVVM的实例 this.exp = exp; //表达式 this.depIds = {}; this.value = this.get();}Watcher.prototype = { update: function () { //如果是同步那就立刻执行回调 this.run(); }, run:原创 2021-05-06 07:29:03 · 82 阅读 · 0 评论 -
vue-router钩子函数和执行顺序
vue-router钩子函数vue路由钩子大致可以分为三类全局钩子:beforeEachbeforeEach函数有三个参数:to:router即将进入的路由对象from:当前导航即将离开的路由next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。单个路由beforeEnter组件内部beforeRouteUpdatebeforeRouteLeavebeforeRouteEnter...原创 2021-05-04 08:01:55 · 159 阅读 · 0 评论 -
v-for循环中key值的作用
vue中v-for中key值的作用当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。vue的虚拟DOM的Diff算法,其核心是基于两个简单的假设:两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。同一层级的一组节点,他们可以通过唯一的id进行区原创 2021-05-03 20:37:23 · 301 阅读 · 2 评论 -
v-if和v-for的优先级
首先:v-if和v-for是开发中经常会遇到的2个指令,那么在使用的过程中,2者如果同时存在同一个标签上,谁的优先级会更高一点呢?原创 2021-05-03 20:19:20 · 112 阅读 · 0 评论 -
Vue中的$nextTick
一、什么是 $nextTick用法上:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法Vue.next Tick一样不同的是回调this自动绑定到调用它的实例上。二、$nextTick的理解Vue中DOM的更新采取的时候更新队列,Vue在观察到数据变化时候不是直接更新DOM,而是开启一个队列并缓冲在同一个事件循环中发生的所有数据改变。虽然Vue推荐我们采用数据驱动但是有些时候我们仍然需要使用一些原生DOM操作,当数据改变后,DOM变没有更新,这个时候是原创 2021-05-03 20:09:52 · 71 阅读 · 0 评论 -
axios的简单封装
前言:很多人在Vue的项目开发过程中,习惯性的将后端的请求接口写在组件中,在小型项目中可以这么做,如果是在大型项目开发接口比较多,在后期的项目维护中不便于对接口地址的修改,所以我们把axios封装起来,方便查看与维护。实现Api的封装在src目录文件夹下新建一个文件夹utils在util文件中新建一个request.js文件 在request.js文件中对接口的基准路径进行封装示图:封装代码如下import axios from 'axios'// 设置请求基准路径const原创 2021-05-02 21:21:35 · 190 阅读 · 0 评论 -
修改数据页面不更新的原因和解决方案
前言:我们在使用Vue框架进行项目开发时会遇到碰到数据更新,但是视图并未改变的情况,那么是什么原因导致视图不更新的,下面就来分析视图不更新的原因以及解决方案。直接添加属性的问题vue2是用过Object.defineProperty实现数据响应式,组件初始化时,对data中的item进行递归遍历,对item的每一个属性进行劫持,添加set,get方法。我们后来新加的newProperty属性,并没有通过Object.defineProperty设置成响应式数据,修改后不会视图更新。解决方案方案1:V原创 2021-05-02 20:38:41 · 1099 阅读 · 0 评论 -
v-if和v-show的区别
一、共同点v-if 和 v-show 都可以控制元素的显示与隐藏二、不同点v-if通过创建或删除DOM节点来实现元素的显示隐藏(隐藏后DOM元素不存在)v-show通过css中的display属性来控制(隐藏后DOM元素是还存在的)三、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗四、应用场景v-if更适合数据的筛选和初始渲染v-show更适合元素的切换...原创 2021-04-29 21:44:02 · 175 阅读 · 0 评论 -
组件中data为什么是个函数
一、组件中的data组件是可以复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,二、为什么data必须是一个函数为什么组件中data必须是一个函数了而不是对象, 我们首先来看一下第一个声明式渲染的demo中data我们只在当前页面的挂载的div#app这个点上使用,原创 2021-04-29 20:57:16 · 132 阅读 · 0 评论 -
vuex的核心概念和运行机制
什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据Vuex有什么好处?及使用场景在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuexvuex的五个核心概念1、State所有的数据都存储在state,state是一个对象2、mutationsmutations可以操作state中的数据3、actions只能调用mutations 的方法,也可以做异步操作获取数据4、ge原创 2021-04-29 20:04:25 · 166 阅读 · 0 评论 -
Vue数据双向绑定的实现原理
Vue中的双向数据绑定是如何实现的Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据原创 2021-04-28 21:46:41 · 253 阅读 · 0 评论