你有对 Vue 项目进行哪些优化？
（1）代码层面的优化
（2）Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
（3）基础的 Web 技术的优化
Vuex 中 action 和 mutation 的区别
mutation 中的操作是一系列的同步函数，用于修改 state 中的变量的的状态。当使用 vuex 时需要通过 commit 来提交需要操作的内容。mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { state.count++ // 变更状态 } }})
复制代码
当触发一个类型为 increment 的 mutation 时，需要调用此函数：
store.commit('increment')
复制代码
而 Action 类似于 mutation，不同点在于：
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }})
复制代码
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。所以，两者的不同点如下：
Mutation 专注于修改 State，理论上是修改 State 的唯一途径；Action 业务代码、异步请求。
Mutation：必须同步执行；Action：可以异步，但不能直接操作 State。
在视图更新时，先触发 actions，actions 再触发 mutation
mutation 的参数是 state，它包含 store 中的数据；store 的参数是 context，它是 state 的父级，包含 state、getters
函数式组件优势和原理
函数组件的特点
函数式组件需要在声明组件是指定 functional:true
不需要实例化，所以没有this,this通过render函数的第二个参数context来代替
没有生命周期钩子函数，不能使用计算属性，watch
不能通过$emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)
优点
由于函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
函数式组件结构比较简单，代码结构更清晰
使用场景：
例子
Vue.component('functional',{ // 构造函数产生虚拟节点的 functional:true, // 函数式组件 // data={attrs:{}} render(h){ return h('div','test') }})const vm = new Vue({ el: '#app'})
复制代码
源码相关
// functional componentif (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件 return createFunctionalComponent(Ctor, propsData, data, context, children)}
// extract listeners, since these needs to be treated as// child component listeners instead of DOM listenersconst listeners = data.on // 处理事件// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on = data.nativeOn // 处理原生事件
// install component management hooks onto the placeholder nodeinstallComponentHooks(data) // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）
复制代码
v-model 实现原理
我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖（可以看成是value + input方法的语法糖），v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
所以我们可以 v-model 进行如下改写：
<input v-model="sth" /><!-- 等同于 --><input :value="sth" @input="sth = $event.target.value" />
复制代码
当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，实现了数据的双向绑定
//Parent<template> {{num}} <Child v-model="num"></template>export default { data(){ return { num: 0 } }}
//Child<template> <div @click="add">Add</div></template>export default { props: ['value'], // 属性必须为value methods:{ add(){ // 方法名为input this.$emit('input', this.value + 1) } }}
复制代码
原理
会将组件的 v-model 默认转化成value+input
const VueTemplateCompiler = require('vue-template-compiler'); const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></el- checkbox>');
// 观察输出的渲染函数：// with(this) { // return _c('el-checkbox', { // model: { // value: (check), // callback: function ($$v) { check = $$v }, // expression: "check" // } // }) // }
复制代码
// 源码位置 core/vdom/create-component.js line:155
function transformModel (options, data: any) { const prop = (options.model && options.model.prop) || 'value' const event = (options.model && options.model.event) || 'input' ;(data.attrs || (data.attrs = {}))[prop] = data.model.value const on = data.on || (data.on = {}) const existing = on[event] const callback = data.model.callback if (isDef(existing)) { if (Array.isArray(existing) ? existing.indexOf(callback) === -1 : existing !== callback ) { on[event] = [callback].concat(existing) } } else { on[event] = callback } }
复制代码
原生的 v-model，会根据标签的不同生成不同的事件和属性
const VueTemplateCompiler = require('vue-template-compiler'); const ele = VueTemplateCompiler.compile('<input v-model="value"/>');
// with(this) { // return _c('input', { // directives: [{ name: "model", rawName: "v-model", value: (value), expression: "value" }], // domProps: { "value": (value) },// on: {"input": function ($event) { // if ($event.target.composing) return;// value = $event.target.value// }// }// })// }
复制代码
编译时：不同的标签解析出的内容不一样 platforms/web/compiler/directives/model.js
if (el.component) { genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime return false } else if (tag === 'select') { genSelect(el, value, modifiers) } else if (tag === 'input' && type === 'checkbox') { genCheckboxModel(el, value, modifiers) } else if (tag === 'input' && type === 'radio') { genRadioModel(el, value, modifiers) } else if (tag === 'input' || tag === 'textarea') { genDefaultModel(el, value, modifiers) } else if (!config.isReservedTag(tag)) { genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime return false }
复制代码
运行时：会对元素处理一些关于输入法的问题 platforms/web/runtime/directives/model.js
inserted (el, binding, vnode, oldVnode) { if (vnode.tag === 'select') { // #6903 if (oldVnode.elm && !oldVnode.elm._vOptions) { mergeVNodeHook(vnode, 'postpatch', () => { directive.componentUpdated(el, binding, vnode) }) } else { setSelected(el, binding, vnode.context) } el._vOptions = [].map.call(el.options, getValue) } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) { el._vModifiers = binding.modifiers if (!binding.modifiers.lazy) { el.addEventListener('compositionstart', onCompositionStart) el.addEventListener('compositionend', onCompositionEnd) // Safari < 10.2 & UIWebView doesn't fire compositionend when // switching focus before confirming composition choice // this also fixes the issue where some browsers e.g. iOS Chrome // fires "change" instead of "input" on autocomplete. el.addEventListener('change', onCompositionEnd) /* istanbul ignore if */ if (isIE9) { el.vmodel = true } } }}
复制代码
v-if 和 v-show 区别
v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染
v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗
v-show 与 v-if 的使用场景
v-if 与 v-show 都能控制dom元素在页面的显示
v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）
如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好
v-show 与 v-if 原理分析
v-show原理
不管初始条件是什么，元素总是会被渲染
我们看一下在 vue 中是如何实现的
代码很好理解，有transition就执行transition，没有就直接设置display属性
// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.tsexport const vShow: ObjectDirective<VShowElement> = { beforeMount(el, { value }, { transition }) { el._vod = el.style.display === 'none' ? '' : el.style.display if (transition && value) { transition.beforeEnter(el) } else { setDisplay(el, value) } }, mounted(el, { value }, { transition }) { if (transition && value) { transition.enter(el) } }, updated(el, { value, oldValue }, { transition }) { // ... }, beforeUnmount(el, { value }) { setDisplay(el, value) }}
复制代码
v-if原理
v-if在实现上比v-show要复杂的多，因为还有else else-if 等条件需要处理，这里我们也只摘抄源码中处理 v-if 的一小部分
返回一个node节点，render函数通过表达式的值来决定是否生成DOM
// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.tsexport const transformIf = createStructuralDirectiveTransform( /^(if|else|else-if)$/, (node, dir, context) => { return processIf(node, dir, context, (ifNode, branch, isRoot) => { // ... return () => { if (isRoot) { ifNode.codegenNode = createCodegenNodeForBranch( branch, key, context ) as IfConditionalExpression } else { // attach this branch's codegen node to the v-if root. const parentCondition = getParentCondition(ifNode.codegenNode!) parentCondition.alternate = createCodegenNodeForBranch( branch, key + ifNode.branches.length - 1, context ) } } }) })
复制代码
Vue 要做权限管理该怎么做？控制到按钮级别的权限怎么做？
分析
思路
权限管理需求分析：页面和按钮权限
权限管理的实现方案：分后端方案和前端方案阐述
说说各自的优缺点
回答范例
权限管理一般需求是页面权限和按钮权限的管理
具体实现的时候分后端和前端两种方案：
前端方案 会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组，需要认证的页面在其路由的meta中添加一个roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes(accessRoutes)方式动态添加路由即可
后端方案 会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息
按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给 v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮
纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸！
可能的追问
类似Tabs这类组件能不能使用v-permission指令实现按钮权限控制？
<el-tabs> <el-tab-pane label="⽤户管理" name="first">⽤户管理</el-tab-pane> <el-tab-pane label="⻆⾊管理" name="third">⻆⾊管理</el-tab-pane></el-tabs>
复制代码
服务端返回的路由信息如何添加到路由器中？
// 前端组件名和组件映射表const map = { //xx: require('@/views/xx.vue').default // 同步的⽅式 xx: () => import('@/views/xx.vue') // 异步的⽅式}// 服务端返回的asyncRoutesconst asyncRoutes = [ { path: '/xx', component: 'xx',... }]// 遍历asyncRoutes，将component替换为map[component]function mapComponent(asyncRoutes) { asyncRoutes.forEach(route => { route.component = map[route.component]; if(route.children) { route.children.map(child => mapComponent(child)) } })}mapComponent(asyncRoutes)
复制代码
你是怎么处理 vue 项目中的错误的？
分析
思路
首先区分错误类型
根据错误不同类型做相应收集
收集的错误是如何上报服务器的
回答范例
应用中的错误类型分为"接口异常"和“代码逻辑异常”
我们需要根据不同错误类型做相应处理：接口异常是我们请求后端接口过程中发生的异常，可能是请求失败，也可能是请求获得了服务器响应，但是返回的是错误状态。以Axios为例，这类异常我们可以通过封装Axios，在拦截器中统一处理整个应用中请求的错误。代码逻辑异常是我们编写的前端代码中存在逻辑上的错误造成的异常，vue应用中最常见的方式是使用全局错误处理函数app.config.errorHandler收集错误
收集到错误之后，需要统一处理这些异常：分析错误，获取需要错误信息和数据。这里应该有效区分错误类型，如果是请求错误，需要上报接口信息，参数，状态码等；对于前端逻辑异常，获取错误名称和详情即可。另外还可以收集应用名称、环境、版本、用户信息，所在页面等。这些信息可以通过vuex存储的全局状态和路由信息获取
实践
axios拦截器中处理捕获异常：
// 响应拦截器instance.interceptors.response.use( (response) => { return response.data; }, (error) => { // 存在response说明服务器有响应 if (error.response) { let response = error.response; if (response.status >= 400) { handleError(response); } } else { handleError(null); } return Promise.reject(error); },);
复制代码
vue中全局捕获异常：
import { createApp } from 'vue'const app = createApp(...)app.config.errorHandler = (err, instance, info) => { // report error to tracking services}
复制代码
处理接口请求错误：
function handleError(error, type) { if(type == 1) { // 接口错误，从config字段中获取请求信息 let { url, method, params, data } = error.config let err_data = { url, method, params: { query: params, body: data }, error: error.data?.message || JSON.stringify(error.data), }) }}
复制代码
处理前端逻辑错误：
function handleError(error, type) { if(type == 2) { let errData = null // 逻辑错误 if(error instanceof Error) { let { name, message } = error errData = { type: name, error: message } } else { errData = { type: 'other', error: JSON.strigify(error) } } }}
复制代码
参考：前端vue面试题详细解答
Vue3.2 setup 语法糖汇总
提示：vue3.2 版本开始才能使用语法糖！
在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return， template 便可直接使用，非常的香啊！
1. 如何使用 setup 语法糖
只需在 script 标签上写上 setup
<template></template><script setup></script><style scoped lang="less"></style>
复制代码
2. data 数据的使用
由于 setup 不需写 return ，所以直接声明数据即可
<script setup>import { ref, reactive, toRefs,} from 'vue'
const data = reactive({ patternVisible: false, debugVisible: false, aboutExeVisible: false,})
const content = ref('content')//使用toRefs解构const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data)</script>
复制代码
3. method 方法的使用
<template > <button @click="onClickHelp">帮助</button></template><script setup>import {reactive} from 'vue'
const data = reactive({ aboutExeVisible: false,})// 点击帮助const onClickHelp = () => { console.log(`帮助`) data.aboutExeVisible = true}</script>
复制代码
4. watchEffect 的使用
<script setup>import { ref, watchEffect,} from 'vue'
let sum = ref(0)
watchEffect(()=>{ const x1 = sum.value console.log('watchEffect所指定的回调执行了')})</script>
复制代码
5. watch 的使用
<script setup>import { reactive, watch,} from 'vue'//数据let sum = ref(0)let msg = ref('hello')let person = reactive({ name:'张三', age:18, job:{ j1:{ salary:20 } }})// 两种监听格式watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或msg变了',newValue,oldValue) }, {immediate:true})
watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue)},{deep:true})
</script>
复制代码
6. computed 计算属性的使用
computed 计算属性有两种写法(简写和考虑读写的完整写法)
<script setup>import { reactive, computed,} from 'vue'
// 数据let person = reactive({ firstName:'poetry', lastName:'x'})
// 计算属性简写person.fullName = computed(()=>{ return person.firstName + '-' + person.lastName})
// 完整写法person.fullName = computed({ get(){ return person.firstName + '-' + person.lastName }, set(value){ const nameArr = value.split('-') person.firstName = nameArr[0] person.lastName = nameArr[1] }})</script>
复制代码
7. props 父子传值的使用
父组件代码如下（示例）：
<template> <child :name='name'/> </template>
<script setup> import {ref} from 'vue' // 引入子组件 import child from './child.vue' let name= ref('poetry')</script>
复制代码
子组件代码如下（示例）：
<template> <span>{{props.name}}</span></template>
<script setup>import { defineProps } from 'vue'// 声明propsconst props = defineProps({ name: { type: String, default: 'poetries' }}) // 或者//const props = defineProps(['name'])</script>
复制代码
8. emit 子父传值的使用
父组件代码如下（示例）：
<template> <AdoutExe @aboutExeVisible="aboutExeHandleCancel" /></template><script setup>import { reactive } from 'vue'// 导入子组件import AdoutExe from '../components/AdoutExeCom'
const data = reactive({ aboutExeVisible: false, })// content组件ref
// 关于系统隐藏const aboutExeHandleCancel = () => { data.aboutExeVisible = false}</script>
复制代码
子组件代码如下（示例）：
<template> <a-button @click="isOk"> 确定 </a-button></template><script setup>import { defineEmits } from 'vue';
// emitconst emit = defineEmits(['aboutExeVisible'])/** * 方法 */// 点击确定按钮const isOk = () => { emit('aboutExeVisible');}</script>
复制代码
9. 获取子组件 ref 变量和 defineExpose 暴露
即vue2中的获取子组件的ref，直接在父组件中控制子组件方法和变量的方法
父组件代码如下（示例）：
<template> <button @click="onClickSetUp">点击</button> <Content ref="content" /></template>
<script setup>import {ref} from 'vue'
// content组件refconst content = ref('content')// 点击设置const onClickSetUp = ({ key }) => { content.value.modelVisible = true}</script><style scoped lang="less"></style>
复制代码
子组件代码如下（示例）：
<template> <p>{{data }}</p></template>
<script setup>import { reactive, toRefs} from 'vue'
/** * 数据部分* */const data = reactive({ modelVisible: false, historyVisible: false, reportVisible: false, })
defineExpose({ ...toRefs(data),})</script>
复制代码
10. 路由 useRoute 和 useRouter 的使用
<script setup> import { useRoute, useRouter } from 'vue-router'
// 声明 const route = useRoute() const router = useRouter()
// 获取query console.log(route.query) // 获取params console.log(route.params)
// 路由跳转 router.push({ path: `/index` })</script>
复制代码
11. store 仓库的使用
<script setup> import { useStore } from 'vuex' import { num } from '../store/index'
const store = useStore(num)
// 获取Vuex的state console.log(store.state.number) // 获取Vuex的getters console.log(store.state.getNumber)
// 提交mutations store.commit('fnName')
// 分发actions的方法 store.dispatch('fnName')</script>
复制代码
12. await 的支持
setup语法糖中可直接使用await，不需要写async，setup会自动变成async setup
<script setup> import api from '../api/Api' const data = await Api.getData() console.log(data)</script>
复制代码
13. provide 和 inject 祖孙传值
父组件代码如下（示例）：
<template> <AdoutExe /></template>
<script setup> import { ref,provide } from 'vue' import AdoutExe from '@/components/AdoutExeCom'
let name = ref('py') // 使用provide provide('provideState', { name, changeName: () => { name.value = 'poetries' } })</script>
复制代码
子组件代码如下（示例）：
<script setup> import { inject } from 'vue' const provideState = inject('provideState')
provideState.changeName()</script>
复制代码
说说你对 slot 的理解？slot 使用场景有哪些
一、slot 是什么
在 HTML 中 slot 元素 ，作为 Web Components 技术套件的一部分，是 Web 组件内的一个占位符
该占位符可以在后期使用自己的标记语言填充
举个栗子
<template id="element-details-template"> <slot name="element-name">Slot template</slot></template><element-details> <span slot="element-name">1</span></element-details><element-details> <span slot="element-name">2</span></element-details>
复制代码
template不会展示到页面中，需要用先获取它的引用，然后添加到DOM中，
customElements.define('element-details', class extends HTMLElement { constructor() { super(); const template = document .getElementById('element-details-template') .content; const shadowRoot = this.attachShadow({mode: 'open'}) .appendChild(template.cloneNode(true)); }})
复制代码
在Vue中的概念也是如此
Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口
二、使用场景
通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理
如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情
通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
比如布局组件、表格列、下拉选、弹框显示内容等
Vue.extend 作用和原理
官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
其实就是一个子类构造器 是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类 并且利用 mergeOptions 把传入组件的 options 和父类的 options 进行了合并
相关代码如下
export default function initExtend(Vue) { let cid = 0; //组件的唯一标识 // 创建子类继承Vue父类 便于属性扩展 Vue.extend = function (extendOptions) { // 创建子类的构造函数 并且调用初始化方法 const Sub = function VueComponent(options) { this._init(options); //调用Vue初始化方法 }; Sub.cid = cid++; Sub.prototype = Object.create(this.prototype); // 子类原型指向父类 Sub.prototype.constructor = Sub; //constructor指向自己 Sub.options = mergeOptions(this.options, extendOptions); //合并自己的options和父类的options return Sub; };}
复制代码
为什么要用 Vuex 或者 Redux
由于传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致代码无法维护。
所以需要把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，组件树构成了一个巨大的"视图"，不管在树的哪个位置，任何组件都能获取状态或者触发行为。
另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码将会变得更结构化且易维护。
delete 和 Vue.delete 删除数组的区别？
var a=[1,2,3,4]var b=[1,2,3,4]delete a[0]console.log(a) //[empty,2,3,4]this.$delete(b,0)console.log(b) //[2,3,4]
复制代码
虚拟 DOM 的优缺点？
优点：
保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。
缺点:
Vue 中 computed 和 watch 有什么区别？
计算属性 computed： （1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数； （2）计算属性内不支持异步操作； （3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法； （4）计算属性是自动监听依赖值的变化，从而动态返回内容。
侦听属性 watch： （1）不支持缓存，只要数据发生变化，就会执行侦听函数； （2）侦听属性内支持异步操作； （3）侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性； （3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。
extend 有什么作用
这个 API 很少用到，作用是扩展组件生成一个构造器，通常会与 $mount 一起使用。
// 创建组件构造器let Component = Vue.extend({ template: "<div>test</div>" });// 挂载到 #app 上new Component().$mount('#app')// 除了上面的方式，还可以用来扩展已有的组件let SuperComponent = Vue.extend(Component);new SuperComponent({ created() { console.log(1); },});new SuperComponent().$mount("#app");
复制代码
你觉得 vuex 有什么缺点
分析
相较于redux，vuex已经相当简便好用了。但模块的使用比较繁琐，对ts支持也不好。
体验
使用模块：用起来比较繁琐，使用模式也不统一，基本上得不到类型系统的任何支持
const store = createStore({ modules: { a: moduleA }})store.state.a // -> 要带上 moduleA 的key，内嵌模块的话会很长，不得不配合mapState使用store.getters.c // -> moduleA里的getters，没有namespaced时又变成了全局的store.getters['a/c'] // -> 有namespaced时要加path，使用模式又和state不一样store.commit('d') // -> 没有namespaced时变成了全局的，能同时触发多个子模块中同名mutationstore.commit('a/d') // -> 有namespaced时要加path，配合mapMutations使用感觉也没简化
复制代码
回答范例
vuex利用响应式，使用起来已经相当方便快捷了。但是在使用过程中感觉模块化这一块做的过于复杂，用的时候容易出错，还要经常查看文档
比如：访问state时要带上模块key，内嵌模块的话会很长，不得不配合mapState使用，加不加namespaced区别也很大，getters，mutations，actions这些默认是全局，加上之后必须用字符串类型的 path 来匹配，使用模式不统一，容易出错；对 ts 的支持也不友好，在使用模块时没有代码提示。
之前Vue2项目中用过vuex-module-decorators的解决方案，虽然类型支持上有所改善，但又要学一套新东西，增加了学习成本。pinia出现之后使用体验好了很多，Vue3 + pinia会是更好的组合
原理
下面我们来看看vuex中store.state.x.y这种嵌套的路径是怎么搞出来的
首先是子模块安装过程：父模块状态parentState上面设置了子模块名称moduleName，值为当前模块state对象。放在上面的例子中相当于：store.state['x'] = moduleX.state。此过程是递归的，那么store.state.x.y安装时就是：store.state['x']['y'] = moduleY.state
//源码位置 https://github1s.com/vuejs/vuex/blob/HEAD/src/store-util.js#L102-L115if (!isRoot && !hot) { // 获取父模块state const parentState = getNestedState(rootState, path.slice(0, -1)) // 获取子模块名称 const moduleName = path[path.length - 1] store._withCommit(() => { // 把子模块state设置到父模块上 parentState[moduleName] = module.state })}
复制代码
请说出 vue cli 项目中 src 目录每个文件夹和文件的用法
assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件
Vue computed 实现
实现时，主要如下
初始化 data， 使用 Object.defineProperty 把这些属性全部转为 getter/setter。
初始化 computed, 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter，使用 Object.defineProperty 转化。
Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性重新计算。
若出现当前 computed 计算属性嵌套其他 computed 计算属性时，先进行其他的依赖收集
Vue-router 导航守卫有哪些
如何从真实 DOM 到虚拟 DOM
涉及到 Vue 中的模板编译原理，主要过程：
将模板转换成 ast 树， ast 用对象来描述真实的 JS 语法（将真实 DOM 转换成虚拟 DOM）
优化树
将 ast 树生成代码
评论