Vue 2 - 常见面试题汇总大全

一 基础知识

1.vue 的生命周期

1-1 钩子函数

创建

beforecreate:

第一个钩子，这个阶段的data，methods，computed以及watch的数据和方法不能被访问

created:

是实例创建完成后发生的。这个阶段完成数据观测，可以使用数据，更改数据，
无法与Dom进行交互，想要的话可以通过nextTick来访问 ，nexttick延迟回调，更新数据后立即操作dom

挂载

beforeMount:

发生在页面渲染之前，当前阶段虚拟Dom已经创建完成，即将开始渲染。
在此时也可以对数据进行更改，不会触发updated。

mounted:

在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，
可以访问到Dom节点，使用$refs属性对Dom进行操作。

补：第一次页面加载就会触发 创建和挂载钩子

更新

beforeUpdate:

发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，
你可以在当前阶段进行更改数据，不会造成重渲染。

updated:

发生在更新完成之后，当前阶段组件Dom已完成更新。
要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

补充

activited:

keep-alive专属，组件被激活时调用

deactivited:  
 
keep-alive专属，组件被销毁时调用

销毁

beforeDestroy:

发生在实例销毁之前，在当前阶段实例完全可以被使用，
我们可以在这时进行善后收尾工作，比如清除计时器

destroyed:

发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

1-2 钩子函数的使用方法

1.beforecreate:  data 和 $el 都没有初始化 全部为 undefined，
可以在加个loading事件，在加载实例时触发 ，

2.created:  初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3.mounted: 挂载元素，获取到dom节点

4.beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

5.updated: 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，
因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。

6.beforeDestroy : 可以做一个确认停止事件的确认框

7.destroyed 可以执行一些优化操作,清空定时器，解除绑定事件

1-3 父子组件生命周期构造函数执行顺序

加载渲染过程

父 beforecreate，created，beforeMount 
子 beforecreate，created，beforeMount
子 mounted 
父 mounted 

子组件更新过程

父 beforeUpdate
子 beforeUpdate
子 Updated
父 Updated

销毁过程

父 beforeDestroy
子 beforeDestroy
子 destroyed
父 destroyed

如果常用的数据如果需要传递到子组件的话，最好在created 或者 beforemount，把数据请求回来，然后传递给子组件

2 v-show 与 v-if v-for

2-1.v-show 与 v-if 的区别

共同：
根据真假切换元素的显示状态

不同：

v-if ： 通过操控DOM值来 实现 显示隐藏

(不适合频繁切换. 数据多不建议用if.每一次切换则重新消耗性能.乱） 
v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。

回流

v-show ：修改元素的display，实现显示隐藏

(适合频繁切换，在第一次渲染的时候已经消耗了性能)
v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换

重绘

补：

2-2 v-if 和v-for的优先级

当v-if 与 v-for 一起使用时，v-for 比v-if 优先级高,如果连用的话会把 v-if 给每个元素都添加一下,会造成性能问题

所以不推荐v-if和v-for在同一个标签中同时使用。

原因：先有循环才能渲染

解决方法：
1、ul 和 li 搭配使用，或者是渲染父级标签下的子标签。

<ul v-if = "state">
  <li v-for = "(item,id) in list" :key="id"></li>
</ul>

2,将v-if写成和v-for同级

<div v-for='(item,id) in list' :key='id' v-if='item.userRank'>

3、使用过滤器将v-if中的判断转移到computed的计算属性中。

<ul>
   <li v-for="(item,id) in list" :key = "id">li>
ul>
computed: {
  formList: function(){
     return this.list.filter(function(item){
        return item.state;
    })
  }
}

补：过滤器
filter()方法 对原数组的元素进行过滤，返回到一个新的数组中去。不影响原始的数组。、callback需要返回布尔值

为true的时候，对应的元素留下来，
为false的时候，对应的元素过滤掉

3.组件通信有哪些方式？

3-1.父传子
思路：

1.传递：在父组件调用子组件的位置 绑定属性
(属性名：需要发送的变量名)

2.接收：子组件通过 **props**接收
**(props: [属性名])**

type: Number, 数据类型
required: true , 必须传值
default: 100 默认携带的数字

  props: {
    provinceNumId: {
      type: String,
      required: true
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    studentModalData: {
      type: Object,
      default() {
        return {}
      }
    }
 }

3-2.子传父

思路：

1.**传递：** 在调用子组件的位置 添加自定义事件 使用$emit 发送数据

2.**接收：** 通过created 接收数据

3-3.兄弟传值

思路：

1.定义中央事件总线  **let bus = new Vue();**

2.**传递**:  触发自定义事件 并发送 **bus.emit** (要出发的事件名,要发送的数据) 

3.**接收**:  触发mounted  并接收 **bus.on**(要出发的事件名,要接收的数据) 

4.**销毁**:  在beforeDestroy中 **bus.$off** 进行销毁，否则会出现重复触发事件的问题

3-4.公共传递

思路：

1.**传递：**在父组件内部添加 **provide**:{命名:'内容'} 并赋明需要具体传递的值，

2.**接收：**在子或者子子 内部 **inject:**["命名"] 接收

3.在相对应页面中可直接获取

补：组件传值代码参考：
https://blog.csdn.net/weixin_55042716/article/details/114434354

4 computed和watch ，有什么区别

4-1.computed 计算属性

1. 支持缓存，只在依赖的数据发生变化时，才会重新计算，否则当多次调用**computed**属性时，调用的其实是缓存；
2. 不支持异步，当**computed**内有异步操作时无效，无法监听数据的变化
3. 如果一个数据需要经过复杂计算就用 **computed**
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，(某个属性受多个属性影响)

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

4-2.watch 侦听器

1. 不支持缓存，每调用一次就计算一次；
2. **watch**支持异步；
3. 如果一个数据需要被监听并且对数据做一些操作就用 watch
4. 当一个属性发生变化时，需要执行对应的操作；一对多(监听多个数据)

<div id="app">
    <input type="text" v-model="num">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
        	firstName: {
    			handler(newName, oldName) {
      				this.fullName = newName + ' ' + this.lastName;
    			},
   				 // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    			immediate: true,
    			// 开启深度监听：只要firstName中的任何一个属性发生改变，都会触发相应的代码
          		deep: true
  			},
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })

