1.Vue的优点:
1.双向数据绑定:vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。
2.组件化开发:Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数,然后再分别写好各种组件的实现,然后整个应用就算做完了。
3.运行时性能:在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重新渲染。
4.Virtual DOM:简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。
5.灵活性:Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。
6.轻量高效:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。
2.vue.js的两个核心是什么?
数据驱动和组件化。
3.列举vue的几种常用指令
v-if、v-show、v-for、v-on、v-bind、v-model、v-once
4.vue有哪些修饰符
1.事件修饰符:stop、prevent、self、once
2.键盘修饰符:enter、space、up、down
3.表单修饰符修饰符:number、trim、lazy
5.请分别说出vue修饰符trim、number、lazy的作用
1.trim:用来过滤前后的空格
2.number:将用户输入的数据绑定为number类型
3.lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步
6.vue事件修饰符怎么使用,举例说明
1.<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
2.<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
3.<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
4.<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
5.<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
6.<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
7.Vue 组件间通信有哪些方式?
-
props/$emit
-
$emit/$on(eventBus)
$emit():分发;$on():监听;$off():取消监听。
-
vuex
-
$attrs/$listeners
-
provide/inject
-
$parent/$children 与 ref
8.vue中子组件调用父组件的方法
1.直接在子组件中通过this.$parent.event来调用父组件的方法。
2.在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行;
3.父组件把方法传入子组件中,在子组件里直接调用这个方法。
9.vue router 跳转方式
1.this.$router.push()
this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
获取参数:{{this.$route.query.userId}}
this.$router.push({name: 'detail',params:{id: 'abc'}})
获取参数:{{this.$route.params.userId}}
2.query和params 的区别:
query要用name来引入,params要用path来引入
3.query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数。
10.$route和 $router的区别是什么?
$router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。
11.vue-router 路由模式有几种?
vue-router 有 3 种路由模式:hash、history、abstract,默认 hash 模式。
hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器,带一个#;
history : 依赖 HTML5 History API 和服务器配置,不带#,具体可以查看 HTML5 History 模式;
abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
12.vue-router 有哪些钩子函数?
1.全局前置守卫 router.beforeEach
2.全局解析守卫 router.beforeResolve
3.全局后置钩子 router.afterEach
4.路由独享的守卫 beforeEnter
5.组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
13.Vue常用的路由守卫有哪些,怎么设置,使用场景等
常用的两个路由守卫:router.beforeEach 和 router.afterEach
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。
在项目中,一般在beforeEach这个钩子函数中进行路由跳转的一些信息判断。
判断是否登录,是否拿到对应的路由权限等等。
14.组件中写 name 选项有什么作用?
-
项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤
-
DOM 做递归组件时需要调用自身 name
-
vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的
15.介绍下什么是keep-alive
keep-alive是用于做组件缓存的,只会执行一次,不会被销毁。被keep-alive包裹的组件,没有create和beforeDestroyed等方法,但是有activated和deactivated方法。
1.activated:当组件激活时,钩子触发的顺序是created->mounted->activated
2.deactivated: 组件停用时会触发deactivated,当再次前进或者后退的时候只触发activated。
16.vue中如何解决页面不重新渲染问题
1.修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值');
2.使用this.$forceUpdate()方法可重新渲染页面。
17.computed和watch的区别
computed:
1.computed是计算属性,也就是计算值,它更多用于计算值的场景
2.computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算
3.computed适用于计算比较消耗性能的计算场景
watch:
1.更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作
2.无缓存性,页面重新渲染时值不变化也会执行
小结:
1.当我们要进行数值计算,而且依赖于其他数据,那么把这个数据设计为computed
2.如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化。
18.Vue实例中的所有生命周期钩子是什么?
每个Vue实例在创建、挂载和销毁时都要经过一系列步骤,同时,它还将运行称为生命周期钩子的函数,使我们有机会在特定阶段添加自己的代码,下面是一个Vue实例生命周期的过程:
1.beforeCreate——创建钩子中的第一个钩子。它们允许我们在将组件添加到DOM之前执行操作。我们无法访问其中的DOM。进行数据和方法的初始化;
2.created——这个钩子可以用来在创建实例后运行代码,我们可以访问活性数据,但是模板和虚拟DOM还没有被加载或呈现。已经完成数据和方法的初始化;
3.beforeMount—beforeMount钩子恰好在初始呈现发生之前以及模板或呈现函数编译之后运行,很可能我们永远都不需要使用这个钩子。开始渲染dom。
4.mounted——我们可以完全访问响应性组件、模板和呈现的DOM,这是最常用的钩子。可以渲染dom;
5.beforeUpdate—此钩子在组件上的数据更改和更新周期开始后运行,是在修补和重新呈现DOM之前运行。data中的数据即将被更新;
6.updated-这个钩子在我们的组件上的数据改变和DOM重新渲染后运行。如果我们需要在属性更改后访问DOM,这里可能是最安全的地方。data中的数据更新完毕;
7.beforeDestroy—这个钩子将在销毁实例之前运行,果我们需要清理事件或被动订阅,这里就是合适的地方。 实例即将销毁;
8.destroyed—这个钩子将被用来做任何最后一分钟的清理。实例已被销毁;
19.异步请求适合在哪个生命周期调用?
官方实例的异步请求是在mounted生命周期中调用的,而实际上也可以在created生命周期中调用。
20.什么是路由懒加载**?**
路由懒加载是通过异步的方式来加载对应的路由组件,提高页面相应速度
21.Vue动态加载组件的四种方式
1.使用import导入组件,可以获取到组件;
2.使用import导入组件,直接将组件赋值给componet;
3.使用require 导入组件,可以获取到组件;
4.使用require 导入组件,直接将组件赋值给componet。
22.v-if 和 v-show 有什么区别?
以下是v-show和v-if指令之间的一些主要区别:
1.如果表达式通过,则v-if将元素呈现给DOM,而v-show将所有元素呈现给DOM,然后使用CSS display属性根据表达式显示/隐藏元素。
2.v-if支持v-else和v-else-if指令,而v-show不支持else指令。
3.v-if有更高的切换成本,因为它每次添加或删除DOM,而v-show有更高的初始渲染成本,也就是说,v-show具有性能优势,而v-if在初始渲染时间方面具有优势。
23.Vue中的$parent是什么?
与$root类似,$parent属性可用于从子实例访问父实例。尽管它提供了直接访问,但是它使应用程序难于测试和调试,我们很难找到突变的来源。
与$parent一样,Vue也提供了$child,但是可以使用它来访问子实例。
24.虚拟DOM实现原理?
1.虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
2.状态变更时,记录新树和旧树的差异
3.最后把差异更新到真正的dom中
25.虚拟DOM的优劣如何?
优点:
1.保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
2.无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
3.跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
缺点:
1.无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化。
26.vue 双向绑定原理?
采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
Vue3.x是用ES6的语法 Proxy对象来实现的,它也可以实现数据的劫持。
相比于vue2.x,使用proxy的优势如下:
1.defineProperty只能监听某个属性,不能对全对象监听;
2.可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可);
3.可以监听数组,不用再去单独的对数组做特异性操作;
4.vue3.x可以检测到数组内部数据的变化。
27.Vue中的key到底有什么用?
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异。diff程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了,就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.
优点:
1.准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.
2.快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).
28.$nextTick用过吗,有什么作用?
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
解决的问题:有些时候在改变数据后立即要对dom进行操作,此时获取到的dom仍是获取到的是数据刷新前的dom,无法满足需要,这个时候就用到了$nextTick。
29.页面中定义一个定时器,在哪个阶段清除?**为什么要销毁它?**
在 beforeDestroy 中销毁定时器。
在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。
30.组件中data为什么是函数
因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离。
而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。
31.vue中data的属性可以和methods中的方法同名吗?为什么?
不可以,因为Vue会把methods和data的东西,全部代理到Vue生成的对象中,会产生覆盖所以最好不要同名。
32.怎么给vue定义全局的方法?
Vue.prototype.方法名称
33.怎么解决vue打包后静态资源图片失效的问题?
将静态资源的存放位置放在src目录下
34.怎么解决vue动态设置img的src不生效的问题?
因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require。
35.什么是vuex?在那种场景下使用?
vuex是全局状态管理工具,它有以下几个核心部分组成:
1.state:存储数据;
2.mutations:定义的方法动态修改Vuex 的 store 中的状态或数据。
3.actions:调用mutations方法,更新state数据;
4.getters:对state中的数据进行预处理;
5.modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
