前言
使用axios请求后端接口能成功响应数据，使用前后端分离的方式，并且使用vue框架，需要考虑如何将响应后的数据“呈现”到视图页面上。下面的内容是基于axios成功响应数据的前提之下，使用vue3的数据绑定机制，两个方法ref(),reactive()实现将数据绑定到视图中。
数据显示的方法
- 传统方式：Javascript的dom操作
- 使用vue：vue声明式动态绑定
简单理解声明式动态绑定：即不关心数据显示到视图页面的实现细节（由vue处理），需要关心在视图层能正确获取并显示相应的数据，呈现页面效果。
使用ref()
在vue3中提供两种方式进入数据绑定
- ref()
- reactive()
使用ref()的步骤
- 在setup()方法定义响应数据变量使用ref()
- 定义响应的data对象为静态data变量
- 取出content属性值，赋值响应变量
- 返回响应变量
- 视图中使用响应变量
Step1. 在setup()方法中定义响应变量（使用ref()）。
使用ref()之前需要导入ref，使用import {ref} from 'vue' ，然后定义变量
const ebooks = ref();。这里的ebooks是定义的响应变量，表示响应回来的数据。
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
export default defineComponent({
name: 'Home',
setup() {
定义响应数据使用ref()
const ebooks = ref();
//周期函数Mounted
onMounted(() => {
axios.get("http://localhost:8080/ebook/list?name=Spring").then((response) => {
})
}
}
});
</script>
Step2. 定义响应的data对象为静态data变量。
将axios请求的代码定义在onMounted()周期函数（钩子函数）中，因此需要导入onMounted（import {onMounted} from 'vue';）, 导入axios (import axios from 'axios';）。
axios请求完会执行回调函数（then(response) => { }）,在函数体中进行响应后数据的操作，定义一个const类型的data变量，将响应的data对象赋值给该变量。
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
// 导入axios
import axios from 'axios';
export default defineComponent({
name: 'Home',
// setup() 是组件加载后默认的执行的函数
setup() {
console.log("setup");
//Step1、设置响应数据使用ref()
const ebooks = ref();
//周期函数Mounted
onMounted(() => {
axios.get("http://localhost:8080/ebook/list?name=Spring").then((response) => {
//Step2、定义响应的data对象为静态data变量
const data = response.data;
})
})
}
});
</script>
Step3. 取出content属性值，赋值响应变量。
在上一步赋值data到constdata后，取出data对象的content，此content也即是响应回的数据，使用ebooks.value = data.content;
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
// 导入axios
import axios from 'axios';
export default defineComponent({
name: 'Home',
setup() {;
//Step1、设置响应数据使用ref()
const ebooks = ref();
//周期函数Mounted
onMounted(() => {
axios.get("http://localhost:8080/ebook/list?name=Spring").then((response) => {
//Step2、定义响应的data对象为静态data变量
const data = response.data;
//Step3、取出数据中的值, content是后台响应的数据
ebooks.value = data.content;
})
})
}
});
</script>
Step4. 返回响应变量
如果想要数据可以在视图中使用，必须使用return关键字返回。
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
// 导入axios
import axios from 'axios';
export default defineComponent({
name: 'Home',
setup() {
//Step1、设置响应数据使用ref()
const ebooks = ref();
//周期函数Mounted
onMounted(() => {
axios.get("http://localhost:8080/ebook/list?name=Spring").then((response) => {
//Step2、定义响应的data对象为静态data变量
const data = response.data;
//Step3、取出数据中的值, content是后台响应的数据
ebooks.value = data.content;
})
})
// Step4、返回响应变量
return {
ebooks
}
}
});
</script>
Step5. 视图中使用响应变量
假设在视图页面中的某个位置需要显示数据，使用{{}}，中间包裹响应的变量。
</a-layout>
......
<!-- Step5、使用ebooks数据 -->
<pre>
{{ ebooks }}
</pre>
</a-layout>
</template>
如下图所示，呈现的内容是json格式内容，说明响应的数据变量ebooks也就是后端响应数据的json格式。
使用reactive()
使用reactive()类似ref()。
但需要注意的是，使用ref()方式，数据是用 变量.value形式储存的，即ebooks.value。
使用reactive()方式，数据是储存在reactive()方法参数的对象中，如reactive({books: []}),其中{books: []}的books用于储存数据。
返回的方式也不同，需要单独定义一个变量（ebook22）作为响应变量, 对于ebook22: toRef(ebooks2, "books")，ebook22是一个变量，而:后的内容表示这个变量的值，此时使用toRef(ebooks2, "books")形式，
<script lang="ts">
import {defineComponent, onMounted,,reactive,toRef} from 'vue';
// 导入axios
import axios from 'axios';
export default defineComponent({
name: 'Home',
setup() {
//Step1、设置响应数据使用reactive()
const ebooks2 = reactive({books: []});
//周期函数Mounted
onMounted(() => {
axios.get("http://localhost:8080/ebook/list?name=Spring").then((response) => {
//Step2、定义响应的data对象为静态data变量
const data = response.data;
//Step3、取出数据中的值, content是后台响应的数据
ebooks2.books = data.content;
})
})
// Step4、返回响应变量
return {
ebbook22: toRef(ebooks2, "books")
}
}
});
</script>
在视图中使用变量
</a-layout>
......
<!-- Step5、使用ebooks数据 -->
<pre>
{{ ebook22 }}
</pre>
</a-layout>
</template>
页面效果一样
小结
回看整个过程，在视图中想要呈现某个数据，只需要响应数据后取值，使用{{}}，而这个变量值是vue中返回的。整体上，数据获取到呈现到视图，实现细节忽略了很多，逻辑上的过程，就只剩下了，声明变量，数据驱动,数据取值。在本案例中，这个过程体现如下图所示。
