vue3数据的双向绑定

vue3关于数据的双向绑定

一、script setup

现在，没必要把数据写到data里面，或者是写一个setup函数，再进行return出去。
import进来的组件，可以直接在页面中使用，不再需要vue2的component或者是setup函数的return了。

<script setup>
import Header from '../home/Header.vue'
import Footer from '../home/Footer.vue'
</script>

组件中使用：

<template>
	<Header></Header>
	<Footer></Footer>
</template>

二、ref() 函数

ref()这个函数使得我们的变量拥有了双向绑定属性
使用步骤：
1、引入ref
2、给变量附初始值，ref（1）
3、 重点！！！变量的值要用 .value来获取 ，例如a，a.value

三、reactive()函数

这也是和ref一样使得我们的变量拥有了双向绑定属性, 这个函数接收一个对象作为参数
使用步骤：
1、引入ref
2、 重点！！！给变量附初始值，reactive（{value:1}） 接收对象作为参数的时候，应该这样写
打印一个对象或者是数组，根据控制台输出, 可以看到 变量是一个Proxy挂钩, 挂在一个target 对象上
3、变量的值要用 .value来获取 ，例如a，a.value

来一个通俗易懂的示例：

//HTML结构
<div class="lx-content">
          <div
            class="lx-img"
            v-for="(item, i) in lxImges.value"
            :key="i"
          >
	            <img :src="item.img" alt="" />
          </div>
</div>

<script setup>
import fetch from "../../fetch.js";
import { ref, reactive, onMounted } from "vue";
//如果说需要用ref定义一个变量，如下：
//let data = ref('')
let lxImges = reactive({ value: [],}//重点！！！！
fetch("abcd", {
  method: "get",
}).then((res) => {
  //console.log(res);
  lxImges.value = res.data;//重点！！！！
});
</script>