</script>

4-2-1. 问：watch怎么开启深度监听，具体使用场景

Deep:
监听的是对象类型，当手动修改对象的某个属性时，发现是无效的。
设置deep:true 就可以发现对象内部值得变化，所以需要深度监听

Immediate:
immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。

补4-3.methods 方法

1. 不支持缓存, 只要使用该方法便进行调用。

5 Vue中的 data 为什么必须是函数

vue组件中data值不能为对象，因为对象是引用类型，每个组件的data都是内存的同一个地址，如果修改一个对象里面的数据，其他的也会被影响到，
data 如果是一个函数，每一个函数都有自己的局部作用域，他改变的话不会影响到其他的数据。

6 Vue中的 key 有什么作用？

列表渲染时的唯一性

页面上标签都对应具体的虚拟dom对象（JS对象），循环中，如果没有唯一的key，页面上删除一条标签，由于不知道删除的是哪一条，需要吧全部的虚拟dom重新渲染，如果知道key，为标签被删除掉，只需要吧渲染的dom为标签删除即可

6-1.添加减少值
例：
[1,2,3,4,5,]
添加一个a
[1,2,a,3,4,5,]

不加key  则 3,4,5 会重新渲染一遍      a成3 ,3成4， 4成5

加key   则只单独渲染新插入的值

减少
[1,2,4,5,]

加key，如果有一项移出，后面的不会错位，用于删除操作

6-2 条件渲染中的key
不加key：
vue无法判断每个组件的不同，则会重复使用相同的组件，会拿到上一个组件的信息，

加key：     
对于vue来说，每个组件都是不同的，切换时，都会重新渲染，
(如果不重新渲染的话，不会触发生命周期函数，没法请求新的数据)

6-3 总结：
无：key属性时，状态默认绑定的是位置； 删除所有，重新渲染，
有：key属性时，状态根据key的属性值绑定到了相应的数组元素。删除某一条不会重新渲染，节省性能，

6-4 建议：
不使用index作为key的值，使用唯一id作为标识.(后台提供或自己创建)

7 vue 路由

通过互联的网络把信息从 (源地址) 传输到 (目的地址) 的活动
映射表：地址和具体某一台电脑之间的关系

7-1 vue-router 路由模式有几种？

1.hash路由 – 默认模式

在地址栏会有一个#号，
因为hash发生变化的url都会被浏览器记录下来，浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。
这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，
后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用标配。

2.history路由
有的back、forward、go 方法

