详细Vue面试题

1. 虚拟DOM

虚拟DOM( VDOM )是利用了js的Object对象模型来模拟真实DOM,它的结构是一个树形结构,操作虚拟DOM比真实DOM更高效

2. diff算法

diff算法的思维来自于后端,用来比较两个或多个文件,返回值是文件的不同点,diff算法进行的是同级比较

diff算法的比较思维(Vue中),会出现以下四种情况:

    1. 此节点是否被移除  --->  添加新的节点
   
    2. 属性是否被更改 --->  旧属性改为新属性
   
    3. 文本内容被改变  --->  旧内容改为新内容
   
    4. 结构完全不同  --->  节点将被整个移除替换

3. 自己封装过什么组件,描述一下

4. v-if和v-show有什么区别

v-if用于操作Dom是否渲染,而v-if操作的则是display属性,v-if的有更高的切换开销,v-show有更大的初始渲染开销,所以,如果需要频繁切换,使用v-show比较好,而如果渲染条件改变次数少,则v-if更好

5. Vue的双向绑定原理是什么

v-model默认绑定了对象的value,checked等属性,当它初次绑定的时候,就会触发getter,watcher就会触发, watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM当视图修改时,意味着DOM的value属性值改变,就会触发setter,watcher监听机制就会执行,watcher通知Vue生成新的VDOM树,再通过render函数进行渲染,生成真实DOM

6. 如何在Vue组件之间传递价值通信 【本人理解为如何在组件内通信】

  • 父子通信

    1. 绑定简单数据类型
      • 父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件的属性身上, 属性是自定义属性
      • 子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性的名称
      • 接受完后,则这个自定义属性可以向data中的数据一样直接在子组件模板中使用
      • 父组件中的数据一旦修改, 子组件数据就会修改,但是子组件无法修改数据, 那么这也就是单项数据流
  • 子父通信

    1. 绑定复杂数据类型
      • 父组件中的数据是复杂数据类型的数据,那么父组件再给子组件绑定数据时,给子组件的是一个引用地址
      • 所以,子组件可以通过这个引用地址,修改这个数据
    2. 父组件传递一个方法给子组件,达到操作子组件,间接操作父组件数据的效果
      • 父组件定义方法, 然后将这个方法通过单向数据绑定的形式传递给子组件,即通过自定义属性
      • 子组件通过props属性接收, 然后通过 事件调用:例:@click=“自定义属性自定义属性名”
    3. 通过自定义事件来实现通信
      • 父组件中定义 数据 和 方法(方法时用来操作数据的)
      • 在子组件身上绑定自定义事件
      • 子组件定义方法, 在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序
  • 非父子组件通信

    1. 使用ref来绑定组件, 【ref链】

      • 在父组件的模板中, 使用ref = refName 绑定在两个兄弟组件身上
      • 在任意一个子组件中, 就可以通过 this. p a r e n t . parent. parent.refs.refName 就可以获得另一个子组件了, 同时这个自组件身上的数据和方法同样也得到了
    2. 通过事件总线(bus)

      • 它是通过事件的发布(声明), 以及事件的订阅(触发)来做的

      • 首先在js中 创建一个bus对象(vm)

        var bus = new Vue()
        
      • 在Count组件中定义数据, 和修改数据的方法

      • 在Count组件中 通过 created 钩子 , 进行bus事件的发布

        created: {
            bus.$on('add',this.addCount)
        }
        
      • 在MyButton组件的方法中通过 bus进行事件的订阅

        increment () {
            bus.$emit( 'add' )
        }
        

7. Vue 生命周期的理解

  1. Vue 实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程。

    • beforeCreated():在实例创建之前执行,数据未加载状态。

    • created():在实例创建、数据加载后,能初始化数据,DOM 渲染之前执行。

    • beforeMount():虚拟 DOM 已创建完成,在数据渲染前最后一次更改数据。

    • mounted():页面、数据渲染完成,真实 DOM 挂载完成。

    • mounted():页面、数据渲染完成,真实 DOM 挂载完成。

    • beforeUpadate():重新渲染之前触发。

    • updated():数据已经更改完成,DOM 也重新 render 完成,更改数据会陷入死循环。

    • beforeDestory()

      和 destoryed():前者是销毁前执行(实例仍然完全可用),后者则是销毁后执

