Vue面试题

1、Vue的生命周期？

beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（创建、挂载、更新、卸载）

挂载中可以操作DOM，创建中不能操作DOM；常用挂载或者创建生命周期就行了

2、methods和computed的区别？

都是存放方法的地方；

methods里面存放的方法每次调用都会重新计算（不会缓存）

computed里面的方法调用计算后，当其参数不发生改变时再次调用，直接返回上次计算的结果，不重新计算（会响应数据缓存）

watch主要用来解决 beforeUpdate, updated两个钩子里修改状态导致死循环的问题，采用watch以及 监测可能异步改变值得时候

3、Vue的传参方法？

属性传值、$refs、$parent、通知传值(广播传值)、本地传值、路由传值

父向子传值：v-bind属性绑定（props)

子向父传值：v-on 事件绑定

兄弟组件之间共享数据：EventBus（$on数据接收方，$emit发送数据的内个组件）

Vue六种传值方式 - 简书

4、vue-router路由守卫？

全局守卫、路由独享守卫、组件内守卫

Vue 路由 导航守卫(全局守卫、路由独享守卫、组件内守卫) - 简书

5、vuex的核心以及使用？

State、Mutation、Action、Getter

vuex及其五大核心功能运用解析 - 活在当下zql - 博客园

6、vue组件封装？

首先，使用Vue.extend()创建一个组件

然后，使用Vue.component()方法注册组件

接着，如果子组件需要数据，可以在props中接受定义

最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

Vue封装组件的过程_感恩、奋进、自信-CSDN博客_vue封装组件

7、虚拟DOM和DIFF算法？

将DOM抽象为虚拟DOM, 然后通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染效率的过程;

diff 是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染

虚拟DOM和diff算法 - simple小前端 - 博客园

8、vue2和vue3原理？

1. vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2、默认进行懒观察（lazy observation）

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

3、更精准的变更通知

比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

4、vue3新加入了TypeScript以及PWA的支持

5、vue2和vue3组件发送改变

vue2与vue3的区别_田兴的博客-CSDN博客_vue2和vue3区别

9、vue2和Vue3中的ref的作用？

Vue2

基本的用法，本页面获取DOM元素

 
<template>
 
  <div id="app">
 
    <div ref="testDom">11111</div>
 
    <button @click="getTest">获取test节点</button>
 
  </div>
 
</template>
 
<script>
 
export default {
 
  methods: {
 
    getTest() {
 
      console.log(this.$refs.testDom)
 
    }
 
  }
 
};
 
</script>
 

---

获取子组件中的data

子组件 src\components\HelloWorld.vue

 
<template>
 
  <div>
 
      {{ msg }}
 
  </div>
 
</template>
 
<script>
 
export default {
 
  data() {
 
    return {
 
      msg: "hello world"
 
    }
 
  }
 
}
 
</script>
 

父组件

 
<template>
 
  <div id="app">
 
    <HelloWorld ref="hello"/>
 
    <button @click="getHello">获取helloworld组件中的值</button>
 
  </div>
 
</template>
 
<script>
 
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
 
  components: {
 
    HelloWorld
 
  },
 
  data() {
 
    return {}
 
  },
 
  methods: {
 
    getHello() {
 
      console.log(this.$refs.hello.msg)
 
    }
 
  }
 
};
 
</script>
 

调用子组件的方法

子组件

 
<template>
 
  <div>
 
  </div>
 
</template>
 
<script>
 
export default {
 
  methods: {
 
    open() {
 
      console.log("调用到了")
 
    }
 
  }
 
}
 
</script>
 

父组件

 
<template>
 
  <div id="app">
 
    <HelloWorld ref="hello"/>
 
    <button @click="getHello">获取helloworld组件中的值</button>
 
  </div>
 
</template>
 
<script>
 
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
 
  components: {
 
    HelloWorld
 
  },
 
  data() {
 
    return {}
 
  },
 
  methods: {
 
    getHello() {
 
      this.$refs.hello.open();
 
    }
 
  }
 
};
 
</script>
 

子组件调用父组件的方法

子组件

 
<template>
 
  <div>
 
</div>
 
</template>
 
<script>
 
export default {
 
  methods: {
 
    open() {
 
      console.log("调用了");
 
      //  调用父组件方法
 
      this.$emit("refreshData");
 
    }
 
  }
 
}
 
</script>
 

父组件

Vue3