Vue最全知识点《基础到进阶，覆盖vue3.0，建议收藏》

向右看齐 2022-11-16 05:50 131阅读 0赞

### 前言 ###

本篇文章纯属笔记型文章，是对vue知识的整理，对自己有很大帮助才分享出来。有需要的可以点击领取电子档

> [点击此处，领取Vue知识点电子档][Vue]

### Vue3.x响应式数据原理 ###

*  **Vue3.x改用Proxy替代Object.defineProperty**。
 *  因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
 *  Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
    
     *  判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
     *  监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

### vuex的action有返回值吗？返回的是什么？ ###

*  store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
 *  Action 通常是异步的，要知道 action 什么时候结束或者组合多个 action以处理更加复杂的异步流程，可以通过定义action时返回一个promise对象，就可以在派发action的时候就可以通过处理返回的 Promise处理异步流程

> 一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返  
> 回的 Promise 才会执行。

### 为什么 Vuex的mutation中不能做异步操作？ ###

*  Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
 *  每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

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

*  当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费
 *  这种场景建议使用 computed，先对数据进行过滤

### 组件中的data为什么是一个函数？ ###

*  一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。
 *  如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

### nextTick的实现原理是什么？ ###

*  在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 nextTick 来获取更新后的 DOM。
 *  nextTick主要使用了宏任务和微任务。
 *  根据执行环境分别尝试采用Promise、MutationObserver、setImmediate，如果以上都不行则采用setTimeout定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

### Vue不能检测数组的哪些变动？Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？ ###

*  Vue 不能检测以下数组的变动：
    
     *  第一类问题  
        // 法一：Vue.set Vue.set(vm.items, indexOfItem, newValue)  
        // 法二：Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
     *  第二类问题，可使用 splice：vm.items.splice(newLength)
     *  当你利用索引直接设置一个数组项时，例如vm.items\[indexOfItem\] = newValue
     *  当你修改数组的长度时，例如：vm.items.length = newLength  
        解决办法：
 *  vm. $set 的实现原理是：
    
     *  如果目标是数组，直接使用数组的 splice 方法触发相应式；
     *  如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

### 说一下你对Vue的生命周期的理解 ###

*  简单回答
    
     *  beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、  
        destroyed。
     *  keep-alive 有自己独立的钩子函数 activated 和 deactivated。
 *  复杂回答  
    **生命周期**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center]

### Vue中组件生命周期调用顺序是什么样的？ ###

*  组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
 *  组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

### 你的接口请求一般放在哪个生命周期中？ ###

*  可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
 *  但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
    
     *  能更快获取到服务端数据，减少页面loading 时间；
     *  ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

### vue路由hash模式和history模式实现原理分别是什么，他们的区别是什么？ ###

*  hash 模式：
    
     *  \#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面
     *  通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。
 *  history 模式：
    
     *  history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和replaceState，这两个 API可以在改变url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作
 *  区别
    
     *  url 展示上，hash 模式有“\#”，history 模式没有
     *  刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由
     *  兼容性，hash 可以支持低版本浏览器和 IE。

### 说说你对keep-alive组件的了解 ###

*  keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
    
     *  一般结合路由和动态组件一起使用，用于缓存组件；
     *  提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
     *  对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center 1]

### 最后 ###

从0基础开始的html+css+js。jQuery，Ajax，node，vue框架等项目实战视频、全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：**[\[学习前端，我们是认真的\]][Vue]****划重点，免费领取**

[Vue]: https://jq.qq.com/?_wv=1027&k=KYoY4iU6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/bd8d7c92898549a7bb5072a494e93db3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/8392f28dd3d641978d74831d4fc5e905.png