Vue

前端面试

其他： https://vue3js.cn/interview/vue/vue.html#%E4%B8%80%E3%80%81%E4%BB%8E%E5%8E%86%E5%8F%B2%E8%AF%B4%E8%B5%B7

Vue和React 的区别

共同点：

• 组件化
• 响应式（修改状态即可更新视图，不需要操作dom）
• 虚拟dom

不同点

• 响应式原理不同：Vue使用观察者自动跟踪数据变化，自动更新组件；React必须显示的调用setState方法更新状态。
• Vue推荐使用template定义组件，React推荐使用JSX
• Vue是双向绑定，React是单向数据流

Vue-Router的hash和history两种路由模式的区别

区别

• hash模式的url有‘#’，history没有比较美观
• history是利用浏览器历史记录栈的API实现的，hash是监听location对象的hash值变化时间来实现
• 相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发

优缺点

• history比hash的url美观（没有'#'号）
• history修改的url可以是同域的任意url，hash则只能是同文档的url
• history模式往往需要后端支持，如果后端nginx没有覆盖路由地址，就会返回404，hash因为是同文档的url，即使后端没有覆盖路由地址，也不会返回404
• hash模式下，如果把url作为参数传后端，那么后端会直接从'#'号截断，只处理'#'号前的url，因此会存在#后的参数内容丢失的问题，不过这个问题hash模式下也有解决的方法。

vue-router的三种模式

• hash 和 history 的使用方式差不多，hash 中路由带 # ，但是使用简单，不需要服务端配合，站在技术角度讲，这个是配置最简单的模式，本人感觉这也是 hash 被设为默认模式的原因。
• history 模式需要服务端配合处理404的情况，但是路由中不带 # ，比 hash 美观一点。
• abstract 模式没有使用浏览器api，可以放到node环境或者桌面应用中， 本人感觉是对 spa应用 的兜底和能力扩展。

Vue-Router的动态路由

 {
    path: '/details/:id'
    name: 'Details'
    components: Details
 }

/details/1, /details/2 等都会被映射到Details组件上

如何获取url参数值

this.$route.params.id

Vue 隔代组件的通信方式 EventBus的具体使用

隔代组件的通讯方式： EventBus、Vuex、provide/inject(祖先想子孙后代传)

EventBus又称为事件总线，使用：
1.创建一个bus.js（引入 Vue 并导出它的一个实例）

import Vue from 'vue';
export const EventBus= new Vue();

2.在两个组件中引入，并且使用EventBus.$emit('事件名', 数据)发送，使用EventBus.$on('事件名', callback())来接收

Vue mixin和extend 的使用和区别

区别：
mixin是对Vue类的options进行混入，可以混入多个mixin；有全局和局部混入；
extend用于创建Vue的子类；

另：extends： https://cn.vuejs.org/v2/api/#extends

Vue use的作用

用于安装插件，其实就是调用了插件里的install方法

Vue.use做了什么，为什么需要在new Vue之前使用

• 检查插件是否已经注册，相同的额插件只注册一次
• 根据插件形势选择调用plugin.install或者plugin
• 存储已注册的插件，用于插件是否已注册校验

new Vue(options)时，首先会进行初始化，将vue上的属性和options进行合并，在进行事件，生命周期等的初始化。
如果Vue.use()在new Vue()之后执行，初始化时你的插件内容还没有添加到相关的属性中（如Vue.options.components、Vue.options.directives、Vue.options.filters），新初始化的Vue实例中也就不会有插件的内容。

Vue 插件有什么用

• 添加全局方法；
• 添加全局资源，如指令、过滤器等；
• 通过全局混入来添加一些组件选项，如 vue-router；
• 添加Vue实例方法，通过把它们添加到 Vue.prototype 上实现。；

需要在你调用new Vue()启动应用之前完成

如何在Vue中注册一个全局的组件

用Vue.component()

在注册完一个全局组件后就可以在任何组件中直接使用，而不需要在各个组件中引入并进行局部注册。

步骤：

1.在conponents目录中存放组件；
2.创建components.js文件；
3.引入所有需要注册的全局组件，并用export（里面用Vue.component('组件名', 组件名)）
4.在mian.js中引入omponents.js

components.js代码

import 组件名字A from '@/components/组件名A'
import 组件名字B from '@/components/组件名B'
export default(Vue) => {
    Vue.component('组件名A', 组件名A)
    Vue.component('组件名B', 组件名B)
}

main.js代码

import components from '@/components/components.js'
Vue.use(components)
new Vue({...})

Vue中引入elementUI

在main.js中引入，然后Vue.use(ElementUI)

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue的双向绑定机制

Vue响应数据原理