面试题梳理 - Vue基础篇

1、Vue 的优点

1. 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十k
2. 简单易学：中文文档油耗不存在语言障碍，易于理解和学习
3. 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单
4. 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势
5. 视图、数据、瑞吉分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作
6. 虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种更高效的方式；
7. 运行速度更快：相比较于 react 而言同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

2、说一下 Vue 的生命周期

每个Vue 实例从开始创建、初始化数据、 编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程称之为它的的⽣命周期。

共有8个阶段，分别是：

• 创建前beforeCreate
• 创建后created
• 挂载前beforeMount
• 挂载后mounted
• 更新前beforeUpdate
• 更新后updated
• 销毁前beforeDestroy
• 销毁后destroyed

详解：

1. beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到 data、computed、watch、methods 上的方法和数据。
2. created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染 得节点还未挂载到 DOM，所以不能访问到 $el 属性。
3. beforeMount（挂载前）：在挂载开始之前被调用，相关的 render 函数首次被调用。vue已经将模板字符串编译成内存DOM，模板已经编译完成，还没有渲染到页面上。
4. mounted（挂载后）： el 被新创建的 vm.$el替换，并挂载到实例上去之后调用。创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过$refs来访问到真实的DOM结构。
5. beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
6. updated（更新后）：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件DOM已经更新，所以可以执行依赖于 DOM 的操作。然而 在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更 新无限循环。该钩子在服务器端渲染期间不被调用。
7. beforeDestroy（销毁前）：实例销毁之前调用。在这一步实例仍然完全可用，this 仍能获取到实例。
8. destroyed（销毁后）：实例销毁后调用，调用后 Vue 实例指向的所有东西都会解绑定ÿ