8. vue对数组的方法,做了哪些封装

9. 路由的种类及路由实现的底层原理

  1. 种类
    • hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
    • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
    • abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
  2. 底层原理

10. slot用什么可以代替

11. 2.6版本对slot有哪些改变,及如何使用

- 改变:

  vue 在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot` 和 `slot-scope` 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中,被废弃的这两个,不会被支持即无效。

- 使用

  1. 具名插槽的变化

     ```javascript
         <!--2.6.0以前的写法-->
         <template  slot='header'>
             <p>------------header----------------</p>
             <h3>这是header1的内容</h3>
             <p>这是header2的内容</p>
         </template>
     
     
         <!--2.6.0之后的写法-->
         <template v-slot:header>
             <p>------------header----------------</p>
             <h3>这是header1的内容</h3>
             <p>这是header2的内容</p>
         </template>
     ```

  2. 具名插槽的缩写

     跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header:

     ```html
     <base-layout>
       	<template #header>
         	<h1>Here might be a page title</h1>
       	</template>
     
       	<p>A paragraph for the main content.</p>
       	<p>And another one.</p>
     
       	<template #footer>
         	<p>Here's some contact info</p>
       	</template>
     </base-layout>
     
     ```

     

  3.  作用域插槽的变化

     ```html
     <slotScope :message='msg'>
         <!--2.6.0之前的写法-->
         <div slot='sayWhat' slot-scope='thing'>说了:{{thing.said}}</div>
         
         <template slot='listbox' slot-scope='value'>
             <p>{{value.send.text}}</p>
         </template>
     
         <!--2.6.0之前的写法,不能单独用在html标签上-->
         <template v-slot:sayWhat='thing'>
           <div>说了:{{thing.said}}</div>
         </template>
         <template v-slot:listbox='value'>
             <p>{{value.send.text}}</p>
         </template>
     </slotScope>
     ```

  4. 动态插槽名:态指令参数也可以用在 v-slot 上,来定义动态的插槽名:

     ```html
     <base-layout>
       	<template v-slot:[dynamicSlotName]>
         	...
       	</template>
     </base-layout>
     
     ```

12. V-modle可以用什么替代

v-model其实是v-bind和v-on的语法糖

`<input v-model="something">`其实是

`<input v-bind:value="something" v-on:input="something = $event.target.value">`的语法糖

v-on,它其实就是一个事件绑定器。我们仔细阅读一下

`<input v-bind:value="something" v-on:input="something = $event.target.value">`,

发现它由两部分组成:v-bind:value和v-on:input,必须是value属性和input事件,否则也不会等价于v-model,而且input事件里面,正好是something等于当前输入值。

13. Vuex的理解

vuex是一个集中式的存储仓库【状态】,类似于 本地存储、数据库,vuex是vue的状态管理工具,它的功能主要是实现多组件间的状态【数据】共享

vuex的组成部分(其中state,action和mutation是它的核心组成)

- **state: 状态**

- **action: 动作(业务交互)**

- **mutation: 修改state**

- getter: 获取数据的

- store: state的存储者

应用场景

相对比较大型的应用(状态较多)

### 14. 如何封装插件

1. 创建插件目录,使用npm init -y 初始化目录。

2. 定义插件组件内容,并在入口文件index.js中引入插件组件,并使用install方法,并导出

   ```JavaScript
   import Vue from 'vue'
   import Loading from './components/Loading.vue'
   
   export default {
       install () {
           Vue.component('Loading',Loading)
       }
   }
   ```

3. 在Vue的入口文件中引入index.js文件并使用Vue.use()使用该组件,则可以在项目中任意位置使用

   ```JavaScript
   import Loading from './zyl_plugins'
   
   Vue.use(Loading)
   ```

15. 是否研究过源码

16. Vue不能检测哪些变动的数组,官方是怎么解决的?你是怎么解决的?

1. 当你利用索引设置一个项时, 例如: vm.items[indexOfItem] = newValue;

   **解决方法**: 使用   Vue.set  || this.$set 或splice(indexOfItem, 1, newValue);

2. 当你修改数组的长度时,例如: vm.items.length = newLength;

   **解决方法**:使用splice(newLength)

17. 问的是vue中 新增 对数组api的响应 源码大概是怎么个流程

18. 问你在Vue是用Ajax吗

Vue数据请求用的是原生的fetch和封装的第三方库axios

19. vue兼容ie?

vue.js是不兼容ie8及其以下浏览器,因为用到了ES5中的`Object.defineProperty`

20. vue做PC?react做移动?

不区分平台,都可以使用

21. vue做pc端会做IE的兼容

第一步、安装 babel-polyfill 
`npm install --save babel-polyfill`
第二步、在VUE项目的src目录下找到main.js,添加代码`import 'babel-polyfill'`
第三步、在webpack.base.conf.js中配置:
`entry: {
app: ['babel-polyfill','./src/main.js']
},`

22. histroy路由如何去掉#

可以用路由的 history 模式,添加 mode: 'history' 之后将使用 HTML5 history 模式,该模式下没有 # 前缀

23. Vue中如何使用防抖节流,

1. 在公共方法中(如 public.js 中),加入函数防抖和节流方法
   
	- 防抖
	
	  ```JavaScript
	  export function _debounce(fn, delay) {
	      var delay = delay || 200;
	      var timer;
	      return function () {
	          var th = this;
	          var args = arguments;
	          if (timer) {
	              clearTimeout(timer);
	          }
	          timer = setTimeout(function () {
	              timer = null;
	              fn.apply(th, args);
	          }, delay);
	      };
	      }
	  ```
	
	- 节流
	
	  ```JavaScript
	  export function _throttle(fn, interval) {
	  var last;
	  var timer;
	  var interval = interval || 200;
	  return function () {
	      var th = this;
	      var args = arguments;
	      var now = +new Date();
	      if (last && now - last < interval) {
	          clearTimeout(timer);
	          timer = setTimeout(function () {
	              last = now;
	              fn.apply(th, args);
	          }, interval);
	      } else {
	          last = now;
	          fn.apply(th, args);
	      }
	  }
	  }
	  ```
	
	  
	
2. 在需要使用的组件引用
   `import { _debounce } from "@/utils/public";`

3. 在 methods 中使用

   ```JavaScript
   methods: {
       // 改变场数
       changefield: _debounce(function(_type, index, item) {
           // do something ...
       }, 200)
     }
   ```

24. 保持活动组件在Vue中的作用

25. vue项目的技术栈?

(技术栈:某项工作或某个职位需要掌握的一系列技能组合的统称)

1. vue
   组件的生命周期、组件的通信、计算属性(computed)、数据更新检测,对象更新、事件处理器(修饰符)、表单控件绑定、异步更新队列、过渡效果、插件、混合(mixins)....
2. vue-router
   两种导航方式(router-link声明式导航,编程式导航)、导航(路由)守卫、路由的激活,动画、数据获取,预载,懒加载,缓存、路由的传接参、动态路由...
3. vuex
   state、actions、mutations、getters、modules、热重载

26. vue cli 搭建项目?

vue-cli  用于快速创建vue项目,底层配置使用的就是webpack

1. 安装cli
   npm install @vue/cli -g  cli3的版本
   npm install vue-cli  -g  cli2的版本
   (npm install @vue/cli-init -g  装了这个工具,可以随意安装cli2又能随意安装cli3)
2. 创建项目
   vue  create  peoject(项目名)   --->cli3
   vue  init  webpack/webpack-simple(简易版本)   peoject(项目名)  ---->cli2
3. 目录结构说明
   * node_modules   项目的依赖包
   * public    静态资源文件夹
   * src       源代码开发目录
     1. assets           当前项目开发的静态资源
     2. compomemts  项目的组件
     3. main.js       webpack中配置的主入口文件
        .......
   * .browserslistrc   项目不支持  ie8及以下
   * .gitignore           git上传时,不上传的文件
   * package.json    当前项目的依赖包配置文件
   * pastcss.cofig.js   给css添加引擎头前缀
   * readme.md        当前项目的说明文件
   * yarn.lock           当前项目的依赖包的第三方库的详细信息记录
4. 下载依赖包
   下载所需要的包,npm/cnpm/yarn
5. 运行项目
   npm run dev

27. dev pro test 环境的配置:相对应的如何配置。script配置,mode环境

28. dev-server 开发如何跑起来的,大概加载了那些东西?加载了那些中间件

29. vue 中的observer

(vue.$data.__ob__)是保存Observer对象的,用来记录是否已经做过数据的“响应式化”,也就是是否已经被Observer处理过,最终是为了用Object.defineProperty进行数据的双向绑定。

30. vue数据响应式,data变成响应式。让其他数据变成响应式,

31. 刷新之后vuex状态之后,重置的问题,如何解决

利用sessionStorage/localStorage,做一个暂时的储存store的模块化结构
主要是针对mutations 和 getters 做一个简单的赋值和取值封装
mutations.js改变state的同时在本地做一个备份
getters.js 取值时默认从state里面取,没有就从本地拿
在页面vue文件直接用mapGetters获取状态值
这样一来就算state被清空了,还可以在本地储存里面获取状态值

32. vue深度监听的方法

watch所监听的对象里添加deep: true

33. vue一面如何实现一个倒计时定时器,回来的时候时间继续

34. hashRouter,history的原理

-  hash 模式 —— 使用 URL 的 hash值 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。

- history 模式——这种模式充分利用 h5 history.pushState API 来完成 URL 跳转而无须重新加载页面。history需要后台配置支持

35. 路由拦截

登录路由拦截, 

```javascript
router.beforeEach((to, from, next) => {

  if (to.name !== 'login') {

    if (!window.sessionStorage.tokenId) {

      router.push({name: 'login'})

    }

  }

  next()
```

36. vue的生命周期,以及每个周期的作用

- beforeCreate:表示组件创建前的准备工作, 为事件的发布订阅 和 生命周期的开始做初始化,无法获取data数据和真实dom

- created: 在实例创建、数据加载后,能初始化数据,DOM 渲染之前执行。数据、属性、方法已经初始化完成,还没挂载。在这个钩子中可以进行数据请求,然后可以进行默认数据的修改

- beforMount: 挂载之前,已完成模板的渲染,生成了虚拟dom, 但真实dom依然无法获取,在这个钩子中数据请求, 它也可以进行一次数据修改

- mounted:页面、数据渲染完成,真实 DOM 挂载完成。在这个钩子中DOM操作就可以进行了, 也可以进行第三方库的实例化(dom不改变)

- beforeUpdate: 数据更新后被动执行,发生在虚拟DOM重新渲染前,因为这个钩子主要做的事情是内部进行的, 所以对我们而言没有太多的操作意义

- updated: 在数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,如进行第三方库的实例化( DOM是改变的 )。然而在大多数情况下,应该避免在此期间更改状态,通常最好使用计算属性或 watcher 取而代之。

- beforeDestory: 销毁前执行(实例仍然完全可用),

- beforeDestory: 组件连同数据和方法一起被销毁,在这个钩子中做善后工作 , 手动清除一些计时器, 和一些方法, 还有第三方实例化出来的对象

37. vue数据获取在那个生命周期钩子?为什么不在mounted中

看实际情况,一般在created(或beforeRouteEnter)里面就可以,如果涉及到需要页面加载完成之后的话用mounted。

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

而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)。

38. 是否进行过组件封装?举例下自己如何进行组件封装的

首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。

然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

39. 组件通信的各种方法

父子 props/event $parent/$children ref provide/inject

兄弟 bus vuex

跨级 bus vuex provide.inject

40. 如何实现秒杀功能(结合vue的生命周期)

```javascript
HTML:
<div>{{countDownList}}</div>
script:
export default {
  data() {
    return {
      countDownList: '00天00时00分00秒',
      actEndTime: '2018-11-19 18:50:00'
    };
  },
  created() {
    this.countDown();
  },
  methods: {
    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },
    countDown(it) {
      var interval = setInterval(() => {
        // 获取当前时间,同时得到活动结束时间数组
        let newTime = new Date().getTime();
        // 对结束时间进行处理渲染到页面
        let endTime = new Date(this.actEndTime).getTime();
        let obj = null;
        // 如果活动未结束,对时间进行处理
        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000;
          // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt(time % (60 * 60 * 24) / 3600);
          let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
          let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else { // 活动已结束,全部设置为'00'
          obj = {
            day: '00',
            hou: '00',
            min: '00',
            sec: '00'
          };
          clearInterval(interval);
        }
        this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
      }, 1000);
    }
  }
}

```
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页