VUE复习

MVVM即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

MVVM描述

MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。

MVC描述

它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

区别

严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。

Vue.js与MVVM的关系

MVC与MVVM

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果

为什么data是函数

props$emit/$on（--）$children（--）/$parent$attrs/$listeners（--）ref$rooteventbusvuex

举例

根据组件之间关系讨论组件通信最为清晰有效父子组件props/$emit/$parent/ref/$attrs兄弟组件$parent/$root/eventbus/vuex跨层级关系eventbus/vuex/provide+inject

归类

Vue组件之间通信方式有哪些

实践中不应该把v-for和v-if放一起在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常通常有两种情况下导致我们这样做：为了过滤列表中的项目 (比如 v-for=\"user in users\" v-if=\"user.isActive\")。此时定义一个计算属性 (比如 activeUsers)，让其返回过滤后的列表即可（比如users.filter(u=>u.isActive)）。为了避免渲染本应该被隐藏的列表 (比如 v-for=\"user in users\" v-if=\"shouldShowUsers\")。此时把 v-if 移动至容器元素上 (比如 ul、ol)或者外面包一层template即可。文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项。源码里面关于代码生成的部分，能够清晰的看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的。

v-if和v-for哪个优先级更高？

v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景v-show 适用于需要非常频繁切换条件的场景

扩展

v-if 和 v-show 的区别

描述过程

beforeCreate：通常用于插件开发中执行一些初始化任务created：组件初始化完毕，可以访问各种数据，获取接口数据等mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等。beforeUpdate：此时view层还未更新，可用于获取更新前各种状态updated：完成view层的更新，更新后，所有状态已是最新beforeunmount：实例被销毁前调用，可用于一些定时器或订阅的取消unmounted：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器

结合实践

VUE生命周期

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

如果实在要改变父组件的 prop 值 可以再 data 里面定义一个变量 并用 prop 的值初始化它 之后用$emit 通知父组件去修改

怎样理解 Vue 的单向数据流

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。  具体步骤：  第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化  第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图  第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:  1、在自身实例化时往属性订阅器(dep)里面添加自己  2、自身必须有一个update()方法  3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中绑定的回调，则功成身退。  第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

vue双向数据绑定的原理

computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容，它可以设置 getter 和 setter。watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。计算属性一般用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑

computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；method 调用总会执行该函数。

computed 和 watch 的区别和运用的场景

Vue 如何检测数组变化

v-model 是一个语法糖v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。

v-mode原理

Vue 修饰符有哪些

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

nextTick是等待下一次 DOM 更新刷新的工具方法。Vue有个异步更新策略，意思是如果数据变化，Vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上，此时如果想要获取更新后的DOM状态，就需要使用nextTick。开发时，有两个场景我们会用到nextTick：created中想要获取DOM时；响应式数据变化后获取DOM更新后的状态，比如希望获取列表更新后的高度。nextTick签名如下：function nextTick(callback?: () => void): Promise<void>所以我们只需要在传入的回调函数中访问最新DOM状态即可，或者我们可以await nextTick()方法返回的Promise之后做这件事。在Vue内部，nextTick之所以能够让我们看到DOM更新后的结果，是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面，这样等队列内部的更新函数都执行完毕，所有DOM操作也就结束了，callback自然能够获取到最新的DOM值。

nextTick 使用场景和原理

创建过程自上而下，挂载过程自下而上；即：parent createdchild createdchild mountedparent mounted之所以会这样是因为Vue创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加mounted钩子到队列，等到patch结束再执行它们，可见子组件的mounted钩子是先进入到队列中的，因此等到patch结束执行这些钩子时也先执行

Vue 子组件和父组件创建和挂载顺序

开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive：

缓存后如果要获取数据，解决方案可以有以下两种：beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnteractived：在keep-alive缓存的组件被激活的时候，都会执行actived钩子

keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行。

缓存组件使用keep-alive

Vue有一组默认指令，比如v-model或v-for，同时Vue也允许用户注册自定义指令来扩展Vue能力自定义指令主要完成一些可复用低层级DOM操作使用自定义指令分为定义、注册和使用三步：定义自定义指令有两种方式：对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在mounted和updated时执行注册自定义指令类似组件，可以使用app.directive()全局注册，使用{directives:{xxx}}局部注册使用时在注册名称前加上v-即可，比如v-focus我在项目中常用到一些自定义指令，例如：复制粘贴 v-copy长按 v-longpress防抖 v-debounce图片懒加载 v-lazy按钮权限 v-premission页面水印 v-waterMarker拖拽指令 v-draggablevue3中指令定义发生了比较大的变化，主要是钩子的名称保持和组件一致，这样开发人员容易记忆，不易犯错。另外在v3.2之后，可以在setup中以一个小写v开头方便的定义自定义指令，更简单了！

写过自定义指令吗 原理是什么

我们可能会有一些属性和事件没有在props中定义，这类称为非属性特性，结合v-bind指令可以直接透传给内部的子组件。这类“属性透传”常常用于包装高阶组件时往内部传递属性，常用于爷孙组件之间传参。比如我在扩展A组件时创建了组件B组件，然后在C组件中使用B，此时传递给C的属性中只有props里面声明的属性是给B使用的，其他的都是A需要的，此时就可以利用v-bind=\"$attrs\"透传下去。最常见用法是结合v-bind做展开；$attrs本身不是响应式的，除非访问的属性本身是响应式对象。vue2中使用$listeners获取事件，vue3中已移除，均合并到$attrs中，使用起来更简单了。

$attrs和$listeners的作用

v-once是vue的内置指令，作用是仅渲染指定组件或元素一次，并跳过未来对其更新。如果我们有一些元素或者组件在初始化渲染之后不再需要变化，这种情况下适合使用v-once，这样哪怕这些数据变化，vue也会跳过更新，是一种代码优化手段。我们只需要作用的组件或元素上加上v-once即可。vue3.2之后，又增加了v-memo指令，可以有条件缓存部分模板并控制它们的更新，可以说控制力更强了。编译器发现元素上面有v-once时，会将首次计算结果存入缓存对象，组件再次渲染时就会从缓存获取，从而避免再次计算。

v-once的使用场景

VUE API

权限管理一般需求是页面权限和按钮权限的管理具体实现的时候分后端和前端两种方案：前端方案会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组，需要认证的页面在其路由的meta中添加一个roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes(accessRoutes)方式动态添加路由即可。后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息，可谓一劳永逸！

项目权限管理

vuex 是专门为 vue 提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

模块 

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。命名空间：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

Vuex 为什么要分模块并且加命名空间

VUEX

VUE综合应用

虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个 JavaScript 对象，只不过它是通过不同的属性去描述一个视图结构。

vdom是什么

将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能直接操作 dom 是有限制的，比如：diff、clone 等操作，一个真实元素上有许多的内容，如果直接对其进行 diff 操作，会去额外 diff 一些没有必要的内容；同样的，如果需要进行 clone 那么需要将其全部内容进行复制，这也是没必要的。但是，如果将这些操作转移到 JavaScript 对象上，那么就会变得简单了。操作 dom 是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象 VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。方便实现跨平台同一 VNode 节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等Vue3 中允许开发者基于 VNode 实现自定义渲染器（renderer），以便于针对不同平台进行渲染。

引入vdom的好处

vdom如何生成？在vue中我们常常会为组件编写模板 - template， 这个模板会被编译器 - compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。

挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。

在后续的diff中的作用

vdom如何生成，又如何成为dom

对虚拟DOM的理解

Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过patch方法转换

做什么

.vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟DOM，通过比对两者找到变化的地方，最后将其转化为对应的DOM操作。

它何时执行

patch过程是一个递归过程，遵循深度优先、同层比较的策略；以vue3的patch为例：首先判断两个节点是否为相同同类节点，不同则删除重新创建如果双方都是文本则更新文本内容如果双方都是元素节点则递归更新子元素，同时更新元素属性更新子节点时又分了几种情况：新的子节点是文本，老的子节点是数组则清空，并设置文本；新的子节点是文本，老的子节点是文本则直接更新文本；新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla

具体执行方式

编译期优化patchFlags、block等

拔高：说一下vue3中的优化

diff算法

template 到 render 处理过程

目的是为了高效地更新虚拟DOM。key主要用于dom diff算法，diff算法为同级比较，比较当前标签上的key还有他当前的标签名，如果key和标签名都一样时只移动，不会重新创建元素和删除元素没有key地时候默认使用就地复用策略。如果数据的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。

v-for 为什么要加 key

第一步是将 模板字符串 转换成 element ASTs（解析器）第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

template 转化为 render 函数的过程

原理源码

VUE3新特性

Vue3

很多时候，我们需要将给定匹配模式的路由映射到同一个组件，这种情况就需要定义动态路由。

什么是动态路由

什么时候使用动态路由，怎么定义动态路由

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

参数如何获取

参数还可以有多个，例如/users/:username/posts/:postId；除了 $route.params 之外，$route 对象还公开了其他有用的信息，如 $route.query、$route.hash 等。

细节、注意事项

vue-router动态路由

全家桶

vue面试题