Vue总结

生命周期

1.什么是 vue 生命周期？

vue 每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件**创建、数据初始化、挂载、更新、销毁**，这就是一个组件所谓的生命周期。在组件中具体的方法有:

- beforeCreate
- Created
- beforeMount
- mounted
- BeforeUpdate
- updated
- BeforeDestory
- Destroyed

2.vue 生命周期的作用是什么?

提供代码执行时不同时间的钩子函数，便于进行对应节点的逻辑处理

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

beforeCreate, created, beforeMount, mounted

4.created 和 mounted 的区别

created：是在模板渲染成 HTML 前调用的，此时 data 已经准备完毕，el 仍是 undefined，因为没有渲染成 HTML，所以不能操作 dom 节点，它主要用来初始化一些数据；

mounted：是在模板渲染成 HTML 之后调用的，此时 data，el 都已准备好，可以操作 html 的 dom 节点，可以通过 id 什么的来查找页面元素，也可以加载一些组件什么的；

路由

1.mvvm 框架是什么

model、view、viewmodel，即模型-视图-视图模型

2.vue-router 是什么?它有哪些组件

router-link

router-view

keep-alive

3.active-class 是哪个组件的属性？

router-link

4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。

使用 router 对象的 params.id 例如 : this.\$route.params.id

5.vue-router 有哪几种导航钩子?

- 前置守卫：beforeEach
- 后置钩子：afterEach
- 单独路由独享钩子：beforeEnter
- 组件内的钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

6.route 和 router 的区别

router 是 VueRouter 的一个对象，通过 Vue.use(VueRouter)和 VueRouter 构造函数得到一个 router 的实例对象，这个对象是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

route 是一个跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name,path,params,query 等

7.vue-router 响应路由参数的变化 8.vue-router 传参 9.vue-router 的模式

- hash 模式

使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变的时候,页面不会重新加载,也就是单页应用了,当#后面的 hash 发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发 hashChange 这个事件,通过监听 hash 值的变化来实现更新页面部分内容的操作

- history 模式

主要使用 HTML5 的 pushState()和 replaceState()这两个 api 来实现的,pushState()可以改变 url 地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

10. vue-router 的路由懒加载

    //import
    component: () => import('@/components/Two')
    
    //require
    const Foo = (resolve) => require(['./Foo.vue'], resolve)
    

常见面试题

1.vue 优点

轻量、易上手、组件化、MVVM、性能好

2.vue 父组件向子组件传递数据？

props

3.子组件像父组件传递事件

$emit()

4.v-show 和 v-if 指令的共同点和不同点

共同点：都能控制元素的显示和隐藏。

不同点：实现本质⽅法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译⼀次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false，就不会编译了。⽽且 v-if 不停的销毁和创建⽐较消耗性能。

总结：如果要频繁切换某节点，使⽤ v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤ v-if（初始渲染开销较⼩，切换开销⽐较⼤）。

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

scoped

6.的作用是什么?

7.如何获取 dom

$refs

8.说出几种 vue 当中的指令和它的用法？

v-if：判断是否隐藏

v-for：数据循环

v-bind:class：绑定一个属性

v-model:实现数据双向绑定

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

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理
用途：js可以写es6,style样式可以写scss或less、template可以加jade等

10.为什么使用 key

key的作用就是为了快速的找到新节点对应的旧节点。key是给每一个vnode唯一的id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

11.axios 及安装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

特性：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

12.axios 解决跨域

【vue.config.js】
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                target: 'https://www.baidu.com/',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

13.v-model 的使用

//v-model本质上是一个语法糖。如下代码
<input v-model="test">
//本质上是
<input :value="test" @input="test = $event.target.value">
//其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。

14.scss 的安装以及使用

15.请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

16.分别简述 computed 和 watch 的使用场景

computed：通过属性计算而得来的属性

    1、computed 内部的函数在调用时不加()。

    2、computed 是依赖 vm 中 data 的属性变化而变化的，也就是说，当 data 中的属性发生改变的时候，当前函数才会执行，data 中的属性没有改变的时候，当前函数不会执行。

    3、computed 中的函数必须用 return 返回。

    4、在 computed 中不要对 data 中的属性进行赋值操作。如果对 data 中的属性进行赋值操作了，就是 data 中的属性发生改变，从而触发 computed 中的函数，形成死循环了。

    5、当 computed 中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

    使用场景：当一个值受多个属性影响的时候------------购物车商品结算

