1.Vue的v-model双向绑定原理?
v-model本质就是一个语法糖,可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model,会根据标签的不同生成不同的事件和属性
text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
可以将v-model进行如下改写:
<input v-model="sth" /> // 等同于 <input :value="sth" @input="sth = $event.target.value" /> //这个语法糖必须是固定的,也就是说属性必须为value,方法名必须为:input。
2.ref的作用
- 绑定到普通元素上:获取dom元素
this.$refs.box
- 绑定到子组件上:
获取子组件中的data,this.$refs.box.msg
调用子组件中的方法this.$refs.box.open()
3.导航守卫?
- 全局守卫:
beforeEach
,afterEach
- 局部守卫:
beforeRouteEnter
:因为当守卫执行前,组件实例还没被创建,不能获取组件实例的this
beforeRouteUpdate
: 在当前路由改变,但是该组件被复用时调用,可以访问组件实例this
beforeRouteLeave
:导航离开该组件的对应路由时调用,可以访问组件实例this
- 每个守卫方法接收三个参数:
to:
目标路由对象from:
准备要离开的路由next():
进行管道中的下一个钩子。可传递参数有布尔值false
,直接写路径'/'或{path:'/'}
,回调函数- 注意:后置钩子函数
afterEach
不会接受next
函数也不会改变导航本身。
4.
$route
和$router
的区别
$route
是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。- 而
$router
是“路由实例”对象包括了路由的跳转方法,钩子函数等
5.
<keep-alive></keep-alive>
的作用是什么?
- keep-alive可以实现组件缓存,当组件切换时,主要用于保留组件状态或避免重新渲染
- 使用场景:比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用
<keep-alive></keep-alive>
进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染- 常用的两个属性
include/exclude
,允许组件有条件的进行缓存- 两个生命周期
activated/deactivated
,用来得知当前组件是否处于活跃状态
6.指令v-el的作用是什么?
- 提供一个在页面上已存在的
DOM
元素作为Vue
实例的挂载目标
7.组件中的
data
为什么是一个函数?
- 如果
data
是对象的话,由于对象是引用类型,组件被复用的话,就会创建多个实例。本质上,这些实例用的都是同一个构造函数。这样就会影响到所有的实例,所以为了保证组件不同的实例之间data
不冲突,data
必须是一个函数。
8.Vue中的key到底有什么用?
key
是为Vue
中的vnode
标记的唯一id
,通过这个key
,我们的diff
操作可以更准确、更快速。diff
算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key
与旧节点进行比对,然后超出差异。- 简单来说,主要是为了高效的更新虚拟
DOM
。另外vue
中在使用相同标签名元素的过渡切换时,也会使用到key
属性,其目的也是为了让vue
可以区分它们,
9.说一下vue2.x中如何监测数组变化
- 使用了函数劫持的方式,重写了数组的方法,
Vue
将data
中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组api
时,可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。- 重写的数组API:
push
,pop
,shift
,unshift
,splice
,sort
,reserve
。
10.你的接口请求一般放在哪个生命周期中
- 接口请求一般放在
mounted
中,但需要注意的是服务端渲染时不支持mounted
,需要放到created
中
11.Vue事件绑定原理说一下
- 原生事件绑定是通过
addEventListener
绑定给真实元素的,组件事件绑定是通过Vue
自定义的$on
实现的