Vue常见面试题精讲持续更新

33次阅读

共计 10718 个字符，预计需要花费 27 分钟才能阅读完成。

v-if 是 条件渲染 指令，控制的是 组件是否创建 (渲染)，值为 true 则渲染该组件，值为 false 则不渲染该组件，对应 Html 元素则不会存在于浏览器的 html 文档中，即 打开浏览器调试工具找不到该组件对应的渲染结果 。
v-show 控制的是 组件是否可见 ，并且是 通过 css 样式的 display 属性来控制组件的显示与隐藏 ，所以其值无论是 true 还是 false，对应 Html 元素都会存在于浏览器的 html 文档中，即 打开浏览器调试工具都能够找到该组件对应的渲染结果 ，只不过值为 false 的时候， 会在该组件上添加 style=”display: none;”；

可参考 v -for 与 v -if 的优先级

v-for 比 v -if 优先级更高，所以不建议 v -for 和 v -if 一起使用，如果 v -for 和 v -if 同时使用，那么数据发生变化时，v-for 首先会进行遍历，然后通过 v -if 进行判断，这样v-for 和 v -if 都会同时执行一遍，对性能和展现不友好。所以vue 建议用计算属性进行替代，返回过滤后的列表再进行遍历。

key 的作用主要就是为了 性能优化 ，key 让组件具有了唯一性，能让 diff 算法更快的找到需要更新的组件 dom，在绑定 key 的时候， 最好是一个唯一的值 ， 如 item.id 而不能是简单的 index，如果不使用唯一 key，那么在有状态组件中会出现渲染错误。因为它默认用 就地复用 策略，如果数据项的顺序被改变，那么 vue 将不是移动 DOM 元素来匹配数据项的改变，而是简单复用此处每个元素，不会重新排列元素的位置。如果是使用 key， 它会基于 key 重新排列元素顺序 ，并且会移除 key 不存在的元素。
简单说就是，不使用 key 就会原地复用，使用 key 就会对元素位置进行重新排列，能够关联数据状态。

