通俗易懂讲解并手写一个vue数据双向绑定案例

语言: CN / TW / HK
ead>

问题描述

面试中,面试官除了问基础知识以外,还喜欢问一些框架原理。比如:你对vue的数据双向绑定mvvm是如何理解的?网上的部分贴子可能写的有点抽象,不便于快速阅读理解。本篇文章就使用通俗易懂的简单方式,来讲解并实现一个简单的vue数据双向绑定原理demo,希望对大家有一定的帮助

先复习基本知识

为了便于大家更好的理解下文数据双向绑定的代码,我们最好先复习一下旧知识,如果基础知识扎实的道友,可以直接跳过这一段。

DOM.children属性返回DOM元素有哪些元素子节点

代码:

```js

孙悟空

猪八戒

``` 示例图:

1.png

注意区分:DOM.childNodes得到所有的节点,比如元素节点、文本节点、注释节点;而,DOM.children只得到所有的元素节点。二者返回的都是一个伪数组,但伪数组有length长度,代表有多少个节点,且可以循环遍历,遍历的每一项都是一个dom元素标签!不过伪数组不能使用数组的方法

DOM.hasAttribute(key)/getAttribute(key)判断元素标签是否有key属性以及访问对应value值

代码:

```js

穿越火线

``` 示例图:

2.png

这两个api可以用来看标签上是否绑定了vue的指令,以及看看vue指令值是啥,以便于我们去与data中的相应数据做对应

DOM.innerHTML与DOM.innerText的区别

二者均可以修改dom的文本内容。innerHTML是符合W3C标准的属性,所以是主流使用的dom的api。而innerText虽然兼容性要好一些,不过主流还是innerHTML

代码:

```js

西游记

``` 示例图:

3.gif

DOM.innerHtml这个api可用于更改vue中的差值表达式{{key}}对应的内容值

数据双向绑定成品效果图

我们先看一下,我们所要实现的成品的效果图

4.gif

需求分析

  1. 输入框输入值内容发生变化,页面也发生对应变化
  2. 点击按钮,输入框和页面都发生对应变化 即:
  3. 页面变化(输入框引起)触发数据data变化,最终触发页面变化;
  4. 数据data变化(按钮引起),触发页面变化

关于MVVM的理解

简单理解

mvvm即为m v vm分别对应的是: - m是model数据层(就是vue中的data、computed、watch啊之类的数据配置项) - v是view视图层(视图层效果是dom堆叠出来的,所以视图层可以理解为dom元素) - vm是model数据层和view视图层的中间层view_model(vm)层,是vue中的核心,功能强大

vm可以监听视图层dom的变化,比如监听input标签dom的value值变化,去更改model数据层中的data对应值,vm也可以监听model数据层中的data对应key的value的值的变化,去更改input标签dom的value值。

即:vm相当于一个摆渡人,可把此岸人渡到彼岸、彼岸人渡到此岸

核心理解

所以,MVVM的核心是,所以,MVVM的核心是,所以,MVVM的核心是(重要的事情说三遍:)

  1. 监听页面的DOM的内容值变化,从而通知到data中做对应数据变化(主要是监听表单标签) > 监听表单标签的变化,是使用dom.addEventListener()这个方法
  2. 当data中数据变化以后,再去及时更新页面DOM的内容变化 > 监听data中数据的变化,是使用Object.defineProperty()的set方法,自动帮我们监听变化,至于更新dom,就是首先找到要更新哪个dom,如果是普通标签就更新其innerHTML值、如果是表单标签,就更改其value即可

关于Object.defineProperty的理解

关于Object.defineProperty这个方法,一言以蔽之,给对象定义响应式。论坛有很多资料帖子,在此不赘述。推荐看官方文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

关于这个方法,我们先理解下面案例就差不多了:

案例需求

有一个对象obj,里面有name和age属性,要让这个obj的每一个属性,都是响应式的,访问和修改的时候,都要对应打印信息。

案例代码

复制粘贴跑一下,大致就明白了

```html

Document

```

案例效果图

5.gif

完整代码

代码中写了不少注释,大家跟着注释步骤阅读应该就可以了。演示的话直接复制粘贴即可。注意代码中的subArr,搜集依赖,目的是看看有哪些dom元素需要做后续的响应式更新内容

打印new出来的Vue实例

6.png

如果下方的完整代码,有助于各位道友更好的理解mvvm的话,那就给咱点个赞鼓励一下创作呗^_^

完整MVVM代码

```html

Document