【手把手教你搓Vue响应式原理】（一）初识Vue响应式

在讲这个之前，首先要明白一点，这个所谓的响应式，其实本身就是对 MVVM 的理解。

MVVM 其实就是所谓的 Modal View ViewModal 。

简单理解，就是你的 data 中的数据，和 template 模板中的界面，本身就是两个东西。

但是， Vue 给你做了一层中间的 ViewModal ,让视图上的改变能反映到 data 中， data 中的改变能反映到视图上。

在这个反映过程中，ViewModal就是视图和数据的一个桥梁。

同样是让 a + 1 。

在 Vue 中，这个桥梁是你看不见的，因为 Vue 都帮你完成了视图和数据的变化传递。

而 React 就是侵入式的，因为要显式地声明 setState ，通过它，来设置变量的同时，设置视图的改变。

所以，所谓的侵入式，其实就是对于桥梁的侵入。

所以， Vue 的神奇之处就在于，不需要我们手动地显示调用 setState ，也就是这个桥梁， Vue 已经帮我们桥接上了。

要让 data 改变的同时，视图也发生改变，所以，问题的所在，就是我们需要监听，什么时候，这个变量发生了变量。

然而， ES5 中，就有那么一个特性，可以做到对于数据的劫持（监听）。

它就是 ObjectdefineProperty 。

ObjectdefineProperty( obj, prop, descriptor ) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，与此同时，它可以对 对象的一些额外底层的属性进行设置 。例如可以设置 writable ， enumerable , configurable 等属性。

后面的额外属性设置，才是我们使用它的重点。

但是，我们使用的不是上面的几个属性，最主要的还是它的 get set ，可以对属性值的获取和设置 *** 作进行拦截。

get主要是可以对值的获取进行拦截，，它必须要传入一个 return ，并且， 该函数的返回值会被用作属性的值 。我们可以来看一个例子:

由于设置了 get ，所以，输出 aname 的时候直接会被拦截，走 get() 中的 return 所以，此时， aname 的值应该是 你已经被拦截了!。

set主要是可以对值的设置进行拦截，该方法会接受一个参数，那就是 被赋予的新值 。我们可以来看一个例子:

由于设置了 set ，所以，设置值的时候会被拦截，走 set() 中的方法。

所以， Vue 能自动获取data中的改变，反映到视图的原因，就是有对于变量的获取和设置的劫持，当变量发生改变的同时， Vue 能在第一时间知道，并且对视图做出相应的改变 *** 作。

而这把钥匙就是 ObjectdefineProperty 。

尚硅谷Vue源码解析之数据响应式原理

ObjectdefineProperty() - MDN

Vue3 的全局变量目前百度前面的全部是采用先

appconfigglobalProperties$axios = $axios

随后利用 getCurrentInstance 取得 ctx 或 proxy 来获取全局变量的

const { ctx } = getCurrentInstance() as any

ctx$axiosget

但事实上官方是不建议应用使用 getCurrentInstance 方法的，

所以我更加推荐以下的方法去存储和获取全局变量，即依赖注入的方式

首先在 mainjs 中

const app = createApp(App)

// 配置全局变量 页面中使用 inject 接收

appprovide('global',{

store,

axios

})

appmount('#app')

将多个变量混同时注入的目的是为了减小依赖注册及接受的工作量

在需要接受的页面使用 inject 接受 （js项目请去掉类型声明）

<script lang="ts" setup>

import { inject } from 'vue';

// 获取全局对象`

const global:any = inject('global')

/目前标准异步写法 /

globalaxios('/harmony/getType')then((result:any) => {

if(resultsuccess){

listvalue = resultdata

}

})catch((err:any) => {

consolelog(err);

});

</script>

采用这种方法在全局变量的创建上会更加的方便 ， 而且不用担心会出现像axios在使用globalProperties设置为全局对象后丢失$axios对象只剩$>

使用vuejs与后台实现数据交互的方法是利用vue-resource组件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具体举例如下：

1、导入vue-resource

<script src="js/vuejs"></script>

<script src="js/vue-resourcejs"></script>

2、基于全局Vue对象使用>

使用vuejs与台实现数据交互利用vue-resource组件提供系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具体举例：

1、导入vue-resource

2、基于全局Vue象使用>

以上就是关于【手把手教你搓Vue响应式原理】（一）初识Vue响应式全部的内容，包括:【手把手教你搓Vue响应式原理】（一）初识Vue响应式、vue3如何配置getapp()这样的全局变量、vue怎么传多个对象参数到后台等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！