InterView
Vue
Vue 生命周期
Vue实例有以下8个生命周期钩子函数，它们分别在实例化时按顺序被调用：
- beforeCreate：实例被创建前调用，此时组件的选项、属性等还未初始化。
- created：实例创建完成后调用，可以在这里进行数据的初始化、依赖注入等操作。
- beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未渲染到真实的DOM中。
- mounted：在挂载完成后调用，此时组件已经被渲染到真实的DOM中，可以在这里进行DOM操作和异步请求等操作。
- beforeUpdate：在数据更新之前调用，此时数据已经被更新但DOM尚未重新渲染。
- updated：在数据更新之后调用，此时组件已经被重新渲染，可以在这里进行DOM操作和异步请求等操作。
- beforeDestroy：在实例销毁之前调用，此时组件实例还未销毁，可以在这里进行清理操作。
- destroyed：在实例销毁之后调用，此时组件实例已经被销毁，可以在这里进行清理操作。
这些生命周期钩子函数可以用于控制Vue实例的行为，进行组件的初始化、数据更新、DOM操作、事件监听等等。需要注意的是，不建议在beforeCreate和created钩子函数中进行DOM操作，因为此时组件的模板还未编译完成，DOM节点还未生成。在mounted钩子函数中进行DOM操作是最佳实践。
Vue 组件通信
- 父子组件通信：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件并传递数据给父组件。
- 子父组件通信：子组件通过 this.$parent 访问父组件的属性或方法，或者通过 $emit 触发事件并传递数据给父组件。
- 兄弟组件通信：可以通过一个共同的父组件来进行兄弟组件之间的通信。也可以使用一个空的 Vue 实例作为事件总线，所有需要通信的组件都通过它来进行通信。
- 跨级组件通信：可以使用 provide/inject API 来实现跨级组件通信。父组件通过 provide 提供数据，子孙组件通过 inject 来注入数据。
- Vuex 状态管理：Vuex 是 Vue.js 官方提供的状态管理库，通过将组件的共享状态抽取出来，以集中的方式进行管理，从而实现组件之间的通信。
Vue 双向数据绑定原理
参考链接：
Vue 数据双向绑定原理是通过 数据劫持 + 发布者-订阅者模式 的方式来实现的。
首先是通过 ES5 提供的 Object. defineProperty() 方法来劫持（监听）各属性的getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。
Vue 路由实现方式是什么？如何实现路由懒加载？
实现原理：
SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。
vue-router 使用 path-to-regexp 作为路径匹配引擎，用来匹配path和params
单页面应用(SPA)的核心之一是:
- 更新视图而不重新请求页面
- vue-router在实现单页面前端路由时，提供了三种方式：Hash模式和History模式；根据mode参数以及运行环境决定采用哪一种方式。
路由懒加载：
1 | // 将 |
Vue 父子组件的生命周期执行顺序是什么？
加载渲染过程：
- 父组件 beforeCreate
- 父组件 created
- 父组件 beforeMount
- 子组件 beforeCreate
- 子组件 created
- 子组件 beforeMount
- 子组件 mounted
- 父组件 mounted
更新过程：
- 父组件 beforeUpdate
- 子组件 beforeUpdate
- 子组件 updated
- 父组件 updated
销毁过程：
- 父组件 beforeDestroy
- 子组件 beforeDestroy
- 子组件 destroyed
- 父组件 destoryed
Vue computed 和 watch 的区别是什么？
Vue.js 中的 computed 和 watch 都是用于监听数据变化的功能，但它们的实现方式和使用场景略有不同。
computed
computed 是计算属性，是一种声明式的依赖关系，当依赖的数据发生变化时，会自动重新计算该属性的值。computed 的值会被缓存，只有依赖的数据变化时才会重新计算。
使用 computed 可以避免在模板中写复杂的逻辑，将逻辑和模板分离开来，使代码更加清晰简洁。computed 适用于一些需要经常被调用且计算量比较大的场景。
watch
watch 是观察一个数据的变化，当数据发生变化时会执行相应的回调函数。watch 可以监听一个数据的变化，也可以监听一个对象的某个属性的变化。
使用 watch 可以做一些比较复杂的业务逻辑，比如当用户输入完毕后请求接口获取数据等。watch 适用于一些需要在数据变化时执行异步或较为复杂的操作的场景。
综上所述，computed 适用于计算属性，而 watch 适用于监听数据的变化并执行一些复杂的操作。
Vue v-if和v-show的区别是什么？在什么情况下应该使用它们？
Vue.js 中的 v-if 和 v-show 都是用于控制元素的显示和隐藏，但它们的实现方式和使用场景略有不同。
v-if
v-if 是根据条件来判断是否渲染元素的指令，如果条件为真，则渲染元素，如果条件为假，则不渲染元素。当条件发生变化时，会销毁或创建元素。
使用 v-if 可以节省性能，因为在条件为假时，元素不会被渲染到 DOM 树中。但在频繁切换条件时，会造成不必要的性能开销，因为需要频繁创建和销毁元素。
v-show
v-show 是根据条件来判断元素是否显示的指令，如果条件为真，则显示元素，如果条件为假，则隐藏元素。当条件发生变化时，不会销毁或创建元素，只是修改元素的 CSS 样式。
使用 v-show 可以在元素显示和隐藏之间切换，但不会造成不必要的性能开销。但在元素首次渲染时，需要将元素渲染到 DOM 树中，可能会造成一些不必要的开销。
综上所述，当需要频繁切换元素显示和隐藏时，应该使用 v-show；当需要节省性能时，应该使用 v-if。同时，在使用 v-if 和 v-show 时，需要根据实际场景进行选择。如果需要对元素进行频繁操作，建议使用 v-show，如果元素较为复杂且需要频繁切换，建议使用 v-if。