<template>
  <div class="home">
    <input type="text" v-model="name">
    <button @click="add"> 添加 </button>
    <ul>
      <li v-for="(item, index) in list" :key="item.id"><!-- 注意，这里不能使用:key="index"-->
        <input type="checkbox">{{item.name}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {data: () => {
        return {
            list: [{ id: 0, name: 'A'},
              {id: 1, name: 'B'},
              {id: 2, name: 'C'}
            ]
        }
    },
     methods: {add() {this.list.unshift({ id:3, name:'D'}) // 将 D 添加到 A 的前面
        }
  },
}
</script>

如果 v -for 上不加 key，那么当勾选 A 前面的复选框后，再点击添加按钮，D 会添加到 A 的前面，由于原地复用原则，不会进行位置的移动，所以第一个位置的复选框是勾选状态会被继承到 D 上，即 D 会变成勾选状态而 A 将失去勾选状态，这个显然与原来状态不符；如果 v -for 上加上:key=”item.id”，那么 D 添加到 A 前面之后，A、B、C 都会向后移动，然后再将 D 插入到 A 的前面，所以插入 D 后，A 仍然保持勾选状态。

① query: 直接输入 url 地址，url 地址上带上查询参数，如: http://localhost:8080/home?foo=1 或者通过路由对象 $router 调用 push()方法进行传参 this.$router.push({path:”/home”,query:{“foo”:”1″}}); 然后通过 this.$route.query.foo 进行获取传递过来的参数

② params: 通过路由对象 $router 调用 push()方法进行传参 this.$router.push({name:”home”, params:{foo: 1}}); 然后通过 this.$route.params.foo 获取传递过来的参数

③ 动态路由传参: 路由 path 位置为 /home/:foo，然后输入 url，如: http://localhost:8080/home/1 然后通过 this.$route.params.foo 获取传递过来的参数

.stop 该修饰符将 阻止事件向上冒泡 。同理于调用 event.stopPropagation() 方法，即如果当前元素添加了.stop 修饰符，那么当点击该元素时候，click 事件不会冒泡到其父元素上，即 父元素不会触发 click 事件 。
.prevent 该修饰符会 阻止当前事件的默认行为 。同理于调用 event.preventDefault() 方法，即如果 <a href=”http://www.baidu.com” @click.stop=”show”> 连接，点击后默认会跳转到百度，但是添加上.stop 修饰符之后，就 不会跳转到百度了 ， 而是执行 show()方法了 。
.self 该指令 只有当事件是从事件绑定的元素本身触发时才触发回调 ，即 冒泡事件到达该元素上时 ， 并不会触发事件 ，但是 其不影响事件继续向上冒泡 ， 其父元素仍然会触发冒泡事件
.native 就是 给自定义组件的根元素添加一个原生事件 ，所以其通常用在自定义组件上， 如果给普通的 HTML 元素添加.native 修饰符 ， 那么该 HTML 元素将无法监听到该事件了 。
.capture 就是 让事件监听变成捕获 ，默认为冒泡， 通常用于修饰父元素 ，如果给父元素添加 @click.capture 修饰符，那么当点击子元素的时候，父元素的 click 事件将先触发，然后才是子元素的 click 事件。
.once 该修饰符表示绑定的事件 只会被触发一次。

简单的说，动态组件就是 将几个组件放在一个挂载点下 ，这个挂载点就是<component> 标签，其需要 绑定 is 属性 ，属性值为 父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示，如:

<template>
  <div class="home">
      <component :is="currentComponent"></component>
  </div>
</template>
<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {data: () => {
        return {currentIndex: 0 // 通过改变 currentIndex 改变要挂载的组件名}
    },
    components: {
        "tab-0": Tab0,
        "tab-1": Tab1
    }
    currentComponent() { // 动态计算要挂载的组件的组件名
      return `tab-${this.currentIndex}`; // "tab-0"、"tab-1"
    }
}
</script>

可以将动态组件放到 <keep-alive> 组件内对动态组件进行缓存，这样动态组件进行切换的时候，就不会每次都重新创建了。

<template>
  <div class="home">
     <keep-alive>
          <component :is="currentComponent"></component>
     </keep-alive>
  </div>
</template>

将当前组件的 <style> 修改为 <style scoped>

//foo.vue

<style scoped>
<!-- 其中的 css 样式只在 foo.vue 组件起作用 -->
</style>

vue-router 模块的 router-link 组件

子组件需要调用父组件的方法，那么可以通过 this.$parent 获取到父组件实例，然后就可以调用父组件上的方法了。还有一种方法就是，子组件向父组件 emit 一个事件 ， 父组件在子组件上监听到该事件 后，就可以调用父组件上的方法了。

ref 被用来给元素或子组件注册引用信息 ，引用信息将会注册在父组件的 $refs 对象上，即 类似于给组件或者 DOM 元素上添加一个标识 id，然后通过这个标识 id 拿到对应的 DOM 元素或组件实例，如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

$route 是 ”路由信息对 象 ”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
$router 是 ”路由实例“ 对象包括了路由的跳转方法，钩子函数等。

全局定义 ：调用 Vue 的 component() 方法创建，Vue.component(组件名, {template: 模板字符串})
局部定义 ：在 创建 Vue 实例时传递的 options 对象中的 components 对象中进行定义 ，components:{组件名: {template: 模板字符串}}
单文件组件 ：在.vue 文件 中定义，包含 template，script，style 三部分。

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

MVVM 是 Model-View-ViewModel 的缩写。
Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。
View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。
在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到 IE9；不利于 SEO 的优化（如果要支持 SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

① <router-link to=’/home’> router-link 标签会渲染为 <a> 标签，点击该 a 标签即可跳转到 /home 路由;
② 另一种是通过 js 跳转，即通过路由对象 this.$router 的 push()方法进行跳转，比如 router.push(‘/home’)

methods VS 计算属性
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比而言，只要发生重新渲染，method 调用总会执行该函数。总之，重新计算开销很大的话请选计算属性，不希望有缓存的请选 methods。
watch VS 计算属性
当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。
侦听属性是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

axios 是 基于 Promise 的 ，用于浏览器和 nodeJS 的 http 客户端，主要作用就是 向后台发送请求。其存在许多优点:

支持 Promise
支持并发请求
提供拦截器
浏览器支持防止 csrf(跨站请求伪造)

axios 和 fetch 是基于 Promise 的，ajax 是基于 callback 的形式。fetch 脱离了 xhr，是新的语法，默认是不传 cookie 的，监听不到请求进度。

vuex 是一个专门为 vue 构建的状态机管理机制，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，主要 解决组件间数据共享的问题 ，其实就是 采用类似全局对象的形式来管理所有组件的公共数据，其强调的是集中式管理，主要是为了便于维护、组件解耦，适合大型项目，有多个视图组件共同依赖一个状态的情况下使用，比如商城系统、外卖系统。
vuex 的核心: state、getters、mutations、actions、modules。

v-if: 这是一个 条件渲染 指令，代表存在和销毁，用于控制组件的创建与否;
v-bind: 这是一个绑定指令，用于绑定属性，可简写为冒号;
v-on: 这是一个监听指令，用于监听事件，可简写为 @;
v-for: 这是一个循环指令，用于遍历数组;

导航主要有三类钩子: 全局级路由钩子 、 路由级路由钩子 、 组件级路由钩子。主要参数有 to(目标路由对象)、from(当前路由对象)、next(是一个函数，用于控制是否放行，即是否能通过当前守卫)。

全局级路由钩子 : beforeEach 和 afterEach， 每次路由跳转全局路由钩子都会执行 ，beforeEach(to, from, next) 钩子有三个参数，但是 afterEach 是已经跳转结束了，所以 其没有 next 参数 ，afterEach(to, from)， 全局路由钩子由 router 对象调用。
路由级路由钩子 : 路由级钩子只有一个即beforeEnter，其是 在配置路由表的时候配置 ，也是有 to、from、next 三个参数， 只有进入该路由的时候才会执行 ，如果是 动态路由之间的切换 ，那么则不会触发 beforeEnter 钩子， 因为是同一个路由，只是参数不一样。
组件级路由钩子 : beforeRouteEnter(路由进入该组件的时候执行)、beforeRouteUpdate(动态路由切换时候执行)、beforeRouteLeave(路由离开当前组件的时候执行)，需要注意的是， 路由钩子是优先于组件的生命周期的，也就是说路由钩子全部执行完毕之后才会开始组件的生命周期，所以其钩子执行顺序: beforeRouteLeave –> beforeEach –> beforeEnter –> beforeRouteEnter –> afterEach –> beforeCreate –> created –> mounted，beforeRouteUpdate 只有动态路由切换的时候才会执行，即 /user/ 1 切换到 /user/ 2 才会执行。

v-model 主要用于数据的双向绑定，其内部主要完成了两个操作: 通过 v -bind 绑定 value 属性值 和监听 input 事件，并更新数据，如:

<template>
    <!-- <input v-model="msg"/>{{msg}} -->
    <input v-bind:value="msg" @input="msg=$event.target.value"/>{{msg}} <!-- 二者是等价的 -->
</template>
<script>
    export default {data: () => {
            return {msg: "hello"}
        }
    }
</script>

所谓路由懒加载，即在项目打包的时候，项目中通常会有多个路由，如果将所有路由对应的组件都打包到一个文件中，那么最终打包的文件就会变得非常大，会影响页面的加载性能，如果我们能把不同路由对应的组件分割成不同的代码块，然后 当路由被访问的时候才异步加载出对应组件 ，这样就会变得更加高效。
所以其原理就是利用了 webpack 的代码分割(按需加载) 机制和 vue 的异步组件 功能，代码被分割后就会变成一个单独的文件，所以 路由被访问的时候需要向服务器发起请求加载该组件 ，这是一个 异步的过程，所以需要使用到 vue 的异步组件机制。

异步组件？

异步组件，就是在注册组件的时候，传入一个函数，然后这个函数返回一个 Promise 对象，resolve 的值为这个组件对象，如:

export default new Router({
    routes: [
        {
          path: '/about',
          name: 'about',
          component: () => { // 注册为一个异步组件
              const About = require("./views/About.vue");
              return Promise.resolve(About);
          }
        }
    ]
});

或者 在注册异步组件的时候传入 resolve 和 reject，如:

export default new Router({
    routes: [
        {
          path: '/about',
          name: 'about',
          component: (resolve, reject) => { // 注册为一个异步组件
              const About = require("./views/About.vue");
              resolve(About);
          }
        }
    ]
});

webpack 提供的 import()函数会返回一个 Promise 对象，并且会对引入的组件进行代码分割 ，所以可以通过 import() 同时实现代码分割和组件异步加载，即路由懒加载，如:

export default new Router({
    routes: [
        {
          path: '/about',
          name: 'about',
          component: () => import('./views/About.vue') // 等价于注册异步组件并返回一个 Promise 对象，分割代码的同时进行异步加载
        }
    ]
});

插槽其实就是 组件中提供的占位符 ，所以 插槽占位符在组件中使用 ，插槽有三种: 匿名插槽 、 具名插槽 、 作用域插槽。

匿名插槽：即没有名字的插槽，即<slot></slot>，使用组件的时候会将组件中的 innerHTML 插入到 <slot></slot> 位置上，相当于动态向组件内部传递数据。

// About.vue 组件
<template>
  <div class="hello">
    <slot></slot>
  </div>
</template>

// 使用 About 组件
<About>
    <h1>hello world</h1><!-- 该内容会插入到上面 <slot></slot> 位置上，即替换掉 <slot></slot>-->
</About>

具名插槽 : 即有名字的插槽， 需要在 <slot> 标签上添加一个 name 属性，指定 <slot> 的名称，即 <slot name=”header”></slot>，同时使用组件的时候需要给其中的 innerHTML 添加 slot 属性，属性值为 <slot> 的 name 属性值，如:

// About.vue 组件
<template>
  <div class="hello">
    <slot name="header"></slot> <!-- 定义 slot 的名称为 header-->
  </div>
</template>

// 使用 About 组件
<About>
    <h1 slot="header">header</h1> <!-- 该内容会被插入到名称为 header 的 slot 上 -->
</About>

作用域插槽 : 作用域插槽可以理解为 组件向外输出数据，我们可以在组件的 <slot> 标签上添加上一些属性，然后其中的属性值可以传到组件外使用，会将 slot 标签上的所以属性合并到一个对象对外输出，组件外通过 slot-scope 指定一个变量名来接收这个对象，如:

// About.vue 组件
<template>
  <div class="hello">
    <h1 slot="footer" slot-scope="innerData">{{innerData.msg}} {{innerData.foo}}</h1><!-- 指定 innerData 变量接收组件 slot 标签中属性集对象 -->
  </div>
</template>

// 使用 About 组件
<About>
    <slot name="footer" msg="haha" foo="foo"></slot><!-- 会将其中的属性合并成一个对象对外输出 -->
</About>

vue-loader 就是 .vue 组件的加载器， 可以将.vue 组件转换为 javascript 模块 ，及 动态渲染一些数据，同时 vue-loader 还对.vue 组件中的三个标签都进行了相应的优化。<template> 标签中可以使用 src 属性引入一个组件，引入的组件可以直接使用当前组件中的数据，<script> 标签中可以直接使用 ES6 语法，<style> 标签可以默认使用 sass 并且支持 scoped 作用域选择。如:

// foo.vue

<template>
    <h1>{{msg}}</h1><!-- 可以直接使用 hello.vue 中的数据 -->
</template>

// hello.vue

<template src="./foo.vue"> <!-- 直接通过 src 引入 foo.vue-->
  
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {msg: "to foo.vue"}
  }
}
</script>
<style scoped>

