谈Vue的反应原理

首先，响应性的底层实现

1.武和MVVM

Vue是一个MVVM框架，各层的对应关系如下

视图层：用于在Vue中绑定dom对象的HTML视图模型层；例如在Vue中的vm对象模型层：当数据中的数据，计算的，方法等。模型层数据的变化，视图层将在视图模型的作用下自动更新

2.武氏反应原理

Vue响应的底层实现方法是Object.defineProperty()方法，其中有一个getter和setter的选项，可以影响属性值的获取和设置

用Vue写一个wather来处理数据

使用getter方法时，将始终通知观察器实例将页面呈现给视图层。类似地，当使用setter方法时，观察器实例将总是被通知在更改值的同时更新视图层。3.响应原则和兼容性

由于Object.defineProperty()方法只部分支持IE9，所以Vue最低兼容的IE版本是IE9。在IE9中，Vue、vue-router和vuex的核心框架可以正常使用

4.响应原理示意图

1.在实例前声明

varvm=new vue({ data : { name 3360 ' fail ' } })在实例之前声明的属性将在实例期间添加getter()和setter()方法，因此此时的名称是响应的，并且每当名称更改时，视图都会自动更新。

2.在实例后添加

vm.name=' failte '

由于数据中没有这样的属性，因此此时的名称在实例之后没有响应，并且当名称更改时，视图不会更新。如果需要转换为响应数据，需要使用Vue.set()方法手动添加为响应属性。

Vue。集合(虚拟机。数据，' name '，' ajaccio')//vue。$ set是此方法的别名。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。