vue综合指南(五)

​🌈个人主页：前端青山
🔥系列专栏：Vue 篇
🔖 人终将被年少不可得之物困其一生

依旧 青山, 本期给大家带来 Vuet 篇专栏内容:vue 综合指南

目录

81 简述每个周期具体适合哪些场景

82、Vue $forceUpdate 的原理

83、vue 获取数据在哪个周期函数

84、请详细说下你对 vue 生命周期的理解？

85、mvvm 框架是什么？

86、vue-router 是什么? 它有哪些组件

87、active-class 是哪个组件的属性？

88、Vue.js 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中？

89、vuex 有哪几种属性？

90、vue-router 实现路由懒加载（动态加载路由）

91、vuex 是什么？怎么使用？哪种功能场景使用它？

92、vue 优点？

93、NextTick 是做什么的

94、Class 与 Style 如何动态绑定？

95、直接给一个数组项赋值，Vue 能检测到变化吗？

96、Vue 的父组件和子组件生命周期钩子函数执行顺序？

97、在哪个生命周期内调用异步请求？

98、谈谈你对 keep-alive 的了解？

99、你使用过 Vuex 吗？

100、使用过 Vue SSR 吗？说说 SSR？

---

81 简述每个周期具体适合哪些场景

beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在 beforeCreate 生命周期执行的时候，data 和 methods 中的数据都还没有初始化。不能在这个阶段使用 data 中的数据和 methods 中的方法 create：data 和 methods 都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作 beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的 mounted：执行到这个钩子的时候，就表示 Vue 实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的 DOM 节点，最早可以在和这个阶段中进行 beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data 中的数据是更新后的，页面还没有和最新的数据保持同步 updated：页面显示的数据和 data 中的数据已经保持同步了，都是最新的 beforeDestory：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods，指令，过滤器 ……都是处于可用状态。还没有真正被销毁 destroyed：这个时候上所有的 data 和 methods，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

82、Vue $forceUpdate 的原理

调用强制更新方法 this.$forceUpdate()会更新视图和数据，触发 updated 生命周期。

强制更新
updated(){console.log("更新了");
  },
  methods:{reload(){this.$forceUpdate();
      }
  }

—————————————————————–

一个对象数组，我们尝试直接给某个 item 增加一个属性，发现页面上没有效果；直接将 length 变成 0 来清空数组，也没有效果

最好用 $set 方法，这样 vue 就可以知道发生了变化，同时 vue 也不建议直接修改 length，可以给一个空数组来置空。

this.$set(this.list[index],’sex’,’ 男 ’);

this.list=[];

可是如果我们不想利用 $set 去设置，非要按照我们第一种方式去写，可以实现么？答案是可以的，就是利用 $forceUpdate 了

1. this.list[index].sex = ‘ 男 ’;

2. this.$forceUpdate();

———————————————————————–

$children 表示当前页面的组件个数

$children 表示当前页面的组件个数，但是如果直接在页面上引用{{$children}}，往往得不到正确的结果：

这个和 vue 内部的实现机制有关，（vue 不同版本可能不一定有此问题），可以看到，当我们用 $forceUpdate 之后，就会得到正确的结果。当然，一般我们也不会这么去使用，我们可以在 data 里面定义一个变量，在 mounted 之后给变量赋值 this.$children.length；或者直接在 mounted 之后使用 $forceUpdate 强制刷新。

————————————————————————-

网友推荐用途：

VUE 项目中使用 this.$forceUpdate(); 解决页面 v -for 中修改 item 属性值后页面 v -if 不改变的问题

83、vue 获取数据在哪个周期函数

一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

84、请详细说下你对 vue 生命周期的理解？

总共分为 8 个阶段创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。创建前 / 后：在 beforeCreated 阶段，vue 实例的挂载元素 $el 和 数据对象data 都为 undefined，还未初始化。在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。载入前 / 后：在 beforeMount 阶段，vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。更新前 / 后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。销毁前 / 后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在。

85、mvvm 框架是什么？

vue 是实现了双向数据绑定的 mvvm 框架，当视图改变更新模型层，当模型层改变更新视图层。在 vue 中，使用了双向绑定技术，就是 View 的变化能实时让 Model 发生变化，而 Model 的变化也能实时更新到 View。

86、vue-router 是什么? 它有哪些组件

vue 用来写路由一个插件。router-link、router-view

87、active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件。children 数组来定义子路由

88、Vue.js 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里。如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入 action 里，方便复用

89、vuex 有哪几种属性？

有五种，分别是 State、Getter、Mutation、Action、Module state => 基本数据(数据源存放地) getters => 从基本数据派生出来的数据 mutations => 提交更改数据的方法，同步！actions => 像一个装饰器，包裹 mutations，使之可以异步。modules => 模块化 Vuex

90、vue-router 实现路由懒加载（动态加载路由）

三种方式 第一种：vue 异步组件技术 ==== 异步加载，vue-router 配置路由 , 使用 vue 的异步组件技术 , 可以实现按需加载 . 但是, 这种情况下一个组件生成一个 js 文件。第二种：路由懒加载(使用 import)。第三种：webpack 提供的 require.ensure()，vue-router 配置路由，使用 webpack 的 require.ensure 技术，也可以实现按需加载。这种情况下，多个路由指定相同的 chunkName，会合并打包成一个 js 文件。vuex 常见面试题

91、vuex 是什么？怎么使用？哪种功能场景使用它？

vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store.js，….. export。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

92、vue 优点？

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

93、NextTick 是做什么的

$nextTick` 是在下次 `DOM` 更新循环结束之后执行延迟回调，在修改数据之后使用 `$nextTick`，则可以在回调中获取更新后的 `DOM

94、Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

 
  
data: {   
  isActive: true, 
  hasError: false 
} 

 
 
 data: {   
    activeClass: 'active', 
    errorClass: 'text-danger'
 } 

Style 也可以通过对象语法和数组语法进行动态绑定：

 
  
data: {
   activeColor: 'red',
   fontSize: 30 } 

 

  data: {
   styleColor: {color: 'red'}, 
  styleSize:{fontSize:'23px'}
 } 

95、直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

为了解决第一个问题，Vue 提供了以下操作方法：

 // Vue.set 
Vue.set(vm.items, indexOfItem, newValue)
 // vm.$set，Vue.set 的一个别名 
vm.$set(vm.items, indexOfItem, newValue)
 // Array.prototype.splice 
vm.items.splice(indexOfItem, 1, newValue) 

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice 
vm.items.splice(newLength) 

96、Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程 父 beforeUpdate -> 父 updated

• 销毁过程 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

97、在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

98、谈谈你对 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：

• 一般结合路由和动态组件一起使用，用于缓存组件；

• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式，include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；

• 对应两个钩子函数 activated 和 deactivated，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

99、你使用过 Vuex 吗？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。主要包括以下几个模块：

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

• Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

• Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

• Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

100、使用过 Vue SSR 吗？说说 SSR？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记 ” 激活 ” 为客户端上完全可交互的应用程序。即：SSR 大致的意思就是 vue 在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的 html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点如下： （1）服务端渲染的优点：

• 更好的 SEO：因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；

• 更快的内容到达时间（首屏加载更快）：SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

（2) 服务端渲染的缺点：

• 更多的开发条件限制：例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；

• 更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive – CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。