Vue简单知识点

Posted 2021-03-26 j-nemo

vue生命周期的理解

什么是vue生命周期？

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

vue生命周期总共有几个阶段？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

1. beforeCreate（创建前） ： Vue 实例的挂载元素 $el 和 数据对象data都为undefined，还未初始化。
2. created（创建后） ：完成数据观测，属性和方法的运算，初始化事件， $el 还没有。
3. beforeMount（载入前） ：Vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 dom节点，
   data.message 还未替换。
4. mounted（载入后） : Vue 实例挂载完成，data.message 成功渲染。
5. beforeUpdate（更新前） ：当 data 发生变化时， 在DOM重新渲染之前调用。
6. updated（更新后） ：在 DOM 重新渲染之后调用。
7. beforeDestroy（销毁前） ：在 Vue 实例销毁之前调用。实例仍然完全可用。
8. destroyed（销毁后） ：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被
   销毁。

vue生命周期的作用是什么？

这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。多个事件钩子，可以让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

DOM 渲染在哪个周期中就已经完成？

mounted 周期中就已经完成。

描述每个周期具体适合哪些场景？

1. beforecreate : 可以在这加个loading事件，在加载实例时触发
2. created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
3. mounted : 挂载元素，获取到DOM节点
4. updated : 如果对数据统一处理，在这里写上相应函数
5. beforeDestroy : 可以做一个确认停止事件的确认框
6. nextTick : 更新数据后立即操作dom

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

beforeCreate, created, beforeMount, mounted这几个钩子会被触发。

说一下你对于MVVM 的理解

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

有三部分组成：

1. Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。
2. View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
3. ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model 的
   对象，连接 Model 和 View。

• 在 MVVM 架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互， Model 和ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到 View 上。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

简述一下Sass、Less，且说明区别？

他们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。所谓CSS预处理器，就是用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。

• 变量符不一样，less是@，而Sass是$。
• Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
• Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器。

如何让CSS只在当前组件中起作用?

将当前组件的 <style> 修改为<style scoped>

Vue中使用插件的步骤

1. 在项目文件夹下,使用命令 npm install 插件名称 --save-dev 引入插件。
2. 采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入插件。
3. 使用全局方法 Vue.use( plugin ) 使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true })。

单向数据流和双向数据绑定

• 单向数据流：顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使 UI 发生变更就必须创建各种 action来维护对应的 state。
• 双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度。

Vue实现数据双向绑定的原理

• vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter 。用户看不到 getter/setter ，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
• vue的数据双向绑定将 MVVM 作为数据绑定的入口，整合 Observer ， Compile 和 Watcher 三者，通过Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令，最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —视图更新；视图交互变化input数据 model 变更双向绑定效果。

注：具体的过程可参考这篇文章

v-if 和 v-show 区别

相同点

两者都是在判断DOM节点是否要显示。
不同点
1、实现方式

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

2、编译过程

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； 

v-show只是简单的基于css切换；

3、编译条件

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留； 

4、性能消耗

v-if有更高的切换消耗，不适合做频繁的切换；

v-show有更高的初始渲染消耗，适合做频繁的额切换；

注：转载于LeonWuV

v-for 与 v-if

官网上的解释这里，不推荐在同一元素上使用 v-if 和 v-for。当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

计算属性 computed 和 methods 有什么区别

• computed：计算属性是基于它们的依赖属性进行缓存的，只有在它的相关依赖发生改变时才会重新求值。
• method：只要被触发重新渲染， method 调用总会执行该函数。

注： 页面中最好不要直接使用函数，尽量使用computed

vue组件化的理解与使用

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进
行复用。组件大大提高了代码的复用率。

使用步骤：

1.先使用import导入你要在该组件中使用的子组件

2.然后,在components中写入子组件

3.在template中就可以直接使用了

Vue 组件 data 为什么必须是函数

其实在vue的基础中就有明确的规定，看这里

• 在 new Vue() 中， data 是可以作为一个对象进行操作的，然而在 component 中， data 只能以函数的形式
  存在，不能直接将对象赋值给它。
• 当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不
  会相互影响，是独立的

Vue组件间的参数传递

父组件与子组件传递数据

• 父组件传给子组件：子组件通过 props 方法接受父组件传递的数据
• 子组件传给父组件： $emit 方法传递参数

非父子组件间的数据传递，兄弟组件传值

• 可通过 PubSubJS 库来实现非父子组件之间的通信 ，使用 PubSubJS 的消息发布与订阅模式，来进行数据的传递。

参考这篇文章

路由之间跳转

可分为两大类，三小类

（声明式）路由标签跳转：<router-link :to=``"{path, params, query}"``></router-link>

（编程式）params方式传参：router.push(‘/index/query/name/id‘)

（编程式）query方式传参：router.push(‘/index/query?name=name&id=id‘)

注：query方法的参数会以字符串拼接的形式（key=value）展示在地址栏。params方式可能由于路由配置的问题取不到参数。

Vue 路由的实现

hash 模式

在浏览器中符号 # ，# 以及#后面的字符称之为 hash ，用 window.location.hash 读取。

特点： hash 虽然在 URL中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用， hash 不会重加载页面。

history 模式

history 采用 html5 的新特性；且提供了两个新方法： pushState() ， replaceState() 可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更.

参考monkeyWang的这篇文章

$route和$router的区别

• $route 是“路由信息对象”，包括 path ， params ， hash ， query ， fullPath ， matched ， name 等路由信息
  参数。
• 而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

vuex 是什么？

官方话：Vuex 是一个专为 `Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简单的说：Vuex是vue框架中状态管理。

什么是“状态管理模式”？

把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！这就是“状态管理模式”。

来源于这片文章

Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

怎么使用？

1、利用npm包管理工具，进行安装 vuex。

npm install vuex --save

2、新建一个store的文件夹，在文件夹中新建store.js文件，文件中引入vue和vuex

import Vue from 'vue';
import Vuex from 'vuex';

3、使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

4、main.js文件中引入新建的store.js文件。

import storeConfig from './src/srore'

5、实例化vue对象的时候加入其中（app.vue中）

注：这篇文章不错以及这篇

哪种功能场景使用它？

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车。

• state ： Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存
  放的数据状态，不可以直接修改里面的数据。
• mutations ： mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据
• getters ：类似 vue 的计算属性，主要用来过滤一些数据。
• action ： actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说
  就是异步操作数据。 view 层通过 store.dispath 来分发 action
• modules ：项目特别复杂的时候，可以让每一个模块拥有自己的 state 、 mutation 、 action 、 getters，使得结构非常清晰，方便管理。

<keep-alive></keep-alive>的作用是什么?

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

NextTick

官方文档解释如下：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用。

简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

Vue 等单页面应用的优缺点

优点

• 良好的交互体验
• 良好的前后端工作分离模式
• 减轻服务器压力

缺点

• SEO 难度较高
• 初次加载耗时多