vue面试题

1、在vue中created与activated有什么区别?

created():在实例创建完成后被立即调用,created()只会触发一次
activated():是在路由设置时,才会有这个生命周期。在被 keep-alive 缓存的组件激活时调用。

2、在vue项目中scss scoped穿透符>>>无效的解决方案有哪些

可以使用 /deep/ 操作符( >>> 的别名)

3、为什么在v-for中的key不推荐使用随机数或者index呢?那要怎么使用才比较好呢?
因为在插入数据或者删除数据的时候,会导致后面的数据的key绑定的index变化,进而导致从新渲染,效率会降低
最好是唯一 的id值。key 的作用主要是为了高效的更新虚拟DOM
4、使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示
router.beforeEach((to, from, next) => {undefined
if(from.path == “…从某个页面跳转…”) {undefined
if(confirm(‘编辑内容未保存,是否离开?’)) {undefined
next()
}else {undefined
next(false)
}
//1. next() 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirm的
//2. next(’/’) 或者next({path:’/’}) 跳转到一个不同的地址,当前的好行中断,然后进行一个新的导航
//3. next(false) 中断当前的导航
}else {undefined
next()
}
})

5、预渲染和SSR(服务端渲染)有什么区别?
预渲染的使用场景更多是我们所说的静态页面的形式。

服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站,一个明显的使用场景就是电商网站。

6、v-if和v-show哪个优先级更高?if>show
v-if:根据表达式的值在DOM中生成或者移除一个元素,值是false就会在DOM中删除,反之会添加相应元素到DOM中,支持加在<template>上面
v-show是根据表达式的值来显示或者隐藏元素,根据的是display的值
不支持加在<template>标签上

7、如何在全局使用axios的实例呢?

在main.js中导入axios,将axios挂载到Vue的原型对象上。
Vue.prototype.$http=axios

8、axios同时请求多个接口,如果当token过期时,怎么取消后面的请求?
axios的话可以使用cancelToken来实现。如果是原生的XMLhttprequest的话,需要使用abort()方法实现。
https://juejin.im/post/5d664634f265da03d42fb6dc

9、你知道v-model的原理吗?说说看

v-model是一个语法糖,真正的实现靠的还是
v-bind:绑定响应式数据
触发 input 事件 并传递数据 (核心和重点)

10、 在使用计算属性的时,函数名和data数据源中的数据可以同名吗?
不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上,因此 这三个都不能同名

11、vue中data的属性可以和methods中的方法同名吗?为什么?

肯定是不能同名的了
1、vue语法就会报错,
2、如果同名那么你在使用this.XXX的时候是调用方法还是调用变量呢

12、怎么解决vue打包后静态资源图片失效的问题?

找到config/index.js 配置文件,找build打包对象里的assetsPublicPath属性
默认值为/,更改为./

13、你知道style加scoped属性的用途和原理吗?

在标签上绑定了自定义属性,防止css全局污染,用/deep/也可以对组件内的样式进行覆盖

14、如何在子组件中访问父组件的实例?
1:直接在子组件中通过this.p a r e n t . e v e n t 来 调 用 父 组 件 的 方 法 2 : 在 子 组 件 里 用 parent.event来调用父组件的方法 2:在子组件里用parent.event来调用父组件的方法2:在子组件里用emit向父组件触发一个事件,父组件监听这个事件
3:父组件把方法传入子组件中,在子组件里直接调用这个方法

注:在子组件标签上加 ref属性如ref=“baseAlert”,在父组件通过this.$refs.baseAlert.子组件方法名。

15、watch的属性用箭头函数定义结果会怎么样?

this为undefined,原因是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this 将是 undefined。

16、 在.vue文件中style是必须的吗?那script是必须的吗?为什么?
在 .vue 文件中,template是必须的,而script与style都不是必须的。

17、vue自定义事件中父组件怎么接收子组件的多个参数?

this.$emit(“eventName”,data)
data 对象或数组都可以的。

18、说说你对vue的表单修饰符.lazy的理解

input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input Value的改变

19、说说你对Object.defineProperty的理解

Object.defineProperty定义新属性或修改原有的属性;
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法,里面定义了setter和getter方法,通过观察者模式(发布订阅模式)来监听数据的变化,从而做相应的逻辑处理。

20、vue组件会在什么时候下被销毁?
页面关闭、没有使用keep-alive时的路由切换。、v-if和改变key值

21、在vue中使用this应该注意哪些问题
vue 的data避免使用箭头函数
vue中methods中函数尽量不要使用箭头函数,会改变this指向,在vue-cli构建的项目中this会为undefined
生命周期的钩子函数不能使用箭头函数,否者this不能指向vue实例

22、template标签的作用
当做一个不可见的包裹元素,减少不必要的DOM元素,整个结构会更加清晰。

23、请描述下vue的生命周期是什么?

生命周期就是vue从开始创建到销毁的过程,
beforeCreate 组件创建之间
Created 组件创建以后
beforeMount 组件渲染之前
Mounted 组件渲染以后
beforeUpdate 组件更新之前
Updated 组件更新以后
beforeDetroy 组件摧毁之前
Destroyed 组件摧毁以后
Activated 组件激活 (配合keep-alive使用)
Deactivated 组件未激活(配合keep-alive使用)

24、 vue组件之间的通信都有哪些?

