响应式原理

尤玉溪遍历data是为了构建出一套响应式系统

劫持页面中所有声明式变量，从而知道他们发生改变，进而形成响应式系统。

 

data中声明式的变量，双向绑定(响应式)

Vue构建的这样一个系统，就叫做响应式系统.

放在Data里的数据都有响应式功能

 

之前MVC-----后端独立完成(数据组装发生在后端)

C可以控制器，也可以理解成路由

 

MVP

 

网页Web就是M+V组成

 

MVVM(框架)
M - Model 模型(数据)
V - View 视图(DOM)
VM - 视图模型(虚拟DOM)即vue实例中的声明式变量
DOM操作最耗费性能的一种

现在的数据都是动态渲染的，没有静态的，动态渲染就是DOM操作的一个过程，DOM操作又是最耗费性能的操作，MVVM就应运而生。

 

 

data中声明式的变量，双向绑定(响应式)
Vue构建的这样一个系统，就叫做响应式系统.
放在Data里的数据都有响应式功能

 

 虚拟DOM是在挂载时创建(beforemount   mounted);创建之后存放在内存里，形式是一个json文件,一个基于真实DOM的文件描述。

beforemounted和mounted里创建json文件，形成虚拟dom，我们称此为VM，页面不刷新，则此json文件一直存在内存里，当vue里任何声明式变量发生变化时，vue会复制一份新的VM，将两者进行Diff运算-----------------------------Diff运算发生在BeforeUpdate 和 Updated之间

var dirty = Diff(vm1,vm2);

遍历两个虚拟dom，找出最小差异，值存储在dirty里的值，通知vue去更新dom。

和Jquery相比，Vue极大减少了DOM操作.

 

 

基础知识：

①:响应式系统，指令，响应式原理.双向绑定

②:组件化开发。

 

PS:v-if和v-for最好不要一起使用.

 

列表循环    一定要加 

<div v-for='item in arr'  :key='item._id'>

</div>

有助于性能优化,如果不加key，做一个删除操作，在做diff运算时，vue找不到那个要删除的item，就会将整个列表进行渲染，从而浪费dom操作，key就起了标识的作用，减少DOM操作.