vue面试必会
2020-02-06 本文已影响0人
熬得萨菲
一、对于MVVM的理解？
MVVM是model-view-viewModel的缩写；
Model：代表数据模型，也可以在model中定义数据修改和操作的业务逻辑。
View: 代表UI组件，它负责将数据模型转化成UI展现出来。
ViewModel: 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是同步view和model的对象，连接Model和View。
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由ViewModel来统一管理；
二、 Vue的生命周期
1.beforeCreate(创建前) :在数据观测和初始化事件还未开始；
2.created(创建后)：完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来；
3.beforeMount(挂载前)：在挂载前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
4.mountd(载入后)：el被新创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成一下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面上。此过程中进行ajax交互。
5.beforeUpdate(更新前)：在数据更新前调用，发生在虚拟DOM重新渲染和打补丁之前。 可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6.updated(更新后)：在由于数据更新导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器渲染期间不被调用。
7.beforeDestroy(销毁前)：在实例销毁之前调用。实例完全可以用。
8.destroyed(销毁后)：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
1.什么是Vue生命周期？
答：Vue实例从创建到销毁的过程，就是生命周期。 从开始创建 -> 初始化数据 -> 编译模板 -> 挂载DOM-渲染 -> 更新-渲染 -> 销毁等一系列过程，称之为VUE的生命周期。
2.vue生命周期的作用是什么？
答：它的生命周期中有多个钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑。
3.Vue生命周期总共分为几个阶段？
答：他可以总共分为8个阶段：创造前后、载入前后、更新前后、销毁前后。
4.第一次页面加载会触发哪几个钩子？
答： beforeCreate,created,beforeMount,Mounted
5.DOM渲染在哪个周期中就已经完成？
答：在Mounted中就已经完成了。
三、 Vue实现双向数据绑定的原理：Object.defineProperty()
vue实现数据双向绑定主要是： 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的getter，setter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通js对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转化为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令({{}})，最终由Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新； 视图交互变化(input) -> 数据model变更双向绑定效果。
js实现简单的双向绑定：
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、 Vue组件间的参数传递
1. 父组件与子组件传值
父组件给子组件传值：子组件通过props方法接收并规定数据；
子组件传给父组件：$emit方法传递参数；
2. 非父子组件之间的数据传递，兄弟组件传值
eventBus,就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。(虽然也有不少人推荐直接使用VUEX，具体看需求)
五、 路由的实现： hash模式和history模式
1. hash模式：再浏览器中符号“#”，#以及#号后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.xxx.com。因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
2.history模式：history采用H5新特性；且提供了两个新方法： pushState() , replaceState() 可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更
VUE路由的钩子函数
首页可以控制导航跳转，beforEach,afterEach等，一般用于页面的title修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next
to:route即将进入的目标路由对象，
from：route当前当行正要离开的路由
next：function 一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制页面的跳转。
Vuex是什么？怎么使用？那种功能场景使用它？
vuex：只用来读取的状态放在store中；改变状态的方式是提交mutaions，这是个同步的食物； 异步逻辑应该封装在action中。
使用：在main.js引入store，注入。
state：存放的数据状态，不可以直接修改里面的数据。
mutations：定义的方法动态修改vuex的store中的状态或数据。
getters：类似vue中的计算属性，主要用来过滤一些数据
action： 异步处理数据的方法。 view层通过store.dispath来分发action。
modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation....，使得结构非常清晰，方便管理。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
对keep-alive的了解？
keep-alive是vue内置的一个组件，可以是被包含的组件保留状态，或避免重新渲染。
