vue_ref与reactive响应式数据

ref与reactive响应式数据

<template>
  <h2>ref与reactive响应式数据</h2>
  <div class="card">
    <span>ref使用：接受一个内部值并返回一个响应式且可变的 ref 对象，有一个 .value
      属性，可以通过其读取/修改对象的值。</span><br />
    <button type="button" @click="changeref()">点击ref变化</button>
    <p>
      <div >
        数值型非响应式数据:{{ int }} <br />
        数值型响应式数据:{{ num }} <br />
        字符型:{{ str }} <br />
        布尔型:{{ bool }} <br />
        对象类型：{{ obj }}<br />
      </div>
    </p>
  </div>
    <div class="card">
    <span>reactive使用:创建一个响应式对象，与ref不同的是，reactive
            接受的参数是一个对象，可以使用toRef(infoObj)为对象中的每一个属性创建一个ref,
            它可以保持对原属性的响应式链接。</span><br />
    <button type="button" @click="changereactive()">点击reactive变化</button>
    <p>
      <div >
        数值型非响应式数据:{{ data.int }} <br />
        数值型响应式数据:{{ data.num }} <br />
        字符型:{{ data.str }} <br />
        布尔型:{{ data.bool }} <br />
        对象类型：{{ data.obj }}<br />
      </div>
    </p>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
// 一般定义原始类型的数据
// 初始值都为1
let int = 1;
let num = ref(1);
// 其他类型
let str = ref("abc");
let bool = ref(true);
// 可以定义对象，定义对象最好用reactive
let obj = ref({ name: "zhou" });
const changeref = () => {
  int++;
  // 后台变化，前台不变
  console.log(int);
  // ref响应式数据，js中添加value
  num.value++;
  // 后台、前台都变化
  console.log(num);
  str.value += "---";
  bool.value = !bool.value;
  obj.value = { name: "yu" };
};

const data = reactive({
  int: 1,
  num: 1,
  str: "abc",
  bool: true,
  obj: { name: "zhou" },
});
const changereactive = () => {
  // reactive响应式数据，js中不添加valu
  data.int++;
  console.log(data.int);
  data.num++;
  console.log(data.num);
  data.str += "---";
  data.bool = !data.bool;
  data.obj = { name: "yu" };
};
</script>