</style>

keep-alive 是 vue 中一个内置的组件，主要用于 缓存组件，其会在组件 created 的时候，将需要缓存的组件放到缓存中，然后再 render 的时候再根据 name 进行取出。<keep-alive> 主要配合路由进行使用，在配置路由的时候添加上 meta 元数据对象，里面添加上 keepAlive 属性，表示是否缓存该组件，然后将 <router-view> 放到 <keep-alive> 中，router-view 通过 v -if 指令，从路由配置上的 meta 对象中取出 keepAlive 的值进行判断是否需要缓存，如:

<template>
  <div id="app">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/> <!-- 这个是需要缓存的 -->
      </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view><!-- 这个是不需要缓存的 -->
  </div>
</template>

// 路由配置

export default new Router({
    routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          meta: {keepAlive: true}
        },
        {
          path: '/about',
          name: 'about',
          component: About,
          meta: {keepAlive: false}
        }
    ]
});

组件缓存后就不会执行组件的 beforeCreate、created 和 beforeMount、mounted 钩子了，所以其提供了 actived 和 deactived 钩子，actived 钩子主要用于承担原来 created 钩子中获取数据的任务。

因为 组件是可以多次复用的 ，也就是说 会有多个组件实例同时存在 ，同时由于 对象是引用数据类型 ，如果所有组件实例都共用一个 data 数据对象，那么一个组件对 data 数据对象进行修改，那么 其他组件实例也会受到影响 ，所以需要使用函数返回 data 对象的独立拷贝， 使得每个组件实例都会拥有自己的 data 数据对象，相互之间独立，不会互相受影响，便于组件维护。

