Vue学习笔记——一、MVVM

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操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题