vue知识总结(二)

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函数也不会改变导航本身。

1. 12道vue高频原理面试题,你能答出几道?

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实现的