Day 1 vue2复习

Vue2.0⾯试题

一. vue⽣命周期? (必问)

1.1 什么是vue⽣命周期?

生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发
我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发

1.2 vue⽣命周期都有哪些钩⼦函数?这些钩⼦函数如何触发?

创建阶段

• beforeCreate
  实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this

• created
  创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了

• beforeMount
  组件挂载之前

• mounted
  组件挂载之后
  这个时候能拿到 dom 节点使用

运行阶段 只要修改 data 就会触发

• beforeUpdate
  数据变了 视图还没变
• updated
  数据变了 视图也变了

销毁阶段

• beforeDestory
  组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
• destoryed
  组件销毁之后

除了这八个 还有 三个
如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数
activated 组件激活
deactivated 组件停用
errorCaptured 子组件出错的时候会触发这个钩子函数

1.3 项⽬开发过程中,在⽣命周期⾥⾯都分别做过什么功能?

我在写效果的过程中 会在 created 或者 mounted 中发送 http 请求
created 和 mounted 的区别 就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求
mounted 的特点是可以操作 dom 节点
还会用 created 钩子函数 获取 本地存储的数据

1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

页面—beforeCreate
页面—created
页面—beforeMount

组件—beforeCreate
组件—created
组件—beforeMount
组件—mounted

页面—mounted

二. vuex的理解? (必问) 讲解

2.1 什么是vuex?使⽤vuex能够解决什么问题?

2.2 vuex的五⼤核⼼是什么?

2.3 在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法?

123.vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用
一共有五大核心
state 存放公共数据的地方 通过 this.$store.state.xxx调用mutations修改state的地方只有这里能修改通过this.$store.commit 调用
getters 相当于是之前的计算属性 通过 this.$store.getters调用actions执行异步操作的地方通过this.$store.dispatch 调用
modules 模块化

vuex 缺点就是刷新数据会丢失 我们可以保存本地存储 或者 安装 vuex 持久化插件 vuex-persist 去实现自动本地存储

2.4 vuex的执⾏机制是什么?

我在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions
⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

2.5 vuex的弊端是什么?怎么解决?

⽐如浏览器刷新的时候,vuex的数据会丢失,我们⼀般结合本地存储来解决,当我们在mutations⾥⾯改变
state的时候在通过localStorage或者sessionStorage存储到本地,然后在state的状态的属性值那块写⼀个三元表达式,如果本地存
在数据的话则读取本地存储的数据,否则就赋值为null

3. vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解

vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合.
history 的原理就是利⽤ ht

4. vue路由守卫?(必问) 讲解⻚⾯权限

所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数,
我们把它称之为vue路由守卫. vue⼀共给我们提供了三种路由守卫,第⼀种全局路由守卫,第⼆种是组件内路由守卫,第三种路由
独享守卫,这个是写在路由⾥⾯. 不管是全局,还是组件以及独享,都会有beforeEach、beforeResolve 、a"erEach 分别表示的意
思路由跳转前会触发的钩⼦函数以及进⼊路由的时候,以及进⼊路由之后会触发的钩⼦函数. 这⼏个钩⼦函数⾥⾯都有⼀个回
调函数,这个回调函数⾥⾯会有三个参数,分别是to,from,next,分别对应的是要进⼊的路由、离开之前的路由,以及进⼊写⼀个路
由
在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex
和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要
跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚

5. v-if与v-show的区别?(90%)

⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显
示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通过css的display:none
和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不
是频繁操作的话,我们可以v-if
在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判
断历史记录的显示与隐藏,这块我就可以使⽤v-if ,当然⽤v-show也可以.

6. v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?(90%) 讲解

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)

7. methods、computed和watch的区别?(90%)。讲解

1. methods 就是方法 我们写的点击事件等各种事件都放在 methods 里
2. computed 计算属性 有缓存功能就是当跟他有关的值发生变化的时候才会重新计算 还有一个特点就是必须要有 return 值 return 就是把计算的结果 return 出去
3. watch watch 可以监听 数据和路由的变化
   watch 监听路由的变化
   监听路由的话就是监听 $router
   watch 监听 数据的变化
   watch 有三个参数 deep immediate handler
   当我们不需要 deep 和 immediate 的时候 就可以简写为一个函数 这个函数就是 handler

8. vue组件通信?(必问)。eventBus 讲解

⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进
⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值
⼦传⽗ ⼦组件通过this.$emit(“⾃定义的事件”,要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来
接收传递的数据
⾮⽗⼦组件通信
通过中央事件总线,我们也称之为eventBus,
我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接
收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式

9. $nextTick⽅法有什么作⽤?(80%) 讲解

⾸先呢,nextTick 也叫做异步更新队列方法 而 nextTick方法的主要作用就是等待 dom元素加载完毕之后才会执行的回调函数 我们经常会在
nextTick⽅法⾥⾯获取dom元素

10. 说⼀下什么是mvvm模式?(70%)

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。
View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动
同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作