JS组成、MVVM与MVC、Vue双向数据绑定原理。

一、JavaScript的组成

·js由BOM、DOM、ECMAScript组成。

·ECMAScript，js核心，描述了js的语法和基本对象。

·BOM（BrowserObjectModel），浏览器对象模型，封装了一些操作浏览器的api，用于使js与浏览器进行交互。

·DOM（DoucmentObjectModel），文档对象模型，封装了一些操作浏览器内容的api，用于使js对浏览器内容进行操作。

 

二、MVC与MVVM的区别

·MVC（ModelViewController，模型-视图-控制器)

工作原理：它们之间都是单向通信。view传送指令到controller后，controller完成业务逻辑后通知model进行改变，再由model将新的数据发送到view响应给用户。

  

·MVVM（ModelViewViewModel,模型-视图-视图模型）

工作原理：本质上是MVC的升级版，viewmodel负责与view和model进行双向通信，可以同时处理model中的数据和view中涉及到的业务逻辑。vm负责将view中的变化传至model中，将model的变化反映到view里。

优点：viewModel拆分了controller，使得代码更加清晰且容易维护；便于开发测试，开发解耦，实现前后端分离式开发。缺点：代码多，因为每一个controller都需要绑定。

 

三、Vue的双向数据绑定原理。

3.1、什么是响应式？

答：数据发生变化后，会对页面重新渲染，这就是Vue响应式

3.2、如何实现？

1.数据劫持/数据代理：侦测数据的变化；

2.依赖收集：收集视图依赖的数据；

3.发布订阅者模式：数据变化时自动通知需要更新的视图部分，并进行更新。

！！！

　　数据发生变化后会对页面重新渲染，首先需要直到哪些数据发生了变化，所以需要数据劫持/数据代理来侦测数据的变化；

　　只检测变化的数据是不够的，需要看数据用到哪里去了(哪个视图)，所以需要依赖收集；

　　收集完毕之后需要告诉页面，哪里发生了改变，同时让页面进行更新，这就是发布订阅者模式。

！！！

·vue是采用数据劫持结合发布者-订阅者的方式实现的双向双向数据绑定。主要由Observe监视器、compile指令模板编译、订阅器dep、订阅者watcher构成。

·vue2通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

·vue3使用proxy（代理对象）来进行数据绑定，因为proxy是代理整个对象，可完善vue2中数组通过下标添加和删除无法响应的缺点。

·

3.3使用方法：

1.模板解析  {{}}  ,用于初始化显示，可解析数据或者表达式

2.数据绑定 v-bind,@click,@change....,用于更新显示