前端vue面试题个人总结
1、介绍Vue中的常用的指令
- v-bind 绑定属性机制，可以简写为：
- 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
- 数组方法v-bind:class="[class1, class2]"
- 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
- v-on 绑定事件机制,可以简写为@
- v-for
- v-html 以html标签形式显示
- v-text 可以简写为{
- v-if
- v-show
- v-model 双向数据绑定
2、vue中常用的事件修饰符
- .prevent: 阻止默认事件；如：v-on:submit.prevent阻止默认事件;
- .stop: 阻止单击事件冒泡；如：v-on:click.stop阻止事件冒泡;
- .self: 当事件发生在该元素本身而不是子元素的时候会触发；
- .capture: 事件侦听，事件发生的时候会调用
- .once 事件只触发一次
3、谈谈你对MVVM开发模式的理解
- MVVM分为Model、View、ViewModel三者。
- Model 代表数据模型，数据和业务逻辑都在Model层中定义；
- View 代表UI视图，负责数据的展示；
- ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
- Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
- 这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 DOM。
4、 v-if 和 v-show 有什么区别？
-
v-show
-
v-show是css切换，频繁切换时用v-show，
-
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；
-
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；
-
v-show对应的值无论是true还是false，对应HTML元素都会存在于浏览器的文档中；
-
-
v-if
-
v-if=‘false’ v-if是条件渲染，当false的时候不会渲染，
-
v-if是完整的销毁和重新创建，运行时较少改变时用v-if，而v-if会控制这个 DOM 节点的存在与否。
-
当只需要一次显示或隐藏时，使用v-if更加合理。
-
v-if如果是false的话，对应HTML元素直接不在浏览器的文档中了。
-
5、请详细说你对vue生命周期的理解？
- 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
- beforeCreate----创建前 组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。
- created----创建后 组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$el未存在
- beforeMount---挂载前 vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换
- mounted-----挂载后 vue实例挂载完成，data.message成功渲染。
- beforeUpdate----更新前 当data变化时，会触发beforeUpdate方法
- updated----更新后 当data变化时，会触发updated方法
- beforeDestory---销毁前 组件销毁之前调用
- destoryed---销毁后 组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在
7、vue中<keep-alive>的作用；active-class是哪个组件的属性？
- 把切换出去的组件保留在缓存中，可以保留组件的状态或者避免重新渲染。
- active-class是vue-router模块的router-link组件的属性。
8、计算属性及和 watch 、methods的区别
-
computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算，
- computed可以依赖其他computed，甚至是其他组件的data；
- 依赖于数据，数据更新，处理结果自动更新；
- 计算属性内部this指向vm实例；
- 在组件调用时，直接写计算属性名即可；
- 有get和set两个选项，常用的是getter方法，获取数据，也可以使用setter方法改变数据；
-
watch 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。
-
相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算，methods不会。methods是一个方法，它可以接受参数，而computed不能。
10、父子组件之间的传值通信？
-
父组件向子组件传值：
-
子组件在props中创建一个属性，用来接收父组件传过来的值；
-
在父组件中注册子组件；
-
在子组件标签中添加子组件props中创建的属性；
-
把需要传给子组件的值赋给该属性
-
子组件向父组件传值：
-
子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
-
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
-
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
12、非父子组件之间的通信
常用的方法有 EventBus 和 Vuex
-
EventBus 实现非父子组件通信的原理是：
- 通过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) )，
- 然后在其他组件中再通过bus来监听此事件并接受参数( bus.$on(event, callback) )。
-
Vuex 是什么：
-
Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态
-
Vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。
-
