2022-08-27 vue2常见原理分析

总领

1:vue的mvvm原理

m:model数据模型层   v:view视图层  vm:ViewModel

MVVM让视图与viewmodel直接的关系特别的紧密,就是为了解决mvc反馈不及时的问题  


双向数据绑定 和 ajax/json的数据绑定。

 mvvm与mvc最大的区别:

MVVM实现了view与model的自动同步,也就是model属性改变的时候, 我们不需要再自己手动操作dom元素去改变view的显示,而是改变属性后该属性对应的view层会自动改变。


2: 双向数据的绑定原理

        Object.defineProperty的缺点

            1:深度监听需要递归到底,一次性计算量大

            2:无法监听新增属性、删除属性(要使用Vue.set  Vue.delete)

            3:无法原生监听数组,需要特殊处理

         双向数据绑定原理


3: observer/deper/watcher


详情可见


4:vue的模板编译

                解析阶段:将“HTML”模板解析成AST语法树;

                优化阶段:从AST语法树中找出静态子树并进行标记(被标记的静态子树在虚拟dom比对时会被忽略,从而  提高虚拟dom比对的性能);

                  代码生成阶段:通过AST生成代码字符串,并最终生成render函数。

详情


5:diff算法

详情

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、对于MVVM的理解 Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View: 代...
    你瞅瞅你写的bug阅读 3,199评论 0 1
  • 0 HTML5相关 websocket WebSocket 使用ws或wss协议,Websocket是一个持久化的...
    可爱多小姐阅读 4,438评论 0 0
  • 一、组件 个人理解:为了复用代码而进行封装代码,以及封装代码块之间的通信 1、全局组件 注:(1)、table标签...
    wsgdiv阅读 3,188评论 1 2
  • 0.链接 状态码精选 https://www.cnblogs.com/yaya-003/p/12653602.ht...
    蛋挞xjc阅读 3,456评论 0 0
  • 1 升级/更新 uniapp升级/更新的文档 uni-app资源在线升级/热更新 以及 uni-app 整包升级/...
    司空洛一阅读 9,145评论 0 0

友情链接更多精彩内容