vue知识总结(二)

原创已于 2022-07-29 09:48:30 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

于 2022-03-29 14:51:48 首次发布

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

框架

4 篇文章

订阅专栏

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

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。