history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。
提供了对历史记录进行修改的功能。它能让开发人员在不刷新网页的情况下改变站点的 URL

History 有 URL 重定向问题，需要在服务端去配置 url 重定向，否则会报 404 错误。

404

history模式下，**前端的url必须和实际向后端发起请求的url 一致**，
如 http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

3.Abstract

abstract 模式针对的是没有浏览器环境的情况，比如 Weex 客户端开发，内部是没有浏览器 API 的，
那么 Vue-Router 自身会对环境做校验，强制切换到 abstract 模式，
如果默认在 Vue-Router 的配置项中不写 mode 的值，
在浏览器环境下会默认启用 Hash 模式，在移动客户端下使用 abstract 模式。

4.将hash模式修改为history模式

const router = new VueRouter({
	routes,
	mode:'history'
})

7-3 router和route的区别

1 $router

用来操作路由  只写对象
提供了一些方法 go back 

2 $route

用来获取路由的信息  只读对象
存放路径 path params参数  query 

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})
//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

7-4 params传参 跟query传参

7-4-1 query ：
this.$route.query.xxx

query  传参使用path，name来引入路由。

query  是拼接在url后面的参数，没有在路由后面添加参数名也没关系。

query  相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，

7-4-2 params ：
this.$route.params.xxx

params 只能用name来引入路由

params 是路由的一部分,必须要在路由后面添加参数名。

params 相当于post请求，参数不会再地址栏中显示。

刷新页面之后参数会消失
路由里就要这样写

   this.$router.push({name:'Detail',params:{pro_id:pro_id}});

router - index.js 路由设置，参数名保持一致。

	{
      path: '/Detail/:pro_id', //配置参数，防止刷新数据丢失
      name: 'Detail',
      component: Detail
    },

7-4-3 props

在路由对象内，通过props属性 开启传参功能
在组件对象内 通过props接收
原因： 为了降低路由和组件的耦合度，

路由页面，设置   props：true
页面   props:['id']

在子detial中设置
 {
  path:'/detial:id',
  name:'detail',
  components:{
    default:()=> import(/* webpackChunkName: "pro" */'@/views/detail/detail.vue')
  },
  props:{
    default:true
  }
 }

7-5 路由跳转

7-5-1导航模式

<router-link to="path">xxx</router-link>

    to 要跳转到的路由规则 string|object 
    to="users" 
    :to="{path:'path'}"  
    tag  可以指定渲染成什么组件
    replace 不会留下history记录，浏览器返回前进按钮不能用
    

7-5-2 导航模式
可以跟点击事件一起用

this.$router.push("/login"); 
this.$router.push({ path:"/login" }); 
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.push({ name:'user' , params: {id:123} }); 
this.$router.go( n );//n为数字 负数为回退

7-5-3 路由重定向

概念：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面

实现： 通过路由规则的 **redirect** 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

7-5-4 嵌套路由

在路由下 添加子路由

在父路由组件的模板内容中添加子路由链接和子路由填充位（占坑），同时在路由规则处为父路由配置children属性指定子路由规则：

routes: [ 
 { 
    path: "/user", 
    component: User, //这个不能丢 
    // 通过children属性为/user添加子路由规则 
    children:[
        { path: "index", component: Index }, 
        { path: "add", component: Add }, 
    ] 
  } 
]

需要在 User组件中定义一个router-view 用于嵌套路由的渲染显示
<router-view></router-view>

7-6 路由守卫

导航守卫 就是路由跳转过程中的一些 钩子函数 ，这个过程中触发的这些函数能让你操作一些其它事情时，可以进行过滤操作，这就是导航守卫。

to: 目标路由
from: 当前路由
next() 跳转 一定要调用
next(false);//不让走
next(true);//继续前行
next(’/login’)//走哪
next({path:’/login’,params:{},query:{}})//带点货

全局前置守卫 beforEach

   router.beforeEach((to, from, next) => {
        document.title = to.meta.title || '卖座电影';
        if (to.meta.needLogin && !$store.state.isLogin) {
            next({
                path: '/login'
            })
        } else {
            next()
        }
    })

路由独享的守卫 beforeEnter
使用方法与全局守卫相同 不同的是：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由

//登录模块
    path: '/login',
    component: () => import('@/views/login'),
    beforeEnter: (to, from, next) => {
       if (to.meta.needLogin && !$store.state.isLogin) {
           next({
               path: '/login'
           })
        } else {
           next()
        }
     }

组件路由守卫