watch：属性监听

    1、watch 中的函数名称必须要和 data 中的属性名一致，因为 watch 是依赖 data 中的属性，当 data 中的属性发生改变的时候，watch 中的函数就会执行。

    2、watch 中的函数有两个参数，前者是 newVal，后者是 oldVal。

    3、watch 中的函数是不需要调用的。

    4、watch 只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch 想要监听引用类型数据的变化，需要进行深度监听。"obj.name"(){}------如果 obj 的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用 handler+deep 的方式进行深度监听。

    5、特殊情况下，watch 无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用 splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.$set(this.arr,0,100)-----修改 arr 第 0 项值为 100。

    6、immediate:true 页面首次加载的时候做一次监听。

    使用场景：当一条数据的更改影响到多条数据的时候---------搜索框

区别：

　　1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

　　2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

　　3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

17.v-on 可以监听多个方法吗

18.$nextTick 的使用

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

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

形成闭包，保护组件变量作用域

20.vue 事件对象的使用

21 组件间的通信

props、emit、eventBus、vuex、注入

22.渐进式框架的理解

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

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。


实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。


实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。


实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

24.单页面应用和多页面应用区别及优缺点

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

25.vue 中过滤器有什么作用及详解

{{ date | formatDate }}

// 全局函数

Vue.filter('formatDate', function(value) {
  const date = new Date(val)
  const hour = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  return `${hour} : ${minutes} : ${seconds}`
})

26.v-if 和 v-for 的优先级

27.assets 和 static 的区别

assets和static两个都是用于存放静态资源文件。

放在static中的文件不会进行构建编译处理，也就不会压缩体积，在打包时效率会更高，但体积更大在服务器中就会占据更大的空间

放在assets中的文件会进行压缩体积、代码格式化，压缩后会放置在static中一同上传服务器。

因此建议样式文件放在assets中进行打包，引入的第三方文件放到static中，因为引入的文件已经做过打包处理。

28.列举常用的指令

29.vue 常用的修饰符

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id='other'>
    <input v-model.trim='trim'>
    <p ref='tr'>{{trim}}</p>
    <button @click='getStr'>获取</button>
</div>

30.数组更新检测

通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

31.Vue.set 视图更新

32.自定义指令详解

33.vue 的两个核心点

数据驱动、组件系统

34.vue 和 jQuery 的区别

35 引进组件的步骤

36.Vue-cli 打包命令是什么？打包后悔导致路径问题，应该在哪里修改

37.三大框架的对比

38.跨组件双向数据绑定

39.delete 和 Vue.delete 删除数组的区别

40.SPA 首屏加载慢如何解决

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

42.vue slot

43.你们 vue 项目是打包了一个 js 文件，一个 css 文件，还是有多个文件？

44.vue 遇到的坑，如何解决的？

45.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？

46.Vue2 中注册在 router-link 上事件无效解决方法

47.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题

48.axios 的特点有哪些

49.请说下封装 vue 组件的过程？

50.vue 各种组件通信方法（父子 子父 兄弟 爷孙 毫无关系的组件）

51.params 和 query 的区别

52.vue mock 数据

53 vue 封装通用组件

54.vue 初始化页面闪动问题

55.vue 禁止弹窗后的屏幕滚动

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

57.vue 常用的 UI 组件库

58.vue 如何引进本地背景图片

59.vue 如何引进 sass

60.vue 修改打包后静态资源路径的修改

vuex

1.vuex 是什么？怎么使用？哪种功能场景使用它？

状态管理工具

2.vuex 有哪几种属性

state getter mutation action

3.不使用 Vuex 会带来什么问题

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

5.vuex 一个例子方法

6.Vuex 中如何异步修改状态

7.Vuex 中 actions 和 mutations 的区别

mutations必须是同步，修改state

actions可以包含异步操作、