Vue笔记（一） Vue的MVVM

最新推荐文章于 2022-12-05 15:09:44 发布

印第安老斑鸠啾

最新推荐文章于 2022-12-05 15:09:44 发布

阅读量617

点赞数 1

分类专栏： vue 前端文章标签： vue html web vue.js javascript

本文链接：https://blog.csdn.net/KobeBryant2488/article/details/104802577

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

Vue中的MVVM

其实学完vue并自己手写几个完整项目也有一段时间了，现在回望发现除了老师的ppt自己没有写下什么笔记，在项目和基础知识中遇到的问题也没有统一记录，遂决定现在开始一点点回顾学习的内容，记录心得理解和注意事项，供大家学习和参考指正。学习的课程有某马和王元红coderwhy老师的视频。

1.背景及前端历史

最初的超文本标记语言HTML页面是完全静态的页面。随着技术的发展这显然不能满足展示多样性页面的要求，要浏览器动态修改html页面，于是JavaScript出现了。
原生的js操作DOM是很复杂的，然后出现了jQuery库，封装了易用的api。这就是MVC的代表。
MVC是Model-View-Controller的简写，即模型-视图-控制器结构。模型指后端存储的数据，视图即用户看到的页面，而控制器是应用程序中处理用户交互的部分，换句话说就是在Controller里面把Model的数据赋值给View。这样的数据通信是单向的。
MVC
随着大前端时代的到来，jquery因为业务逻辑性不强，维护性可复用性等很差，将逐步被三大框架Vue，Angular，React所取代。

2.什么是MVVM

与MVC相对，MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。其中模型和视图的含义都和MVC相同。而视图模型是mvvm模式的核心，它是连接view和model的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。这就是数据的双向绑定。
MVVCM
基于MVVC的vue和jquery主要有区别：数据和视图的分离，解耦（开放封闭原则）；专注于数据层，只关心数据变化，DOM操作被封装。响应式意味着有模型中数据发生变化时，所有用到它的地方都会发生更新。
以下是vue官方文档对响应式原理的解释。
深入响应式原理
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
看到这里如果你还有疑惑，来康康我这个例子^^。

3.响应式实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>counter</title>
</head>
<div id="count">
    <h2>已点击：{{count}}</h2>
    <button @click="increase">+</button>
</div>
<body>
<script src="vue.js"></script>
<script>
    let obj = {
        count: 0
    };
    new Vue({
        el: '#count',
        data: obj,
        methods: {
            increase(){
                this.count++;
            }
        }
    })
</script>
</body>
</html>

data中绑定了count，并通过mustache语法显示在html页面中。这是model层向view的通信。我们给按钮绑定click事件，这样当点击时，在方法中对数据count++。而在increase方法中，count一改变，对应html页面中，显示的数据也会自动更新。即view中DOM的操作改变了model中的数据。这就是数据的双向绑定。
觉得还可的话点个赞8 (^__)