//组件内部钩子
beforeRouteEnter (to, from, next) {//前置
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {//后置
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

注意： 路由独享守卫，守的是path 组件内部守卫，守的是component

8 路由懒加载

8-1.为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，
需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，

而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，
减少首页加载用时

8-2.如何实现懒加载

方法一 resolve

这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
//   更改
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve => require(['@/components/HelloWorld'], resolve)
        }
  ]
}) 

方法二.import按需加载（官方写法）

能够被webpack自动代码分割允许将不同的组件打包到一个异步块中，使用命名chunk(特殊注释语法)。

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

const comA = () => import('url')
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

方法三 webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{  
    path: '/home',   name: 'home',   
    component: r =>require.ensure([], () => r(require('@/components/home')), 'demo')
 }

9 vue的内置组件 keep-alive -优化

页面切换的时候会进行销毁，当我们不想它被销毁的话就需要用keep-alive包裹着组件
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间 及 性能消耗，提高用户体验性

使用：将要被缓存的组件或可能会被重复渲染的组件，使用 **keep-alive**包裹即可

渲染场景 例:

首页下拉刷新，加载过的数据，切换其他页面后，再返回首页，没有记录，则数据重新请求，
添加 keep-alive 包裹后，记录数据，不会再重复加载。 切换另一个页面，上一个页面依旧保持活跃，
数据继续保持

应用 ：
根据条件缓存页面

利用路由的元数据meta 添加

APP.js页面

 <keep-alive>
    <!-- 添加meta的则添加 keep-alive -->
    <router-view v-if="$route.meta.keep"></router-view>
 </keep-alive>
    <!-- 不添加 -->
    <router-view v-if="!$route.meta.keep"></router-view>

路由页面给需要的添加meta
{
    path: '/',
    name: 'home',
    alias: '/home',
    components:{ home },
    meta:{
      keep:true //需要缓存
    }
  },
  

补充：

生命周期函数
  1. activated
     在 keep-alive 组件激活时调用
     该钩子函数在服务器端渲染期间不被调用

  2. deactivated
在 keep-alive 组件停用时调用   
该钩子在服务器端渲染期间不被调用   
被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子:activated与deactivated   
使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据，
需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。  
 
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，
如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，
就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！
另外，在服务端渲染时，此钩子函数也不会被调用。

10 vue 的混入 mixin -优化

公共配置
多个组件中都需要的数据或功能，混入对象内部的选项等同于组件对象的选项，但是混入对象并不是真正的组件对象，必须添加到组件对象内部后才能执行，

重复方法或重复数据

--- 对象类合并   
--- 函数类  将多个函数放在数组中，都执行   
--- 重复的数据 以组件内部的为准，    

语法：

---定义mixin 对象
--- 引入 mixin
--- 使用

 <div id="app">
     <button @click='hello'>测试</button>
 </div>
    
<script>
var mymixin ={
   methods:{
      hello:function(){
        console.log('进入了mymixin了')
      }
   }
}

//进入 vue编程中
 const app = new Vue({
    el:'app',
    mixins:[mymixin],
    data:{}
 })
</script>

11-1. solt 插槽

组件的最大特性就是 重用 ，而用好插槽能大大提高组件的可重用能力
插槽的作用：父组件向子组件传递内容。

通俗的来讲，插槽无非就是在 子组件 中挖个坑，坑里面放什么东西由 父组件 决定

11-2 匿名插槽
匿名插槽一般就是使用单个插槽

//子组件内部
<div class='banner'>
    <img v-for='item in imgs' :src='item.src' :key='item.bannerId'>
    //占了个位，
    <solt>
    //插槽内部设置了默认值。如果将来插槽没有被插入组件或者元素，就用自己内部的元素来渲染
       <button>组件内部</button>
    </solt>
</div>

//父组件 
<banner>
//如果这里没有设置值，则显示插槽中的内容，
//设置例了值则显示此处的值
   <button> &lt; </button>
<banner>

11–3 具名插槽

slot 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名
字，具名插槽将匹配内容片段中有对应 slot 特性的元素。

具名插槽存在的意义就是为了解决在单个页面中同时使用多个插槽。
如果没有起名的话，默认为default

//子组件
<div class='banner'>
    <img v-for='item in imgs' :src='item.src'>
    <solt name="but">
       <button>组件内部</button>
    </solt>
</div> 

//父组件
<banner>
   <template v-solt:but>
  //简写