Vue-笔记-粘自-伊人a

简述MVVM

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成了ViewModel-Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

Vue的生命周期

每个Vue实例在创建时都会经过一系列的初始化过程，vue的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件。

• create阶段：vue实例被创建 beforeCreate: 创建前，此时data和methods中的数据都还没有初始化 created： 创建完毕，data中有值，未挂载

• mount阶段： vue实例被挂载到真实DOM节点 beforeMount：可以发起服务端请求，去数据 mounted: 此时可以操作Dom

• update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染 beforeUpdate updated

• destroy阶段：vue实例被销毁 beforeDestroy：实例被销毁前，此时可以手动销毁一些方法 destroyed

computed与watch

watch 属性监听：是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用。

computed 计算属性：属性的结果会被缓存，当computed中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed中的函数必须用return返回最终的结果computed更高效，优先使用。

使用场景：computed：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能

watch：当一条数据影响多条数据的时候使用，例：搜索数据。

v-for中key的作用

• key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;

• Vue在patch过程中判断两个节点是否是相同节点,key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，Vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能;

• 从源码中可以知道，Vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key,它的值就是undefined，则可能永 远认为这是两个相同的节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

vue组件的通信方式

父子组件通信

父->子props，子->父 $on、$emit 获取父子组件实例 parent、children $Ref 获取实例的方式调用组件的属性或者方法 Provide、inject 官方不推荐使用，但是写组件库时很常用

兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex

跨级组件通信

$attrs、$listeners Provide、inject

常用指令

• v-if：判断是否隐藏；
• v-for：数据循环出来；
• v-bind:class：绑定一个属性；
• v-model：实现双向绑定

nextTick的实现

1. nextTick是Vue提供的一个全局API,是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM；
2. Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启1个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中-次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用；
3. 比如，我在干什么的时候就会使用nextTick，传一个回调函数进去，在里面执行dom操作即可；
4. 我也有简单了解nextTick实现，它会在callbacks里面加入我们传入的函数，然后用timerFunc异步方式调用它们，首选的异步方式会是Promise。这让我明白了为什么可以在nextTick中看到dom操作结果。

keep-alive的实现

作用：实现组件缓存

钩子函数：

`activated `组件渲染后调用
`deactivated `组件销毁后调用
复制代码

原理：Vue.js内部将DOM节点抽象成了一个个的VNode节点，keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件（pruneCache与pruneCache）的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。

配置属性：

include 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存

max 数字、最多可以缓存多少组件实例

vuex、vue-router实现原理

vuex是一个专门为vue.js应用程序开发的状态管理库。 核心概念：

• state(单一状态树) getter/Mutation显示提交更改state
• Action类似Mutation，提交Mutation，可以包含任意异步操作。
• module(当应用变得庞大复杂，拆分store为具体的module模块)

作者：伊人a
链接：juejin.cn/post/698942… 来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。