前言
Hello 大家好，这是一篇近期关于面试总结的文章，目前是在校大四学生，文章形式主要以问题和答案的方式展现，可能会有不全面的的地方，希望大家批评指正，一方面是记录自己的知识点，另一方面是分享出来给需要的小伙伴！！！
所有的知识点都会逐渐整理到 Github 欢迎大家Star😊~
因为近期一直在忙着找实习和毕业的事情，没有时间整理出来。希望大家看完能够得到一些帮助和回顾 🙏
1. 对于MVVM的理解
-
Model: 代表数据模型，也可以在Model中定义数据的修改和操作。
-
View: 用户操作的的界面，当数据发生更新，会通过数据绑定更新到视图层。
-
ViewModel: 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；
View有某些操作，ViewModel就要响应这些操作。
总结: MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定(Object.defineProperty)技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化
2. 说一下你对vue生命周期的理解
Vue 完整的生命周期，就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程。参考地址
- beforeCreate：生命周期函数执行时，data 和 methods中的数据还没有初始化
- created：data 和 methods都已经初始化好了。最早调用methods和操作data的数据，但真实的dom还没有生成
- mounted：只要执行完mounted，表示整个Vue实例已经初始化完毕了
3. Vue组件之间的参数传递方式
父子组件传值
- 父组件传给子组件：子组件通过 props 接收
- 子组件传给父组件：通过 this.$emit 传递
- 路由传递参数： 路由配置中加入 props : true ，页面通过 props:{ id: { } }接收
.sync修饰符：不是真正的双向绑定，而是一个语法糖，修改数据还是在父组件完成的，并非在子组件
非父子组件的数据传递
- Vuex 起到一个仓库的作用，可以存储data，methods
4. Vue路由的钩子函数
beforeEach的应用场景：需要用户登录才能进入主页面
- 主要包括三个参数 to，from，next
- to：即将进入的路由
- from：当前要离开的页面
- next：一定调用这个方法，否则路由不会进行跳转
5. Vuex是什么？怎么用？
- vuex相当与一个仓库，里面存储了数据，方法
- state：存放数据，但是不可以直接修改数据
- mutations：可以通过定义的方法修改state中的数据内容
- actions：可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据 参考官网
//state 使用
1. import { mapState } from 'vuex'
2. 可以通过 扩展运算符 [...]
...mapState({
tags:state => state.tab.tabs
})
// mutations 使用
1. import { mapMutations } from 'vuex'
2. methods:{
...mapMutations({
close: "closeTabs"
})
}
3. 也可以通过 this.$store.commit('closeTabs')
// actions 使用
1. mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
2. this.$store.dispatch('increment')
6. v-if 和 v-show 区别
- v-if 按条件是否渲染，属于
JS层面通多增加和删除dom - v-show 属于
CSS层面通过设置 display:none 或 block
7. route 和 router 的区别
- route 是 '路由的信息' 包括
path，params，hash，query，fullPath，matched，name等路由信息参数。 - router 是 '路由实例' 包括
路由的跳转this.$router.push({name:item.name})
8. Keep-alive的作用？
keep-alive可以实现组件缓存，当组件切换时不会进行卸载
- 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
- 两个生命周期
activated/deactivated，用来得知当前组件是否处于活跃状态
9. NextTick
Vue的实现响应式__并不是数据发生变化之后DOM立即变化__, Vue是异步执行DOM更新的.
参考官网
methods:{
change(){
this.$nextTick(()=>{
// 操作Dom
})
}
}
10. Vue 组件 data 为什么必须是函数 ?
- 每个组件都是
Vue的实例，每个实例可以维护一份被返回对象的独立的拷贝 - 组件共享
data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他
11. computed 和 watch 的区别
-
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed
computed 本质是具备缓存的，适用于比较消耗性能的计算场景，也可以将复杂的逻辑放入计算属性处理
-
watch 用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，watch为最佳选择。
// watch三种大致用法 data: { cityName: 'changchun' }, watch: { cityName(newName, oldName) { // ... } }- immediate 和 handler
这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
// 值为 true 立即执行handler方法 反之和正常的使用watch一样
immediate: true
}
}
```
* __deep__
> 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
```js
<input type="text" v-model="cityName.name"/>
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
```
> 设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性
```js
watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
12. 说一下 v-model的原理
v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性
<input v-model="sth"/>
<input :value="sth" @input="sth = $event.target.value="/>
13. 动态绑定class
应用场景：动态改变样式、数据，例如：切换侧边栏
<el-menu :collapse="isCollapse"><</el-menu>
computed:{
isCollapse(){
return this.$store.state.tab.isCollapse;
}
}
14. v-on可以监听多个方法吗？
可以
<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
v-on 常用修饰符
.stop该修饰符将阻止事件向上冒泡。等同于 event.stopPropagation() 方法.prevent该修饰符会阻止事件的默认行为。 等同于event.preventDefault() 方法.once该修饰符表示绑定的事件只会被触发一次
15. 请列举3个Vue中常用的生命周期钩子函数?
- created：实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算
- mounted：
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内 - activated:
keep-alive组件激活时调用
