vue简介

众所周知，vue是MVVM；渐进式框架：MVVM是vue的设计模式，其中数据将自动驱动视图。

1.MVVM设计模式

解释View是View和DOM；相应的视图也是HTML部分——表示UI组件，该组件负责将数据模型转换为用于表示的UI。Model是模型，它是vue组件中的数据，或者vuex中的数据——表示数据模型。您还可以在模型中定义数据修改和操作的业务逻辑。ViewModel——监视模型数据（即数据）的更改，控制视图行为，并处理用户交互。它简单地理解为一个同步视图和模型的对象，连接模型和视图。

得出的结论是，在MVVM架构下，视图和模型之间没有直接的联系，而是通过ViewMode进行交互。模型和ViewModel之间的交互是双向的，因此视图数据的更改将同步到模型，并且模型数据的更改会立即反映在视图中。

ViewModel通过双向数据绑定连接视图层和模型层，视图和模型之间的同步是完全自动的，无需人工干预。因此，开发人员只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步。复杂的数据状态维护完全由MVVM管理。

由此，我们可以得出结论，vue是响应性的

2.响应描述：Vue的响应原则是核心是通过ES5保护对象；对象在defineProperty中的访问者属性中；Get和数据中声明的set方法和属性与访问器属性一起添加。读取数据中的数据时，会自动调用get方法。修改数据中的数据时，将自动调用set方法。当检测到数据变化时，将通知观察者Wacher。观察者Wacher将自动触发重新渲染当前组件（子组件不会重新渲染）以生成新的虚拟DOM树。Vue框架将遍历并比较新虚拟DOM树和旧虚拟DOM树中每个节点之间的差异，并记录它们。最后，加载操作将在本地将所有记录的差异修改为真实的DOM树。

2.1 APIObject的基本使用。defineProperty，用于检测数据更改的双向数据绑定原则的核心

常量数据＝｛｝；let name=“Zhang San；；Object.defineProperty（data，'；name'；，{get:function（）{console.log（'；trigger-get'；） ； ； ； ；返回名称}nbsp； ；设置：函数（newVal）｛console.log（'；触发器集'；） ； ； ； ；name=newVal｝）//测试控制台。log（data.name）//触发get；张三数据名称=“李思”nbsp； ； ；//触发集合可实现数据采集和值分配监控

2.2接下来，让我们看看vue如何监听数据更改//触发更新视图函数updateView（）｛console.log（'；视图更新'；）｝//重新定义数组原型const oldArrayProperty=array prototype//创建一个新对象，原型指向oldArrayPproperty，并展开新方法（这不会影响原型），让arrayProto=array prototypelet methods=['pop'，'shift'，'unshift'，'sort'，'reverse'，'splice'，'push']方法。forEach（methodName=>{arrayProto[methodName]=function（）｛updateView（）oldArrayProperty[methodName].call（this，…arguments）｝）//函数观察器（target）｛if（typeof target！=='；object'；||target==null）｛//不是对象或数组返回目标｝ nbsp；//重新定义阵列原型；如果（Array.isArray（target））{target.__proto__=arrProto} ； ； ；//重新定义每个属性（因为可以遍历对象/数组）；for（let key in target）｛defineAreactive（target，key，target[key]）｝｝//重新定义属性并侦听函数defineAreative（target，key，value）｛//递归深度侦听观察器（value）//核心API Object.defineProperty（target，key，｛get（）｛return value｝nbsp； ； ；设置（newValue）｛if（newValue！==value）｛//深度侦听