当使用路由参数时，例如从 /user/lucy 导航到 /user/lily，原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着 组件的生命周期钩子不会再被调用，复用组件时，想对路由参数的变化作出响应的话，有两种方式:

监听 $route 对象数据变化

export default {
  watch: {'$route': (to, from) =>{console.log("route change");// 对路由变化作出响应...

    }
  }
}

通过 beforeRouteUpdate 路由钩子

export default {beforeRouteUpdate(to, from ,next) {console.log("beforeRouteUpdate hook run.");
    next();}
}

当一个 Vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

正文完

vue.js

发表至： javascript

2019-09-27

0

关于javascript:JavaScript-中的活跃对象AO浅谈及导读

手把手教你用typescript创建一个npm包

关于javascript:Vue-EventBus传值的bugEventBus踩坑

关于javascript:JavaScript-设计模式及代码实现代理模式

对连接跟踪的INVALID状态的深入理解

Vue常见面试题精讲持续更新

1. v-if 和 v -show 指令有什么区别？

2. v-for 与 v-if 的优先级?

可参考 v -for 与 v -if 的优先级

3. v-for 循环中 key 有什么作用?

4. vue 路由传参数的三种方式？

5. v-on 常用修饰符？

6. 什么是动态组件?

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

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

9. Vue 子组件调用父组件的方法?

