vue_basic

Question 1

MVVM模式是什么？

Answer 1

MVVM是Model-View-ViewModel的简写。
应用的UI以及基础表示和业务逻辑被分成三个独立的类：
1.视图，用于封装UI和UI逻辑；
2.视图模型，用于封装表示逻辑和状态；
3.以及模型，用于封装应用的业务逻辑和数据。

Question 2

MVVM模式优点

Answer 2

降低了代码的耦合性，提高了视图或者逻辑的重用性，因为视图和数据层都是独立的，不必因为谁而改变谁。
自动更新DOM，利用双向绑定，关注业务逻辑。

Question 3

MVVM模式缺点

Answer 3

bug调试困难，界面出现异常，可能是view或者model层发生错误，并且数据绑定的声明是无法进行打断点debug，可以用扩展的工具进行调试。
一个大的模块中model也会很大，会占用更多的内存，相应viewmodel的构建和维护也是成本。

Question 4

MVVM核心

Answer 4

双向绑定

Question 5

双向绑定是什么？

Answer 5

先说单向绑定，通过 JavaScript 控制 DOM 的展示，就是数据（Data）到模板（DOM）的绑定。
而双向绑定就是在这个基础上，模板到数据的绑定。

Question 6

vue2实现双向绑定

Answer 6

Vue2 的双向绑定设计模式基于观察者模式和发布订阅模式实现，通过数据响应式模块、模板编译模块和视图渲染模块的协作，实现了数据和视图的双向绑定功能。
其中，数据响应式模块和模板编译模块是观察者模式，视图渲染模块是发布订阅模式。

Question 7

vue3实现双向绑定

Answer 7

响应式监测机制的改变，用es6的proxy来进行代理，解决了vue2中，基于Object.defineProperty所带来一大部分的问题。

Question 8

vue2使用的响应式监测机制，会带来什么问题？为什么？有没有解决办法？

Answer 8

1.当添加或者删除对象的属性时，Object.definePropert监听不到，只能通过set来处理，例如：this.set来处理，例如：this.set来处理，例如：this.set( this.data，’job’，’teacher’ )，而proxy是是直接代理整个对象，而非对象的属性，可以监听到添加或者删除。
2.无法检测到数组的长度的变化，proxy代理数组，可以解决。

Question 9

vue2、3除了使用的响应式监测机制不同外，还有什么区别？

Answer 9

1.生命周期的使用上的不同，setup围绕 beforeCreate 和 created 生命周期钩子运行，在script setup语法糖里进行使用，调用生命周期钩子函数
2. vue3是composition api，vue2是options api,一个逻辑会散落在文件不同位置，可读性差
3. teleport组件
4. 静态提升
5. 全局api也只能通过导入的方式进行调用，做到更好的treesharking(可能是调用了全局api却没有使用…)

Question 10

Vue3的静态提升是啥？

Answer 10

Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用
这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用

Question 11

SPA首页加载慢怎么解决

Answer 11

1.减小入口文件体积，常见的手段就是进行路由的懒加载，动态加载路由
2.合理利用静态资源本地缓存
3.按需加载UI组件
4.合理使用webpack等打包工具进行前端性能优化

Question 12

组件通信的方式

Answer 12

1.props:父组件传递数据给子组件
2.$emit：子组件通过触发自定义事件传递数据给父组件
3.ref:获取组件实例，调用其方法
4.EventBus：兄弟组件传值
5.provide和inject：全局通信
6.状态管理工具：vuex/pinia
7.本地存储localstorage

Question 13

Computed和Watch的区别

Answer 13

Computed:支持缓存，不支持异步，当有异步操作的时候，无法发起监听的作用，根据依赖的响应式数据动态计算而来的属性，它具有缓存和实时更新的特点，适用于需要进行复杂计算的场景。
Watch:支持异步，监听数据的变化，并在特定数据发生变化时执行自定义的回调函数，适用于需要执行异步操作或复杂逻辑的场景。

Question 14

keepalive是什么，有哪几种使用方式？

Answer 14

keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
使用方式：
1.动态组件
2.在vue-router中的应用include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存,优先级高于前者；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

Question 15

keepalive配合router的高级使用

Answer 15

router-view也是一个组件，如果直接被包在keepalive里面，那么所有路径匹配到的视图组件都会被缓存。

如果只想要router-view里面的某个组件被缓存，怎么办？
1. 使用 include/exclude
2. 使用 meta 属性

Question 16

keepalive配合vue-router和transition的高级使用

Answer 16

使用vue的transition组件，在定义router时设置meta.index数值来判断切换动画的使用哪种效果

使用vue的keepailve组件，在定义router时设置meta.keepalive数值来判断是否要进行组件的缓存

Question 17

为什么要有nextTick

Answer 17

nextTick的主要用是在下次DOM更新循环结束后执行回调函数，用处理DOM更新后的操作或者确获取到最新的DOM状态。

异步更新DOM：当你修改了Vue实例的数据后Vue会异步执行DOM更新。如果你想要在DOM更新完成后执行一些操作（例如获取更新后的DOM元素），可以使用nextTick()来确在DOM更新完成后执行回调函数。
更新后的DOM操作：有时候，你可能需要更新后的DOM上进行一些操作，例如获取某个元素的尺寸、位置等信息。于Vue的DOM更新是异步，直接在数据变化后立即访问DOM可能无获取到最新的结果。通过将操作放在nextTick()的调函数中，可以保在DOM更新完成后再进行相关操作。
批量更新优化：Vue在更新DOM时会对多个数据变化进行批量处理，以高性能。而nextTick()会将回调函数入到下一个DOM更新循中执行，这样可以将多个nextTick()回调函数合并为一个，减少必要的DOM操作，提高性能。

