zoukankan      html  css  js  c++  java
  • 响应式原理

    尤玉溪遍历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操作.
     
     
  • 相关阅读:
    努力 加油
    大总结(全文手打)加深记忆 表单 注册页面的第一次制作 小白一只多多包含
    购物栏
    三级轮播
    图片轮播
    啊!!苦等,博客终于通过了!!
    SQL升级Oracle挖的Null坑,你懂的!
    关于master..xp_cmdshell’的几个错误_解决办法(转)
    班级博客
    图片系统架构思考之一:删除图片--不容忽视
  • 原文地址:https://www.cnblogs.com/jiaqi666/p/13267624.html
Copyright © 2011-2022 走看看