10. vue 中的 ref 是什么？

11. $route 和 $router 的区别？

12. 怎么定义组件？

13. Vue-cli 的 src 文件夹中有哪些文件？

14. 对于 MVVM 的理解？

15. vue 等单页面应用及其优缺点？

16. 路由的跳转方式？

17. 计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景?

18. axios 是什么？怎么使用？

19. axios、fetch、ajax(jquery)的区别？

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

21. 说出 4 个 vue 当中常用的指令及其用法？

22. 导航钩子有哪些？它们有哪些参数？

23. v-model 是什么？

24. 什么是路由懒加载？其原理是什么？

25. 用过插槽吗？用过哪些类型的插槽？

26. 什么是 vue-loader？

27. Vue 中 keep-alive 的作用以及用法？

28. Vue 组件中 data 为什么必须是函数？

29. Vue 组件复用时，vue-router 如何响应路由参数的变化？

30. 简述 Vue 的响应式原理?

Just My Socks（注册教程内含优惠码）

Vue常见面试题精讲持续更新

1. v-if 和 v -show 指令有什么区别？

2. v-for 与 v-if 的优先级?

可参考 v -for 与 v -if 的优先级

3. v-for 循环中 key 有什么作用?

4. vue 路由传参数的三种方式？

5. v-on 常用修饰符？

6. 什么是动态组件?

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

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

9. Vue 子组件调用父组件的方法?

10. vue 中的 ref 是什么？

11. $route 和 $router 的区别？

12. 怎么定义组件？

13. Vue-cli 的 src 文件夹中有哪些文件？

14. 对于 MVVM 的理解？

15. vue 等单页面应用及其优缺点？

16. 路由的跳转方式？

17. 计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景?

18. axios 是什么？怎么使用？

19. axios、fetch、ajax(jquery)的区别？

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

21. 说出 4 个 vue 当中常用的指令及其用法？

22. 导航钩子有哪些？它们有哪些参数？

23. v-model 是什么？

24. 什么是路由懒加载？其原理是什么？

25. 用过插槽吗？用过哪些类型的插槽？

26. 什么是 vue-loader？

27. Vue 中 keep-alive 的作用以及用法？

28. Vue 组件中 data 为什么必须是函数？

29. Vue 组件复用时，vue-router 如何响应路由参数的变化？

30. 简述 Vue 的响应式原理?

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）