父传子: 子组件通过props方式接受
子传父:子组件发射一个事件e m i t , 父 组 件 接 受 事 件 以 后 调 用 相 应 的 函 数 非 父 子 : 使 用 一 个 空 的 V u e 对 象 在 第 一 个 组 件 的 点 击 事 件 中 , 使 用 emit,父组件接受事件以后调用相应的函数 非父子:使用一个空的Vue对象在第一个组件的点击事件中,使用emit,父组件接受事件以后调用相应的函数非父子:使用一个空的Vue对象在第一个组件的点击事件中,使用emit方式来发射事件,在第二个组件的mounted函数里面使用$on来接收事件

25、 什么是虚拟DOM?
虚拟DOM是:用JS来模拟一颗 DOM 树,放在浏览器内存中
当你要改变时,虚拟 DOM 使用 diff 算法进行 新旧虚拟 dom 的比较,将修改了的更新到实际的 DOM 树,减少了 DOM 操作。

26、有使用过vue吗?说说你对vue的理解

Vue 是一套构建用户界面的渐进式框架。,通过API实现,响应的数据绑定和视图更新。

轻量级框架,Vue通过简洁的API提供高效的数据绑定和灵活的组件系统
实现了双向数据绑定,通过MVVM思想实现数据的双向绑定
实现了组件化、模块化开发。
27、SPA首屏加载速度慢的怎么解决?
1.通过Gzip压缩
2.使用路由懒加载
3.使用SSR渲染
4.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小

28、删除数组用delete和Vue.delete有什么区别?

delete:只是被删除数组成员变为 empty / undefined,其他元素键值不变,不能触发vue的响应式更新。
Vue.delete:直接删了数组成员,并改变了数组的键值,能触发vue的响应式更新。

29、动态给vue的data添加一个新的属性时会发生什么?怎样解决?
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性,
然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

30、组件和插件有什么区别?

组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue 本身。

31、说说你对选项el,template,render的理解

el: 把当前实例挂载在元素上
template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数
render: 不需要通过编译的可执行函数

32、v-if和v-for的优先级是什么?如果这两个同时出现时,那应该怎么优化才能得到更好的性能?

v-for 的优先级更高
避免出现这种情况,如果实在需要,则在外嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环,避免每次只有v-if渲染很少一部分元素,也需要遍历同级的所有元素。

33、data为什么必须为函数

是为了阻止相同vue组件之间共享数据。确保每个组件独享一个数据对象,而不是共享一个数据对象

34、watch和 computed 的区别?
watch 为了监听某个响应数据的变化。没有缓存,只要从新渲染就会执行
computed 是自动监听依赖值的变化,从而动态返回内容。可以缓存,只有当缓存改变时才执行。、

35、MVC与MVVM的区别
MVC是后端的分层开发概念
MVVM是前端视图层的概念,主要关于视图层,分为M层、V层和VM层。
M为页面中要渲染的数据
V为页面中展示数据的DOM元素
VM是MVVM的核心,为调度者,通过双向绑定联系M与V层。当M层的数据发生改变时,会被VM自动渲染到页面中,当V层的数据发生改变时,VM层会自动将数据同步到M层中。

data—M层
el指定的区域—V层
new Vue得到的实例—VM层

36、模块化与组件化
模块化:是从代码角度分析,把可复用的代码,抽离为单独的模块
优势:提供了模块作用域的概念,防止全局变量污染。
           提高了代码的复用率,方便了成员之间的共存
组件化:是从UI角度分析,把页面中可复用的UI结构抽离为单独的组件。
优势:方便了Ui结构的重用
           随着项目的深入,手中可用的组件会越来越多
           可直接使用第三方封装好的库
           可以更专注于业务逻辑

37、过滤器
可用作一些常见的文本格式化,并不会修改原本的数据,只是在展示的时候做了一层包装。

过滤器的处理函数中,第一个形参已经被定,永远是管道符前面的值
传递参数从第二个开始
必须有返回值
可连续调用多个过滤器,以最后一个为结果
只可以在插值中或者v-bind中使用
如果全局过滤器和私有过滤器发生冲突,则就近原则

38、watch属性
监听指定数据的变化
场景:适合监听单个的、虚拟数据的变化,然后进行对应的操作。【监听url的变化】

39、computed计算属性
只要计算属性的function中所依赖的任何数据发生改变,则会触发计算属性的重新求值。如果第一次计算后数据没有再发生改变,则会把第一次的值缓存起来,这样可以提高性能。
包含get方法【外界要引用该值】和set方法【外界要重新为该值赋值】。

40、watch、computed和methods的区别
methods:表示一个具体的操作,主要书写业务逻辑。
watch:一个对象,键是需要观察的表达式,值是对应的回调函数。主要用于监听某些特定的数据变化,从而进行某些具体的业务逻辑上的操作,可以看作是methods和computed的结合。
computed:结果会被缓存,除非依赖响应式属性变化才会重新计算,主要当作属性使用。

41、ref与$refs
使用this.r e f s 获 取 D O M 元 素 和 组 件 r e f 被 用 来 给 元 素 和 组 件 注 册 信 息 , 引 用 信 息 将 会 被 注 册 到 父 实 例 对 象 的 refs获取DOM元素和组件 ref被用来给元素和组件注册信息,引用信息将会被注册到父实例对象的refs获取DOM元素和组件ref被用来给元素和组件注册信息,引用信息将会被注册到父实例对象的refs中,普通的DOM元素则指向DOM元素,子组件的引用则会指向子组件的实例。
为组件添加ref引用可以调用组件中的方法。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值