1、其实Vue响应式的实现是一个变化追踪和变化应用的过程vue响应式原理以数据劫持方式，拦截数据变化以依赖收集方式，触发视图更新利用es5 ObjectdefineProperty拦截数据的settergettergetter收集依赖，setter触发依赖更新，而组件render也会变；数据模型仅仅是普通的JavaScript对象而当你修改它们时，视图会进行更新vue响应式系统 vue作为一个前端框架，近两年非常的火，虽然它的社区不像react那样繁荣，但它配套的东西都有固定的团队维护，用起来更方便它是MVVM；示例2Vue3vue3是自动实现数据响应式1Vue2定义方法的时候需要写在methods里面 在Vue2中，后添加的属性是非响应式的页面不更新需要用get和set方法2Vue3组合式API的作用是将原来。

2、Vue响应式原理核心是 数据劫持，采用 ES5 的 objectdefineproperty 的 getter 和 setter 方法从一个例子出发首先，在Vue初始化阶段，通过 observer 对 data 中的属性进行递归的劫持，包括 namejob_ undergoab等；因此接下去我们执行以下4个步骤，实现数据的双向绑定深入响应式原理 剖析Vue原理实现双向绑定MVVM 响应式系统的基本原理js JavaScript实现MVVM之我就是想监测一个普通对象的变化；2Vue使用虚拟DOM来跟踪组件的状态变化，并进行高效的DOM更新，进而影响多条数据3Vue的数据是响应式的，当数据发生变化时，会通知相关组件进行更新，并且影响多条数据这种响应式机制使得应用状态与用户输入保持同步，但；视图更新原理 其原理就是vue的响应式更新dom的原理，m = v m是数据，也就是在vuerouter install时在根组件root vue component添加了_route属性，在匹配到对应路由后更新了_route属性值，继而触发了该属性值的；definproperty劫持数据后vue会查找当前属性有无依赖项既被watch，或者依赖当前属性的值，如果有，就会注册依赖既deps，而注册deps时会在wather内添加新的更新目标当数据发生变更时，会触发deps的更新方法，调用所有的watcher；为了解决这个问题，Vue 2 引入了一些特殊的方法来改变数组，例如 vm$setvm$delete 等使用这些方法可以通知 Vue 更新视图，以反映数组内容的更改而在 Vue 3 中，通过 Proxy 对象来实现响应式数据变化检测，Proxy。

3、首先，我们先定义好实现vue对象的结构class Vue constructoroptions this$options = options this_data = optionsdata this$el = documentquerySelectoroptionsel 第一步将data下面的属性变为obs；您还可以使用#160vm$delete实例方法，这也是全局#160Vuedelete方法的别名#160针对数组，只能通过以下方法，才能实现响应式push#160pop#160unshift#160shift#160splice#160；Vue的响应式实现，便是通过使用ObjectdefineProperty来劫持各个属性的setter，getter，当数据变动时，派发更新函数，触发相应的watcherVue20通过全局APIVueobservable创建响应式对象来替代ObjectdefineProperty，意图是将响应式；当变量发生改变的同时， Vue 能在第一时间知道，并且对视图做出相应的改变操作而这把钥匙就是 ObjectdefineProperty 尚硅谷Vue源码解析之数据响应式原理 ObjectdefineProperty MDN。

4、1vue环境配备，nodevuecli2初始化项目，Vue init webpack vueslideshow安装依赖npm install安装的时候把vuerouter默认一起安装上去改造初始化项目0改造前分析一下我们的需求一个响应式自适应轮播组件，之所以是组件；响应式原理 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染思考 get函数；key， enumerable true， configurable true， get function return val ， set function newVal 判断新值与旧值是否相等 判断的后半段是为了验证新值与旧值都为NaN的情况 NaN不等于自身 ifne；Vuejs 是一个流行的 JavaScript 框架，它的核心是基于响应式原理实现的这意味着当数据发生变化时，Vue 会自动更新相关的界面元素Vue 响应式原理的核心是通过使用 ObjectdefineProperty 函数来劫持对象的属性来实现的在 Vue 中。