Vue从零开始01——Vue双向绑定原理和MVVM

最新推荐文章于 2024-12-18 15:01:02 发布

没有什么时间是比现在合适的

最新推荐文章于 2024-12-18 15:01:02 发布

阅读量273

点赞数

分类专栏： Vue 文章标签： Vue 双向绑定

本文链接：https://blog.csdn.net/fangxuan1509/article/details/103378043

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue是一个主张较弱的渐进式框架，什么是主张弱的渐进式框架呢？主张弱和渐进式说的都是，可以灵活的选取你需要用的东西和不需要用的东西，需要用的就引进来，不需要用的就不引，所有的一切都是由我们自己决定的。比如说，我们只是用到声明式渲染，我们只需要引入Vue.js就可以了，如果是要做一个spa只需要引入Vue-router就行了，如果是需要对全局的状态进行统一的管理，那只需要引入Vuex就可以了。

Vue可以在任意类型的项目中使用，使用成本低，灵活，主张较弱，并且庞大的生态圈提供给开发者各种各样的开源插件，非常的方便。

第一个实例

<div id="app">{{message}}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
	//每一个应用都是从创建一个实例开始的
	//声明式渲染：声明一条数据然后利用特殊的模板语法（mustacher语法）将其渲染都页面中
	new Vue({
		el:"#app",//挂载点
		data:{
			message:'hello world!'
		}
    })
</script>

MVVM框架

Vue是一个MVVM为基础的JavaScript框架，MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel： 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM：

1、各部分之间的通信，都是双向的。

2、View 与 Model 不发生联系，都通过 ViewModel传递。

3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 ViewModel非常厚，所有逻辑都部署在那里。

<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        //MVVM设计模式简单的说就是实现了数据驱动的自动更新。核心就是ViewModel中实现的数据的双向绑定。对数据进行数据监听。
        el:"#app",//挂载点
        data:{
            message:'hello world!'
        }
    })
</script>

Vue的双向绑定原理：

Vue在创建vm的时候，会将数据配置到实例当中，然后通过Object.defineProperty对数据进行处理，为数据动态的添加了getter和setter方法，当获取数据的时候，触发对应的getter方法，当设置数据的时候触发对应的setter方法。从而进一步触发vm的watcher方法，然后数据更改了，vm就会进一步触发视图更新。

Object.defineProperty是ES5里面提供的方法，IE678是不支持的，所以vue是不能再IE678中使用的。

Object.defineProperty（）

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>