VUE常见问题

VUE常见问题

对于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, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理

VUE的生命周期阶段（8个）

• beforeCreate（创建前）

  在数据观测和初始化事件还未开始

• created（创建后）

  完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来

• beforeMount（载入前）

  挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂载html到页面上

• mounted（载入后）

  挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次

• beforeUpdate（更新前）

  在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

• updated（更新后）

  在由于数据更改导致的虚拟DOM重新渲染和打补丁时会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

• beforeDestroy（销毁前）

  在实例销毁之前调用，实例仍然完全可用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

• destroyed（销毁后）

  在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

什么是vue生命周期

• Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期

vue生命周期的作用是什么

• 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

第一次页面加载会触发哪几个钩子

• beforeCreate,
• created
• beforeMount
• mounted

DOM 渲染在哪个周期中完成

• mounted

v-for中key值的作用

• 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素，key的作用主要是为了高效的更新虚拟DOM

v-if 与 v-for的优先级

• v-for优先于v-if被解析

• 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能

• 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环

• 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

v-if与v-show的区别

• v-if 是真正的条件渲染，直到条件第一次变为真时，才会开始渲染

• v-show 不管初始条件是什么会渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换

• v-if 适用于不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

VUE常用指令

• v-model 在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
• v-for 循环
• v-if 判断
• v-show 展示
• v-on: click = 'function' 事件绑定