VUE相关整理

VUE相关

VUE基础知识

1.MVVM

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

2.响应式数据的原理

• 核心点:Object.defineProperty
• 默认Vue在初适化数据 时,会给data中的属性使用Object.defineProperty重新定义多有属性,当页面取到对应属性时,会进行依赖收集(收集当前组件的watcher)如果属性会发生变化会通知相关依赖进行更新操作（发布订阅者）.

3.v-show与v-if的区别

实现本质:

• v-show:通过display:none和diaplay:block之间切换
• v-if:通过DOM节点插入,删除来实现切换

性能对比:

• v-if:切换时需要删除,插入节点开销大,如果不频繁切换,渲染用v-if,若初次渲染值为false不会插入节点渲染会节约性能.
• v-show:初始渲染开销大,就算是false时,也会渲染,但是在切换时只是改变延时,消耗少,在频繁切换时用v-show

4.方法调用 computed watch区别

方法:页面数据每次重新渲染都回重新执行,性能消耗大,

computed:是计算属性,依赖其他属性的计算值,并且computed的值有缓存,只有当计算值变化才会返回内容

watch:监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作(异步请求的时候要用到watch)

总结:

一般不用方法

一般来说需要依赖的属性来动态偶去值的时候可以使用computed

对于监听到值的变化需要做一步操作或开销较大操作时用watch

想到购物车中的使用

5.生命周期 钩子函数

• beforeCreate 该钩子是new Vue（）之后出发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问
• created 该钩子是实例创建完成后发生的，当前阶段已经完成数据观测，也可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做初始化数据的获取，在当前阶段无法对DOM进行交互
• beforeMount 发生在挂载之前，在这之前template模板导入渲染函数编译，当前阶段的DOM已经创建完成，即将开始渲染此时可以对数据进行更改，不会触发upddated
• mounted 在挂载完成后发生，在当前阶段，真实的DOM挂载完毕，数据完成 双向绑定，可以访问DOM节点，使用$refs属性对DOM进行操作
• beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟DOM重新渲染之前触发，这个阶段进行数据更改，不会造成重新渲染
• updated 发生在更新完成之后，当前阶段的组件DOM更新完成，在此期间更改数据，可能导致无线循环的更新
• beforeDestory 发生的实例销毁之前，当前阶段实例完全可以被使用，进行收尾工作，比如清理定时器
• destoryed 发生在实例销毁之后，dom就是一个空壳，组件已经被拆散，数据绑定为卸载，监听被移出，子实例也被销毁

6.nextTick实现原理

在下次DOM更新循环结束之后执行延迟回调。

7.组件中data为啥是函数

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

8.keep-alive

keep-alive可以实现组件缓存，当组件切换时不会对当前组价进行卸载

常用的的两个属性include/exclude，允许组件有条件的进行缓存

两个生命周期actived、dectivated，用来得知当前组件是否处于活跃状态。

keep-alive的中还运用了LRU算法

9.v-if与v-for为啥不能连用

优先级问题 v-for比v-if优先执行，是否v-if的值是否为true，他遍历，一般将用v-if嵌套v-for使用

不想要v-if的div包裹，可以用template标签

造成不不要的性能浪费

10.父子组件通信的方式

（1） Props+$emit

（2）回调函数（callback）

（3）$parent+$children

(4)provide+inject

11.vue中组件生命周期额调用顺序

组件调用的顺序是先父后子，渲染完成的顺序是先子后父

组件的销毁操作是先父后子，销毁完成的顺序是先子后父

加载渲染过程

父beforcreate > 父created >父 beforeMount >子beforeCreate >子 created >子beforemounted >子mounted >父mounted

子组件更新过程

父beforeUpdate > 子beforeUpdate >子 updated >父updayed

销毁过程

父beforeDestory>子beforeDestory >子destoryed>父 destoryed

12. Vue中性能的优化

• 减少data中的数据，data中数据都会增加getter和setter，会手机对应的watcher
• v-if和v-for不能连用（v-for优先级比v-if的高，会优先先执行，占内存）
• SPA页面采用keep-alive缓存组件
• 防抖、节流
• 图片懒加载
• 长列表滚动到可视区域动态加载