面试题vue

vue路由传参方式？

query        params        path

Vue路由里的$router和$route的区别是什么？

Router是路由实例对象，route是当前路由信息

v-for中的key作用是？

1. 用v-for，需要给元素加上一个key属性

2. key用来提高渲染性能

3. key可以避免数据混乱的情况出现 

谈谈vue-Router的原理

原理核心就是 更新视图但不重新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。

组件间的通信方式有哪些？越多越好

1. props和$emit

2.$attrs和$listeners

3.中央事件总线

4. provide和inject

5. v-model

6. $parent和$children

7.vuex处理组件之间的数据交互
 

路由钩子函数 (组件内的守卫) 导航钩子有哪些？作用分别是？

全局守卫

router.beforeEach：全局前置守卫，进入路由之前
router.beforeResolve：全局解析守卫，在beforeRouteEnter调用之后调用
router.afterEach：全局后置钩子，进入路由之后

路由组件内的守卫

beforeRouteEnter()：进入路由前
beforeRouteUpdate()：路由复用同一个组件时
beforeRouteLeave()：离开当前路由时

17. keep-alive的作用是什么？

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

Vue中计算属性和监听器的不同点？

computed可以观察多个数据，watch只能是一个数据
computed生成一个新的数据，直接渲染至视图中，watch是修改本身已经存在的数据
computed不可以执行异步的，因为需要返回值，返回值是由js主线程控制，watch可以执行异步的，因为不需要返回数据，定时器是属于异步的线程
 

概念.概述

1.vue响应式原理:object.defineProperty

2.vue的作者尤雨溪,java出身.

3.vue是什么?以数据驱动视图的单页面(spa)渐进式MVVM框架, 特点是数据双向绑定.

4.模块化开发,解耦,为了不让所有的代码乱糟糟的,写在一个文件里,每个部分都是一个独立的文件(像积木一样,哪里使用,就引入到那里).目的是,好控制,代码量减少,代码进最大化复用.比如把轮播部分提出来,做成独立的插件,这种思想就是模块化

 vue的api组成部分

 data:存数据的,里面的数据被响应式监听.

 methods:写方法的,用于事件的回调函数

 components:注册子组件的

 name:当前组件的名称,名字必须和文件名一样.(递归组件是必须有name)

 watch:监听器,默认对监听的简单数据做响应,如果是数组或对象,需要开启深度监听

 computed:计算属性,对一个数据进行监听操作,并返回一个新的数据.默认是只读的,如需修改,使用set函数

 filter:过滤器,在不修改元数据的情况下,得到处理后得值,并可以用管道符`|`使用多个过滤器

 directive:自定义指令,用于指令扩展,例:给input框添加获取焦点

 生命周期8个函数.

 vue的指令

 -1.v-model :数据双向绑定

 -2.v-text :渲染文本

 -3.v-html :可用来渲染dom片段

 4.v-if v-else-if v-else :控制元素,加载与销毁

 5.v-show:控制元素,显示隐藏

 6.v-for:循环渲染,如果是对象,需要三个参数,值,键,下标

 7.v-bind:绑定属性的,缩写 : ,除了常规属性还可以绑定自定义属性

 8.v-on:绑定事件的,缩写 @ ,除了常规事件还可以绑定自定义事件

 9.v-once:让事件触发一次

修饰符

指令修饰符

    v-model: .lazy .trim .number

属性修饰符

    v-bind:data.sync 让子组件可以修改props

键盘修饰符

    .enter === .13

    .esc

    .ctrl

    .shift

事件修饰符                                

    .native:绑定原生事件,用在自定义组件上,如:饿了吗

    .left:点击事件加left是监听鼠标左键的

生命周期

    创建阶段:(第一次页面加载执行)

        1.beforeCreate

        2.created

    挂在阶段:(第一次页面加载执行)

        1.beforeMount

        2.mounted(页面打开后发起请求)

    更新阶段:(data或props修改时触发)

        1.beforeUpdate

        2.updated

    销毁阶段:

        1.beforeDestroy (清除全局数据,比如定时器)

        2.destroyed

内置组件

    component 动态加载组件  

    keep-alive 缓存组件状态 

    slot 插槽组件

    template 模板组件

 自定义组件

    所有.vue后置的文件都是自定义组件

 组建通信

父传子

父组件使用v-bind给子组件添加一个自定义属性,自定义属性接收一个数据,子组件使用props接收该数据 

子传父

父组件使用自定义函数向子组件传入一个函数,子组件使用$emit调用该函数,并传入数组,完成子传父通信

父子互相通信

使用.sync修饰符

使用v-model

跨级通信

vuex

 插槽

在自定义组件中传入dom片段.

语法:

父组件:`<My><div> 456 </div></My>`

子组件:`<slot/>`

插件开发

一个对象用install属性书写插件,该属性是一个函数,该函数接收Vue构造器.

安装插件用Vue.use()

{

    install:function{

        Vue.use("vue构造器")

    }

}

vuex是什么? 

一个专门为vue.js应用程序开发的状态管理插件.

vuex解决了什么?

多个组件依赖与统一状态时.来自不同组件的行为需要变更同意状态.

vuex使用与什么场景?

单页应用中,组件之间的状态.音乐播放,登录状态,加入购物车.

vuex有哪几种状态?

state,getters,mutations,actions,modules

vuex中状态存储在哪里?怎么改变?

存储在state中,改变vuex中的状态的唯一途径就是显示的提交(commit)mutation.

 vuex中状态是对象时,使用时需要注意什么?

对象是引用类型,复制后改变属性还是影响原始数据,这样会改变state里面的状态,是不允许,所以用深度克隆,复制对象,在修改.

vue的优缺点?

优点:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

缺点:

1、VUE不支持IE8

2、生态环境差不如angular和react

3、社区不大

vuex的工作流程?

Vue组件（action里面的dispatch )--> actions(commit方法） -->mutations（Mutate）--> state（getter） -->store更新所有调用vuex的组件（Vue Component组件）

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

在组件中的style前面加上scoped

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

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

如何获取dom? 

ref="domName" 用法：this.$refs.domName

vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

v-modal的使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。

vue组件中data为什么必须是一个函数？

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

渐进式框架的理解?

主张最少；可以根据不同的需求选择不同的层级； 

Vue中双向数据绑定是如何实现的？

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

vue的两个核心点?

数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

Vue-router跳转和location.href有什么区别?

使用location.href='/url'来跳转，简单方便，但是刷新了页面；
使用history.pushState('/url')，无刷新页面，静态跳转；
引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

 vue更新数组时触发视图更新的方法?

push()；pop()；shift()；unshift()；splice()； sort()；reverse()