Vue学习笔记——一、MVVM

糖糖23汤汤

于 2020-05-07 22:22:42 发布

阅读量280

点赞数

分类专栏： Vue学习

本文链接：https://blog.youkuaiyun.com/weixin_43950643/article/details/105983253

版权

Vue学习专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了MVVM(Model-View-ViewModel)设计模式，解释了其如何通过双向数据绑定简化前端开发流程，减少DOM操作，提升页面渲染性能。对比MVC模式，MVVM使开发者更专注于业务逻辑，避免直接操作DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. MVVM

//此处 new Vue() 得到的VM实例就是MVVM中的 VM 视图，提供了双向数据绑定的能力
const vm = new Vue({
    el:'#app', //此处el属性指定的元素就是MVVM中的 V 视图
    data:{ //此处的data属性就是MVVM中的 M 视图
        msg:'hello'
    }
})

MVVM是一种设计思想
- Model(数据模型：用来存储数据)
- View(视图层：用来展示UI界面和响应用户交互)
- ViewModel通过双向数据绑定把View和Model连接起来，一方面它实现了data binding，也就是数据绑定，将model的改变实时的反应到view中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生了一些事件（点击、滚动、touch等）时，可以监听，并在需要的情况下改变对应的data；所以开发者只需关注业务逻辑，不需要操作DOM
MVVM与MVC的区别：
- 主要就是MVC中的controller演变成mvvm中的viewmodel
- mvvm主要解决了mvc中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题