一篇Vue、React重点详解大全.docx

第

一篇Vue、React重点详解大全

目录Vue生命周期MVVM双向绑定原理虚拟domv-for为什么要用keynextTickv-show、v-if的区别vue单页面应用如何首页优化Vue的父组件和子组件生命周期钩子执行顺序是什么Vue中的computed是如何实现的React不同之处vue和react的区别

Vue

生命周期

vue2:

总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined。在created阶段，vue实例的数据对象data有了，el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：当data变化时，会触发beforeUpdate和updated方法。销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

vue3:

beforeCreate-使用setup()created-使用setup()beforeMount-onBeforeMountmounted-onMountedbeforeUpdate-onBeforeUpdateupdated-onUpdatedbeforeDestroy-onBeforeUnmountdestroyed-onUnmountederrorCaptured-onErrorCaptured

MVVM

mvvm是一种设计思想。

Model代表数据模型，可以在model中定义数据修改和操作的业务逻辑;

view表示ui组件，负责将数据模型转换为ui展现出来，它做的是数据绑定的声明、指令的声明、事件绑定的声明。

而viewModel是一个同步view和model的对象。

在mvvm框架中，view和model之间没有直接的关系，它们是通过viewModel来进行交互的。

mvvm不需要手动操作dom，只需要关注业务逻辑就可以了。

mvvm的核心是数据劫持、数据代理、数据编译和发布订阅模式。

mvvm和mvc的区别在于：mvvm是数据驱动的，而MVC是dom驱动的。

mvvm的优点在于不用操作大量的dom，不需要关注model和view之间的关系，而MVC需要在model发生改变时，需要手动的去更新view。

大量操作dom使页面渲染性能降低，使加载速度变慢，影响用户体验。

双向绑定原理

vue2是利用ES5的Object.defineProperty，

局限：只能监听对象属性的变化；不能利用索引直接设置一个数组项,也不能修改数组的长度

Object.defineProperty(object,key,{

get(){returnbValue;},

set(newValue){bValue=newValue;},

enumerable:true,

configurable:true

});

Vue3.0中的响应式采用了ES6中的Proxy方法，可以监听对象某个属性值的变化，还可以监听对象属性的新增和删除，而且还可以监听数组。

varproxy=newProxy({},{

get:function(target,propKey){

return35;

set:function(obj,prop,value){

obj[prop]=value;

returntrue;

});

虚拟dom

虚拟dom本质是将目标所需的UI通过数据结构虚拟地表示出来，保存在内存中，然后将真实的DOM与之保持同步。

在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分。

虚拟DOM在vue中主要提供与真实节点对应的虚拟节点vnode,然后需要将vnode和oldVnode进行比对，然后更新视图，对比两个虚拟节点的算法是patch算法。

(在vue里面diff算法就是通过patch函数来完成的，所有有的时候也叫patch算法.)

v-for为