vue 为什么要销毁第三方实例_Vue面试题汇总2020

()1、Vue定义：一个轻巧、高性能、可组件化的MVVM库，通过构建数据驱动的Web界面，实现响应的数据绑定和组合的视图组件。

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

3、MVVM理解：

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

4、Vue中引入组件的步骤?

采用ES6的import ... from ...语法或CommonJS的require()方法引入组件

对组件进行注册,代码如下

// 注册Vue.component('my-component', {  template: '

A custom component!

'})

使用组件

5、Vue的生命周期

beforeCreate(创建前) 在new一个vue实例后，数据观测和初始化事件还未开始，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。

created(创建后) 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来，data 和 methods都已经被初始化好了。

beforeMount(载入前) 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。

mounted(载入后) 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。DOM 渲染在 mounted 中就已经完成。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行。Vue实例已经初始化完成。此时组件脱离了创建阶段，进入到了运行阶段。

beforeUpdate(更新前) 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。页面显示的数据和data中的数据已经保持同步了，都是最新的。

beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

destroyed(销毁后) 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

6、Vue的响应式原理

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

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

触发下面这几个beforeCreate, created, beforeMount, mounted ，并在mounted的时候DOM渲染完成。

8、vue几种常用的指令

v-for 把数据遍历出来

v-if 判断是否隐藏

v-bind 绑定属性

v-model(实现双向绑定)

v-on 绑定一个事件监听器

{{message}}

逆转消息

v-el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例

9、v-if 和 v-show 有什么区别？

相同点： 两者都是在判断DOM节点是否要显示

不同点：

a.实现方式：v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。  v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；  v-show只是简单的基于css切换；

c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；v-show是在任何条件下(首次条件是否为真)都被编译，然后被缓存，而且DOM元素始终被保留；

d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换；  v-show有更高的初始渲染消耗，适合做频繁的切换。

10、Vue 组件中 data 为什么必须是函数

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

当data是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

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

将当前组件的

12、的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

13、为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在  v-if 为否的时候运算 v-for。

14、vue 的双向绑定的原理是什么？
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程：

 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发生变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

15、组件之间参数传递

子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。

16、子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法.

父组件：

import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } };

子组件；

点击

export default { methods: { childMethod() { this.$parent.fatherMethod(); } } };

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件。

父组件：

import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } };

子组件：

点击

export default { methods: { childMethod() { this.$emit('fatherMethod'); } } };

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } };

点击

export default { props: { fatherMethod: { type: Function, default: null } }, methods: { childMethod() { if (this.fatherMethod) { this.fatherMethod(); } } } };

17、单页面应用和多页面应用区别及优缺点

答：单页面应用(SPA)，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写(页面片段)，然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面(MPA)，就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
    用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷(比如切换页面内容时的专场动画)。
单页面缺点：
    不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理)；初次加载时耗时多；页面复杂度提高很多。

18、axios

vue中的ajax，用于向后台发起请求

(1)特点：

    从浏览器中创建XMLHttpRequests；
    node.js创建http请求；
    支持Promise API；
    拦截请求和响应；
    转换请求数据和响应数据；
    取消请求；
    自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。

19、vue常用的UI组件库
答：Mint UI，element，VUEX

20、created和mounted的区别
答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
21.vue获取数据在哪个周期函数
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

22、vue-router 是什么?它有哪些组件
答：vue用来写路由一个插件。router-link、router-view

23、vue-router的两种模式
答:hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)。
24.vue-router实现路由懒加载( 动态加载路由 )
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

25、vuex

vuex是一个专门为vue.js应用程序开发的状态管理模式
    vuex可以帮助我们管理共享状态，也就是管理全局变量
    

vuex五大核心属性：state，getter，mutation，action，module

• state：存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。

• getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

• action：包含任意异步操作，通过提交 mutation 间接更变状态。

• module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

    我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面

当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

26、vue常用的修饰符

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.self: 当事件发生在该元素本身而不是子元素的时候会触发；

.capture: 事件侦听，事件发生的时候会调用

27、vue中 key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

有相同父元素的子元素必须有独特的key。