Question 18

怎么实现v-model？（Vue2 ）

Answer 18

Vue2 的双向绑定设计模式，基于观察者模式和发布订阅模式实现，通过数据响应式模块、模板编译模块和视图渲染模块的协作，实现了数据和视图的双向绑定功能。
其中，数据响应式模块和模板编译模块是观察者模式，视图渲染模块是发布订阅模式。

Question 19

了解过vue的编译流程吗？

Answer 19

1. parse解析阶段：使用正则对template模板进行解析，将标签、指令、属性等转化为AST抽象语法树
2. optimize优化阶段：遍历AST，对静态节点进行标记和提升，优化runtime的性能
3. generate生成阶段：将AST转化为render函数字符串

Question 20

Vue子组件和父组件的执行顺序

Answer 20

加载渲染过程：

父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted

更新过程：

父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

销毁过程：

父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destoryed

Question 21

VUEX-为什么要store.commit(‘add’)才能触发事件执行呢？ 可不可以进行直接调用mutation函数进行操作呢？

Answer 21

store类里根本没有mutation方法，只能通过调用commit方法来执行mutation里的函数列表。

Question 22

VUEX-为什么不可以直接对state存储的状态进行修改，只能通过调用函数的方式修改呢？

Answer 22

Vuex 通过强制限制对 store 的修改方式来确保状态的可追踪性。只有通过 mutation 函数才能修改 store 中的状态，这样可以轻松地跟踪状态的变化，也可以避免无意中从不同的组件中直接修改 store 导致的代码难以维护和调试的问题。

Question 23

VUEX-为什么存在异步调用的函数需要store.dispatch(‘asyncAdd’)函数才能完成呢？可以直接调用store.commit(‘asyncAdd’)嘛？如果不可以，为什么呢？

Answer 23

dispatch方法返回的是一个Promise对象，而commit方法没有返回值，完全进行的是同步代码的操作，虽然返回值可能适用的场景不多，但是这样设计的主要目的还是为了确保状态的可追踪性

Question 24

VUEX-createStore()和useStore()到底发生了什么？

Answer 24

当我们去调用 createStore()函数，其构造函数就会接收一个包含 state、mutations、actions 和 getters 函数的对象 options， 然后将它们保存到实例属性中,此时state中的值都会转换为响应式对象，同时遍历所有的getters函数，将其封装成computed属性并保存到实例属性getters中,而在main.js里调用了app.use(), install方法自动执行，将将当前 store 实例注册到 Vue.js 应用程序中，只需要调用useStore()就可以拿到全局状态管理的store实例了，可以靠inject和provide实现全局共享。

Question 25

vue-router怎么实现的？

Answer 25

RouterLink 组件实现的流程：

通过 props 组件通信的方式传递要重新指向的锚点
通过 a 标签来进行路由的转换
监听了 hashchange 事件，然后进行当前路由信息的更新

RouterView 组件实现的流程：

通过路由信息来获取当前路由的内容
调用 component 组件动态绑定来实现新组件内容的渲染

Question 26

了解路由吗

Answer 26

有前端路由和后端路由

Question 27

前、后端路由区别

Answer 27

后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍，比如京东页面就是个后端路由，他请求的就是一个页面。
对于前端路由来说，路由的映射函数通常是进行一些DOM的显示和隐藏操作

Question 28

前、后端路由，分别有什么优缺点

Answer 28

后端路由
优点是：安全性好，SEO好
缺点是：加大服务器的压力，不利于用户体验，代码冗合
前端路由
优点是：前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升
缺点是：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存，同样的不利于seo

Question 29

前端路由有几种方案呢？

Answer 29

两种，hash、history Api

Question 30

两种前端路由，有什么区别呢？

Answer 30

hash在地址栏中的表现有一个# 而history并没有
hash路由不会把#后面的内容发送给服务器，所以服务器不用在nginx做转发处理，history会带上完整路径，所以需要在nginx 404或者500的时候重定向到index.html
history的a链接也不会触发popstate事件，在vue或者react的router中都是对a链接做劫持组织默认事件然后重写的

Question 31

hash路由的实现原理

Answer 31

hash实现就是基于location.hash来实现的。
location.hash的值就是URL中#后面的内容，可以使用hashchange事件来监听hash的变化。

Question 32

history Api路由的实现原理

Answer 32

history 这个对象在html的时候新加入两个api history.pushState() 和 history.repalceState()
这两个 API可以在不进行刷新的情况下，操作浏览器的历史纪录。
唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录

Question 33

history 有啥api

Answer 33

除了，history.pushState() 和 history.repalceState()之外
还有，window.history.back() //后退
window.history.forward() //前进
window.history.go(1) //前进一部，-2回退两不，window.history.length可以查看当前历史堆栈中页面的数量

Question 34

history Api执行了，怎么监听呢？

Answer 34

有个监听事件
window.addEventListener(‘popstate’, function(event) { });
仅仅调用pushState方法或replaceState方法，并不会触监听事件，只有用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发。

Question 35

history Api，如何监听 pushState 和 replaceState 的变化呢？

Answer 35

可以使用 【new Event】创建2个全新的事件，事件名为pushState和replaceState，我们就可以在全局监听。
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e)
return history[type].apply(this, arguments);