一、 vue组件里的定时器要怎么销毁？

const timer = setInterval( () => {
//某些定时器操作
},1000)
//通过$once来监听定时器，在beforeDestroy钩子可以被清除
this.$once('hook:beforeDestroy', () => {
cleaarInterval(timer)
})

`<template />`有什么用

包裹嵌套其他元素，使元素具有区域性，自身具有三个特点

隐藏性：不会显示在页面中
任意性：可以写在页面的任意位置
无限性：没有一个根元素包裹，任何HTML内容都是无效的

二、使用vue渲染大量数据时应该怎么优化？

如果需要响应式，考虑使用虚表（只渲染要显示的数据）
如果不需要响应式，变量在beforeCreated或created中声明（object.freeze会导致列表无法增加数据）

三、 Object.defineProperty的理解

Object.defineProperty定义新属性或修改原有的属性；
vue的数据双向绑定的原理就是用Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者-发布订阅模式进行监听数据的变化，从而做相应的逻辑处理

四、 Vue组件通信

Props/Attributes（属性）：父组件通过props向子组件传递数据，子组件通过props接收并使用这样数据
事件（Event）：子组件通过$emit 触发自定义事件，父组件在子组件上监听该事件来响应

<!-- 在父组件传递 -->
<template>
  <div>
  <!-- 父组件接收消息 -->
    <ChildComponent :message="parentMessage"  @messageEmitted="hMessage"/>
  </div>
</template>
<script>
export default {
data() {
    return {
    parentMessage: 'Hello Word!'
    }
  },
methods: {
      hMessage(message) {
       console.log(message) //输出 '子传父'
      }
  }
}
</script>

<!-- 在子组件中 -->

<template>
  <div>
    <p>{{ message }}</p>
    <!-- 子组件传递消息 -->
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  props: ['message']
  methods: {
   sendMessage() {
    this.$emit('messageEmitted' , '子传父')
    }
  }
}
</script>

EventBus（事件总线）：可以创建一个全局的事件中心，允许组件之间进行通信。

// Event Bus
const bus = new Vue();

// 在发送组件中
bus.$emit('messageEmitted', 'Hello from sender');

// 在接收组件中
bus.$on('messageEmitted', message => {
  console.log(message); // 输出 'Hello from sender'
});

Vuex（状态管理）：Vuex是Vue官方提供的状态管理库，用于管理全局状态。组件可以通过Vuex来访问和修改共享的状态。

$nexTick的作用

Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，在统一更新使用场景：数据回显

虚拟DOM

实际开发中我们需要尽量减少真实DOM的操作，虚拟 DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，相当于在 js 和真实 dom 中间加来一个缓存，利用 diff 算法避免没有必要的 dom 操作，从而提高性能。

Diff算法

Diff算法是一种对比算法。就是比对新旧虚拟DOM，然后将有变动的虚拟节点渲染到对应的真实DOM节点上面，这样真实DOM上面没有变化的节点就不用重新渲染，进而提高效率

Vue中key的作用

页面上的标签都对应具体的虚拟DOM对象，如果没有key唯一标识，当删除某一个标签的时候，不知道具体删除的是哪一个，所有需要重新全部渲染，如果有key唯一标识的话就只需要删除对应标签即可，更加准确，更加快速，提高效率

Vue 的 mixin 的理解

混入是用来分发 Vue 组件中的可复用功能,混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。
当组件和混入对象含有同名选项时,以组件数据优先

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

Vue数据变化，视图不更新

数据是在异步操作中变化的，Vue无法直接进行监听，需要使用$nexTick 进行手动更新。
数据变动时不是响应的，Vue默认只会对组件实例上预先声明的属性进行响应式监听，如果是在实例中动态添加的新属性，Vue是不能自动追踪它的变化的，可以使用Vue.set或者this.$set方法将属性设置为响应式
对象或者数组的变更问题，Vue只能检测到对象属性或者数组项的变更，而不能检测到对象或者数组本身的变更。可以使用Arrar.prototype.splice等方法来替代整个对象或数组
计算属性依赖问题，如果你在计算属性中使用了某个属性，而该属性发生变化时，计算属性不会自动更新。可以正确声明计算属性的依赖关系

Promise 的内部原理是什么？优缺点？

Promise对象，封装了一个异步操作并且还可以获取成功或失败的结果
Promise主要就是解决回调地狱的问题，之前如果异步任务比较多，同时他们之间有相互依赖的关系
有三种状态：pending初始状态，fulfilled成功状态， rejected失败状态
状态改变只有两种情况：fulfilled成功或者rejected失败，一旦发生，状态不可改变
promise一旦创建就会立即执行，无法中途取消
如果不设置回调，promise内部抛出的错误就无法反馈到外面
若处于pending状态时，无法得知目前在哪个阶段
原理：

构造一个Promise实例，实例需要传递函数的参数，这个函数有两个形参，分别是函数类型，一个是resolve一个是reject
promise上还有then方法，这个方法就是来指定状态改变时的确定操作，resolve是执行第一个函数，reject是执行第二个函数

Promise 和async await的区别

1.都是处理异步请求的方式

2.promise是ES6，async await 是ES7的语法

3.async await是基于promise实现的，他和promise都是非阻塞性的

优缺点：

1.promise是返回对象我们要用 then catch方法去处理和捕获异常，并且书写方式是链式的，容易造成代码重叠，不好维护，async await是通过tra catch进行捕获异常

2.async await 最大的优点就是能让代码看起来像同步一样，只要遇到await就会立刻返回结果，然后再执行后面的操作，prmise.then()的方式返回，会出现请求还没返回，就执行了后面的操作

Vue面试题