Vue高频面试题二

Vue高频面试题二

---

---

一、为什么避免 v-if 和 v-for 用在一起（必会）

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

二、vue组件的scoped属性的作用

当

但有时在 vue-cli 中引入 UI库 后，修改UI库一些样式，可能不生效。

三、vue怎么在组件中监听路由参数的变化？（必会）

有两种方法可以监听路由参数的变化，但是只能用在包含的组件内。
第一种watch: { ‘$route’(to, from) {
// 在此处监听
}, },
第二种 beforeRouteUpdate (to, from, next) {
//这里监听
},

四、Vuex 的 5 个核心属性是什么?（必会）

分别是 State、 Getter、Mutation 、Action、 Module

1）state
state 为单一状态树，在 state 中需要定义我们所需要管理的数组、对
象、字符串等等，只有在这里定义了，在 Vue.js 的组件中才能获取你定义的这
个对象的状态。
2）getter
getter 有点类似 Vue.js 的计算属性，当我们需要从 store 的 state中派生出一些状态，那么我们就需要使用 getter，getter 会接收 state 作为第一个参数，而且 getter 的返回值会根据它的依赖被缓存起来，只有 getter 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算。
3）mutation
更改 store 中 state 状态的唯一方法就是提交 mutation，就很类似事件。每个 mutation 都有一个字符串类型事件类型和一个回调函数，我们需要改变 state 的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
4）action
action 可以提交 mutation，在 action 中可以执行 store.commit，而且 action 中可以有任何的异步操作。在页面中如果我们要调用这个 action，则需要执行 store.dispatch
5）module
module 其实只是解决了当 state 中很复杂臃肿的时候，module 可以将 store 分割成模块，每个模块中拥有自己的 state、mutation、action和 getter

五、请说下封装 Vue 组件的过程？（必会）

1）分析需求：
确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个文件，实现复用
2）具体步骤：
1. 使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据
2. 如果需要给组件传入模板，则定义为插槽 slot
3. 如果需要 父组件主动调用子组件的方法 可以在 methods 选项中开放方法

六、Vue2 生命周期总共分为几个阶段？（必会）

1）beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2）created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。3）beforeMount在挂载开始之前被调用：相关的render函数首次被调用。4）mountedel被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。如果root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
5）beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问
现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不
被调用，因为只有初次渲染会在服务端进行。
6）updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7）activated
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
8）deactivated
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
9）beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
10）destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11）errorCaptured（2.5.0+ 新增）
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false 以阻止该错误继续向上传播。

七、Vue 组件如何进行传值的? （必会）

1）父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可

2）子组件向父组件传递数据

子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理

3）非父子组件之间传递数据

1、引入第三方 new Vue 定义为 eventBus

2、在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods中的方法名)

3、在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订阅的方法 eventBus.$emit("自定义事件名”)

4、在组件的 template 中绑定事件(比如 click)

八、请说出vue几种常用的指令

v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-show：根据表达式之真假值，切换元素的 display CSS 属性。

v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。

v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。

v-model：实现表单输入和应用状态之间的双向绑定

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

九、Vue-Router 是干什么的，原理是什么？（必会）

vue-Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用。Vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 Vue-Router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起 url 和页面之间的映射关系。“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

利用 URL 中的 hash（“#”）

利用 History interface 在 HTML5 中新增的方法

十、computed 中的属性名和 data 中的属性名可以相同吗？

 不能同名，因为不管是 computed 属性名还是 data 数据名还是 props 数据名都会被挂载在 vm 实例上，因此这三个都不能同名。