Vue MVVM 模型

文章归档于:https://www.yuque.com/u27599042/front-end


  • MVVM 是 Vue 实现数据驱动视图和双向数据绑定的核心原理。
  • 在 MVVM 模型中,主要由如下三部分组成:
    • M:Model,模型,也就是要渲染到视图 View 上的数据
    • V:View,视图,数据渲染的位置
    • VM:ViewModel,视图模型,可以视为 Model 和 View 之间建立关系的桥梁,VM 是 MVVM 的核心,VM 将要渲染到视图上的数据 Model 和数据渲染的位置 View 联系在了一起
  • MVVM 模型实现了视图 View 和数据 Model 之间的解耦
  • 以 Vue 为例说明 MVVM 的工作原理:
    • 在 Vue 中,Vue 实例对象扮演的角色就是 MVVM 中的 VM,Vue 实例对象将 Model 中的数据通过数据绑定的方式渲染到视图 View 中,当数据源 Model 发生变化时,Vue 实例对象会触发对视图 View 的更新;同时,Vue 实例对象也会监听视图中的变化,当视图中与 Model 相关的数据值发生了修改,Vue 实例对象能够监听到此次变化,从而触发数据源 Model 中数据的同步
相关推荐
css趣多多5 分钟前
vue2项目改造为vue3遇到的问题以及解决办法
前端·vue.js·elementui
哆啦A梦15887 分钟前
Vue3魔法手册 作者 张天禹 09_props的使用
前端·vue.js·typescript
哆啦A梦158824 分钟前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
广州华水科技30 分钟前
单北斗变形监测在大坝安全和地质灾害预警中的应用与优势
前端
一叶星殇35 分钟前
Windows 下用 Nginx 部署 Vue + .NET WebApi 全流程实战
vue.js·windows·nginx
阿珊和她的猫43 分钟前
深入理解 Vue 3 的 `setup` 函数
前端·vue.js·状态模式
weixin199701080161 小时前
微店商品详情页前端性能优化实战
前端·性能优化
FindYou.1 小时前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue
feasibility.1 小时前
打造AI+准SaaS:中文法律检索分析平台
vue.js·人工智能·自然语言处理·django·sass·web·法律
星火开发设计1 小时前
STL 容器:vector 动态数组的全面解析
java·开发语言·前端·c++·知识