我碰到的那些面试题vue

1，vue组件的生命周期？

分为4个阶段：

create/mount/update/destroy

创建阶段：

create: beforeCreate created

　　挂载阶段：

mount: beforeMount mounted

　　更新阶段：

update: beforeUpdate updated

　　销毁阶段：

destroy:beforeDestroy destroyed

created 和mounted 有什么区别？

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点

挂载完之后，可以通过this.$el获取当前组件的dom元素

2，keep-live

被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面，这也就出现了例如我们使用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果，所以需要我们在特定的情况下强制刷新某些组件

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存

exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留

3,slot插槽

就是组件的占位符

slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。

4，组件间传值

父传子 props 使用属性

· 父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值。

子传父 使用事件派发

· 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

· 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

· 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

非相关组件 使用事件总线或vuex

5，计算属性？ 计算属性和methods有什么区别？

计算属性会依赖于它所依赖的数据改变而重新计算，当数据没有改变的时候会取缓存值

methods 方法调用在组件更新的时候每一次都会调用

6，过滤器？过滤器怎么串联使用？

7，vue中怎么定义组件？定义组件需要注意什么事情？

8，在vue中如何定义一个类似于element-ui的组件库？

9，vue-router

路由的两种模式：history ，hash

区别？

history需要重定向处理，还需要在各种服务器端做配置

· hash 主要是基于锚点实现

10，路由传参：params , query

区别？

params 传参的时候可以在路由配置的时候设置占位符

query传参就是标准的url传参形式

如果我们想刷新页面之后路由传递的参数还存在就必须使用query传参或者params传参的时候设置占位符

11，路由守卫

beforeEach

afterEach

在路由守卫里可以做登录判断？

元属性（meta)

12, vuex

全局状态管理工具

1、遵循单向数据流

2、Vuex中的数据是响应式的

vuex中的数据流向

vuex数据传输流程

1、通过new Vuex.Store()创建一个仓库 state是公共的状态，state--->components渲染页面

2、在组件内部通过this.$store.state.属性来调用公共状态中的state，进行页面的渲染。

3、当组件需要修改数据的时候，必须遵循单向数据流。通过this.$store.dispatch来触发actions中的方法

4、actions中的每个方法都会接受一个对象这个对象里面有一个commit方法，用来触发mutations里面的方法

5、mutations里面的方法用来修改state中的数据 mutations里面的方法都会接收到2个参数一个是store中的state

另外一个是需要传递到参数

6、当mutations中的方法执行完毕后state会发生改变，因为vuex的数据是响应式的所以组件的状态也会发生改变

vuex中主要的五大模块

(state , getters, actions ,mutations ,modules)

mapState

mapActions

mapMutations

13 vue 中的MVVM是怎么实现的？

双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view

14，虚拟DOM ，diff算法

virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构

1.虚拟dom是什么

真实dom的映射

它是一个Object对象模型，用来模拟真实dom节点的结构

.diff算法是什么

逐层分级比较

用来做比对两次vdom结构

.diff算法运行结束后，返回是什么

返回一个key

15 ，组件传参，通过事件总线

16，vue中为什么不用jQuery？

Vue的虚拟DOM机制

17，vue中怎么操作dom元素？

$el ,$refs

18，vue怎么获取父组件？

$root

19，vue中父组件怎么调用子组件的方法：

$refs 选中子组件，直接调用方法名

20,单页面应用程序刷新之后怎么保证数据还是存在的？你怎么缓存页面数据？

sessionStorage ,localStorage

点击页面刷新时先将state数据保存到sessionStorage

调用beforeunload这个事件在页面刷新时先触发的。放在app.vue这个入口组件中，这样就可以保证每次刷新页面都可以触发。

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结构依然存在

Vue（react） 中key的作用

React和vue都实现了虚拟DOM 虚拟DOM有一套diff算法，而key就是用来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。所以其作用主要就是为了高效的更新虚拟DOM

介绍下vuex

vuex就像一个无形的仓库，公共的状态我们会抽离出来放进里面

Vuex核心主要包括以下几个部分

State mutationsgetters actions modules state里面就是存放的我们上面所提到的状态 mutations就是存放如何更改状态 （同步操作） getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。 actions就是mutation的加强版，它可以通过commitmutations中的方法来改变状态，最重要的是它可以进行异步操作。 modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

Vue的双向绑定

vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view

Vue-router是什么 他有哪些组件？

vue-router就是路由，用于页面跳转。

路由中有三个基本的概念 route, routes, router：

A， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

B， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}]

C， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

D，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

<router-link> 就是定义页面中点击的部分，<router-view> 就是点击后，显示内容的部分。所以<router-link> 还有一个非常重要的属性 to， 它定义 点击之后，要到哪个路径下， 如：<router-link to="/home">Home</router-link>

最基本的一条路由由两个部分组成： path: component. path 指路径，component 指的是组件。如：{path:'/home', component: home}

Vue.js的$watch方法中，参数immediate的作用是什么？

首先，watch是一个对象，既然是对象就包含键值。

Watch中，键就是你要监控的家伙。

值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

值也可以是函数名：不过这个函数名要用单引号来包裹。

第三种情况，值是包括选项的对象：选项包括有三个。

1.第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

2.第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

3.第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法

什么是双向绑定以及单向数据流，他们的不同点是什么？

单向数据绑定带来单向数据流。指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。适用于整体项目，便于追溯。

双向数据绑定带来双向数据流。数据模型（Module）和视图（View）之间的双向绑定。无论数据改变，或是用户操作，都能带来互相的变动，自动更新

甚至可以说双向绑定=单向绑定 + UI事件监听

说说对mvvm的理解

核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

在MVVM架构下，View 和 Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

描述下vue的路由实现：hash模式和history模式

hash模式：在浏览器中符号“#”以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

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

Vue.cli 如何新增自定义指令

创建局部指令

var app = new Vue({

    el: '#app',

    data: {    

    },

    // 创建指令(可以多个)

    directives: {

        // 指令名称

        dir1: {

            inserted(el) {

                // 指令中第一个参数是当前使用指令的DOM

                console.log(el);

                console.log(arguments);

                // 对DOM进行操作

                el.style.width = '200px';

                el.style.height = '200px';

                el.style.background = '#000';

            }

        }

    }

})

创建全局指令

Vue.directive('dir2', {

    inserted(el) {

        console.log(el);

    }

})

Vue中怎么导入js文件

比如我们js中这样写:

function realconsole(){

               alert("hello.thanks use me");

}

               export {

                               realconsole

               }

在寄主这边我们就这样写:

<template>

               <div>

                               <button @click="methods1">显示console</button>

               </div>

</template>

<script src="../../lib/myconsole.js"></script>

<script>

               import { realconsole } from '../../lib/myconsole.js'

               export default {

                               methods:{methods1:function(){

                                              realconsole();

                               }

               }}

</script>

Computed 和 watch 的区别

computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。