vue面试题整理vuejs基础知识整理
1.v-show 与 v-if 区别
v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show
2.计算属性和 watch 的区别
计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。
说出一下区别会加分
computed 是一个对象时,它有哪些选项?
computed 和 methods 有什么区别?
computed 是否能依赖其它组件的数据?
watch 是一个对象时,它有哪些选项?
有get和set两个选项
methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会。
computed可以依赖其他computed,甚至是其他组件的data
watch 配置
handler
deep 是否深度
immeditate 是否立即执行
总结
当有一些数据需要随着另外一些数据变化时,建议使用computed。
当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher
3.事件修饰符
绑定一个原生的click事件, 加native,
其他事件修饰符
stop(阻止事件冒泡) prevent(阻止默认事件) self(只有自己触发,子组件不会触发)
组合键
click.ctrl.exact 只有ctrl被按下的时候才触发
4.双向绑定的原理
通过数据劫持和发布订阅模式方式实现的,核心的 API 是通过Object.defineProperty()来劫持各个属性的setter / getter,在数据变动时发布消息给订阅者,触发相应的监听回调,这也是为什么 Vue.js 2.x 不支持 IE8 的原因。要实现双向绑定,首先进行数据劫持,所以需要设置一个监听器Observer,用来监听所有属性。如果属性发生变化,就需要告诉订阅者Watcher看是否需要更新。因为订阅者很多,所以需要一个消息订阅器Dep来专门收集这些订阅者,然后在监听器和订阅者之间进行统一管理,最后需要一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令(v-model,v-on)对应初始化一个订阅者Watcheer ,并替换模板数据或绑定相应函数
官网解释:https://cn.vuejs.org/v2/guide/reactivity.html
5.怎么理解单项数据流
这是关于组件通讯中父组件的prop传递给子组件,在子组件中不能更改prop,只能父组件更改prop,否则会报错。子组件想修改时,只能通过 $emit 派发一个自定义事件,父组件接收到后,由父组件修改。
一般来说,对于子组件想要更改父组件状态的场景,可以有两种方案:
在子组件的 data 中拷贝一份 prop,data 是可以修改的,但 prop 不能:
exportdefault{props: {value:String}, data () {return{currentValue:this.value } }}复制代码
如果是对 prop 值的转换,可以使用计算属性:
exportdefault{props: ['size'],computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase(); } }}
6.简述vue的状态管理并说明你在项目中哪些地方使用了
component通过mapactions或者dispatch将方法类型和负载传给actions,actions接收到后进行业务处理通过commit将处理后的类型和负载传给mutations,mutations不做业务处理,只根据接收的类型和负载将state中的数据进行突变,component通过mapgetters拿到更新后的仓库数据。
在组件中用mapactions接管methods方法,用mapgetters接收computed计算属性,这样主要是为了action更简洁,便于后期迭代更新。以下通过官网例子进行加深理解:
![](http://upload-images.jianshu.io/upload_images/6797393-a57ddd52f9f57073.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-2507d7d00b4612b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-955763ea0ba27a20.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-051fac1509247c81.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-49e7ee0d2466c4d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-dde6ffc92fd4f7a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-25b34adb24f79219.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-8e4666029b755c33.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
7.简述下生命周期钩子
vue实例从创建到销毁的过程,就是生命周期。从开始创建,初始化数据,编译模板,挂载DOM,渲染,更新再渲染,最后到销毁等一系列过程就是生命周期。
beforeCreate:数据观测和初始化事件还没开始
Created:完成数据观测,属性和方法的运算,初始化事件,$el属性还没显示出来
beforeMount:挂载前调用,相关的render第一次调用。实例已经完成编译模板,data里的数据和模板已经生成HTML,但没有讲HTML挂载到页面上
Mounted:el被新创建的Vm.$el替换,并挂载到实例上面调用。实例已经完成以下配置:用上面编译好的HTML内容替换el属性指向DOM元素。完成模板中HTML渲染到HTML页面中。此过程进行ajax交互。
beforeUpdate:发生在虚拟dom和打补丁之前,可以在该钩子中进一步修改状态,不会触发附加的冲渲染过程。
Updated:由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
8.组件中如何通信
九叔说要讲半小时左右:。。。。
父到子:
传<子组件 :自定义属性=“父数据”>
收:子组件选项props:【‘自定义属性’】
子到父:
父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件
非父子,兄弟组件通讯:
可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。
9.路由守卫是什么,有几种方式
全局守卫,路由独享守卫,组件内部守卫;
全局守卫:
router.beforeRouteEnter(to,from,next){前置守卫,进入}
router.beforeRouterLeave(to,from,next){后置守卫,离开}
to 目标路由 from 当前路由
next函数:next() == next(true) 运行跳转
next(false) 不让跳转
next('字符路径')/next({对象路径}) 重定向
路由独享守卫:没有后置守卫
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
组件内部守卫:
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) { 前置
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteLeave (to, from, next) { 后置
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
10.vue的优化
不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退
11.什么是插槽或内容分发 ,插槽有几种方式
组件内部保留槽位:
具名槽位:<slot name=槽名
匿名槽位: <slot></..>
调用组件插入内容: 内容 == dom | 组件
<组件名>
<template #槽名> 内容 | <组件名>
<template v-slot:槽名>内容
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译
12.简述下mvvm和MVC
MVC:
![](http://upload-images.jianshu.io/upload_images/6797393-9cbf57574f7571af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/604/format/webp)
1.View 传送指令到 Controller
2.Controller 完成业务逻辑后,要求 Model 改变状态
3.Model 将新的数据发送到 View,用户得到反馈
MVP:
![](http://upload-images.jianshu.io/upload_images/6797393-0154726ea6e7faca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/539/format/webp)
1. 各部分之间的通信,都是双向的。
2. View 与 Model 不发生联系,都通过 Presenter 传递。
3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
MVVM:
![](http://upload-images.jianshu.io/upload_images/6797393-ac12fffcfb5d1e01.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/556/format/webp)
和MVP很像,采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然
13.路由懒加载,异步路由,分片打包
原理: 把组件封装到一个函数内部,路由激活时,调用该函数,函数内部 异步加载目标组件并返回
路由配置router.js:
a)
- import home from "../components/home.vue"
+ const home =()=>import("../components/home.vue");
{path:'/home', component: home }
b)
{path:xxx, component: r => { require(['./login/Login'], r) }}
15.vue的数据是响应式的,请问什么时候是非响应式的并如何解决
a:数组数据:
问题1:通过改变长度,利用索引直接设置跟项
解决:Vue.set(数组对象, key, value) | vm|this.$set(数组对象, key, value)
问题2:对数组使用了非变异 (non-mutating method) 方法(返回的了新数组)
解决:对象合并
对象数据变化:
问题:问题:data:{a:1};a 数据是响应式的;vm.b='qq'; b 属性不是响应式的
解决:Vue.set(对象, key, value) | vm|this.$set(对象, key, value)
总结:数据一开始就应该出现在data里,数组里面永远不要放置简单性数据
16.如何编写一个自定义指令
指令是个函数或者对象,用来操作dom,指令内部的this指向window;
a:全局指令 Vue.directive(指令名称不带v-,回调(el,bingding))
el:dom元素;binding是个对象,含有传入的参数,binding。value
b:局部 定义在选项里面
directives:{
指令名不带v- : 函数(el,binding){}
}
17.如何自定义事件
定义:vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
销毁:vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
触发: vm.$emit(自定义事件名1,参数)
自定义事件名: 使用 kebab-case 的事件名
场景: 在一个组件实例上手动侦听事件时
18.懒加载,按需加载,点击加载,滑动加载
把组件加载封装在一个函数中,路由激活的时候调用这个函数,这个函数在运行的时候去加载这个组件。加载用import或者requireAPI
19.如何更改计算属性并响应式
计算属性的set方法
![](http://upload-images.jianshu.io/upload_images/6797393-fe84a1036e98d526.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/455/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-d9da215d3b550120.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/6797393-5d807cbefdc80442.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
20.vue的diff算法
突然发现弄懂这个就不是初级了。。。
作者:将心比心_59bf
链接:https://www.jianshu.com/p/875c9069dfc2
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。