[JavaScript知识库]vue常见面试题

vue3

vue3里为什么要用proxy api替代defineProperty api

????defineProperty api的局限性最大原因是它只能针对单例属性做监听。监听对象是对对象中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。在vue2中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到setter监听的。
????proxy api的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升。
????proxy api可以监听数组的索引和 length 属性；

讲讲composition api

????查阅我的另一篇博客vue3常用api

composition api与options api使用取舍

????不建议共用，会引起混乱。业务逻辑简单，用 Options API。33逻辑复杂，用 Composition API

teleport的作用

????teleport可以指定to属性，将其包裹的dom元素移动至指定的to属性dom内。

按需引入api

????import { reactive, toRefs } from ‘vue’;

vue2

为什么data是一个函数

????组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

vue组件通讯有哪些方式？

• props 和 $emit
• $parent 和 $children
• provide 和 inject
• $refs
• envetBus
• vuex
• 本地存储

一般在哪一步发送请求？

????如果不需要依赖dom，在created中调用异步请求。

v-if和v-show 的区别

????v-if 条件不满足时不渲染此节点，v-show 条件不满足时控制样式将此节点隐藏（display:none）。

$route 和 $router的区别

???? $route为路由信息对象，主要用于获取路由信息，如path、params、query等。
???? $router为路由实例对象，可以调用路由的跳转方法操作路由，如push、go等。

常用的vue内置指令

• v-bind
• v-on
• v-html
• v-text
• v-model
• v-if / v-else / v-else-if
• v-show
• v-for

常用的vue修饰符

• stop 阻止事件继续传播
• prevent 阻止标签默认行为
• capture 使用事件捕获模式
• self 只当在 event.target 是当前元素自身时触发处理函数
• once 事件只会触发一次

怎样理解vue的单项数据流

????数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。

computed和watch的区别和运用场景

????区别
????????computed 是计算属性，依赖其它属性计算值，并且 computed 的值有缓存。
????????watch 监听到值的变化就会执行回调。
????运用场景：
????????函数体内有异步用watch，监听路由变化用watch。

computed缓存原理

????当首次读取或依赖值发生变化后读取，computed会执行方法体计算结果，当依赖值无变化时读取，computed会直接返回上一次记录的结果。

v-if和v-for为什么不建议一起使用

????因为解析时先解析v-for后解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。

v-for为什么要加key

????标识组件的唯一性，高效的更新虚拟DOM。
????key主要用来做dom diff算法用的，比较当前标签上的key还有它当前的标签名。如果数据项的顺序被改变，key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。
????没有key的时候如果数据项的顺序被改变，vue不是移动Dom元素来匹配数据项顺序的改变，而是会重新创建元素和删除元素。

vuex的五个api

• state：存储数据
• actions：提交给mutation数据的方法，可以是异步的
• mutations：提交更新state的方法，是同步的
• getters：相当于修饰一个修饰方法，修饰返回state的值
• module：项目业务线大时分模块

父子组件生命周期钩子函数执行顺序

• 加载渲染过程
  父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 组件更新过程
  父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
• 销毁过程
  父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

vue2响应式数据的原理

????使用 Object.defineProperty 将属性进行劫持，当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存在它所依赖的 watcher （依赖收集）get，当属性变化后会通知自己对应的 watcher 去更新（派发更新）set。

如何检测数组变化

????修改数组的索引和长度无法监控，通过push、shift、pop、splice、unshift、sort、reverse变异方法修改数组才会触发数组对应的watcher进行更新。

v-model原理

????v-model=‘inputvVal’
????v-bind:value=‘inputvVal’ v-on:input=‘inputvVal = $event.target.value’

做过哪些vue的性能优化

• 不需要响应式的数据不要放在 data 中
• v-if 和 v-show 区分使用场景
• computed 和 watch 区分场景使用
• v-for 遍历必须加 key，key最好是id值
• 防止内部泄露，组件销毁后把全局变量和定时器销毁
• 图片懒加载
• 路由懒加载
• 第三方插件的按需加载
• 适当采用 kee
• p-alive 缓存组件
• 防抖、节流的运用

nextTick使用场景和原理

????在修改数据之后立即使用这个方法，获取更新后的 DOM。
????nextTick就是采用(promise、mutationObserver、setImmediate、setTimeout)包装的方法。

vue-router中路由模式和实现原理

• hash 模式
  就是url中#后面的东西。它的特点在于：hash虽然出现url中，但不会被包含在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
  可以为 hash 的改变添加监听事件，每一次改变hash都会在浏览器的访问历史中增加一个记录，利用hash的以上特点，就可以实现前端路由“更新视图但不重新请求页面”的功能。
• history 模式
  利用 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go 的基础上，他们提供了对历史记录进行修改的功能。
  当调用他们修改浏览器历史记录栈后，虽然当前url改变了，但浏览器不会刷新页面，这就为单页面应用前端路由“更新视图但不重新请求页面”提供了基础，但是刷新会出现 404 需要后端进行配置。

mvc和mvvm区别

????mvc和mvvm的区别并不是vm完全取代了c，只是在mvc的基础上增加了一层vm，只不过是弱化了c的概念，vm存在目的在于抽离c中展示的业务逻辑，而不是替代c，其它业务等还是应该放在c中实现。
????比如有一变量num需要展示在页面上，页面上又有点击事件可以改变num的值，这时候就是vm层的事情。但是业务还有一个定时器在执行一些页面上不需要的数据，那这就是c层的事情。

虚拟dom

????由于在浏览器中频繁操作真实dom是很耗费性能的，所以虚拟dom本质就是用一个原生的js对象去描述一个dom节点，是对真实dom的一层抽象。
????特点：

• 减少对真实DOM的操作。
• 能跨平台渲染。
• 首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。