Vue简单知识点

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节点是否要显示。
不一样点
一、实现方式

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

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

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

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

二、编译过程

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

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

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

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

三、编译条件

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

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

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

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

四、性能消耗

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

怎么使用？

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

npm install vuex --save

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

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

三、使用咱们vuex，引入以后用Vue.use进行引用。

Vue.use(Vuex);

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

import storeConfig from './src/srore'

五、实例化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 难度较高
• 初次加载耗时多