Vue前端面试题总结

Vue前端面试题总结

---

1、v-model的原理

v-model是:value="msg"@input="msg=$event.target.value"的语法糖，其中:value="msg"是绑定了数据，value就是input输入框里的值；@input="msg=$event.target.value"就是监听input输入框里值的变化，然后改变值。一句话概括就是，绑定数据并且监听数据改变。
Object.defineProperty定义新属性或修改原有的属性； vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理。

2、Vue的风格指南

（1）使用v-for时记得加key，可以快速定位到需要更新的DOM节点，提高效率。
（2）永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率 。
（3）优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线 。
（4）组件的 data 必须是一个函数。

3、子组件访问父组件的3种方式

(1)直接在子组件中通过this.$parent.event来调用父组件的方法 (2)在子组件里用$emit向父组件触发一个事件，父组件监听这个事件 (3)父组件把方法传入子组件中，在子组件里直接调用这个方法

4、父组件中怎么接受子组件的多个参数

子组件向父组件发射方法this.$emit("名称",data) data为一个对象，对象内可以封装自己想传递的任何数据。父组件接收方法，解封取到自己需要的数据。

5、父组件怎么访问到子组件的实例或者子元素？

在引用的子组件标签上加 ref属性如ref="xxxx"，在父组件通过this.$refs.xxxx.子组件方法名或者 this.$children.子组件的方法名来调用。

6、v-once和v-pre的使用场景

v-once: 只渲染元素和组件一次，随后的重新渲染，视图不发生更新,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-pre: 某个元素如果添加v-pre指令，内部的元素会被vue直接跳过，不过渲染 。将来有可能有一大段的文本，我很明确的知道这段文本是不需要vue来处理

7、定时器的使用和销毁

mounted：

mounted() {
    this.timer = setInterval(() => {
      setTimeout(this.getAllMethod, 0)
    }, 1000*30)
   }

destroyed：

destroyed() {
    clearTimeout(this.timer);
    this.timer=null;
  },

8、vue中template有什么用？

当做一个不可见的包裹元素，减少不必要的DOM元素，整个结构会更加清晰。 template不会出现在dom结构中，经常和v-if搭配使用。

9、nextTick原理

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 Vue官网提到DOM的更新是异步执行的，只要数据发生变化，将会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。
简单来说，就是当数据发生变化时，视图不会立即更新，而是等到同一事件循环中所有数据变化完成之后，再统一更新视图。

10、v-cloak的理解使用

在网络不好或加载数据过大的情况下，页面在渲染的过程会闪烁Mustache 标签：{{}}
为了用户有更好的优化体验，Vue加入了延缓响应的指令v-cloak,在与css:[v-cloak] { display: none } 的配合下，可以隐藏未编译 Mustache 的标签直到实例准备完毕，v-cloak属性才会被自动去除，对应的标签也才可见了。

11、vue生命周期总共有几个阶段？

（1）创建 1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el） 使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用 2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el） 使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里。
（2）载入 1、beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el） 2、mounted：数据和DOM都已经被渲染出来了 使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里
（3）三、更新 1、beforeUpdate：检测到数据更新时，但在DOM更新前执行 2、updated：更新结束后执行 使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick
（4）四、销毁 1、beforeDestroy：当要销毁vue实例时，在销毁前执行 2、destroyed：销毁vue实例时执行