1.0 vue3数据变量的声明（ref & reactive）

前言：相信大家对于vue2的使用已经挺熟练，就算遇见难题，相信大家逛于各大论坛博客也能找到解决办法，最近小编在学习vue3,记录一下学习历程，顺便提前给大家踩踩坑！

vue3数据声明，vue3采用了组合式的开发模式，在声明变量时，我们需要引入 ref 、reactive

ref:针对于基础类型数据的声明，比如string，number ，boolean，也可以声明引用类型数据，array，object，但其本质内部依然采用了raective声明

reactive：针对于引用类型数据的声明，array，object

vue3的响应式原理，是由es6 新特性proxy，通过对源数据进行代理，采用Reflect映射的方式以此来达到数据的响应式，如果在声明数据的时候，不使用ref 或者 reactive 则数据不会响应！

<template>
  <!-- vue3的组件结构可以不用根标签<div></div> -->
  <h1>个人信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ info.sex }}</h2>
  <h2>身高：{{ info.height }}</h2>
  <h2>爱好运动：{{ info.like }}</h2>
  <h2>其他爱好：{{ hobby }}</h2>
  <h2>------------------------------------------------</h2>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>性别：{{ person.info.sex }}</h2>
  <h2>身高：{{ person.info.height }}</h2>
  <h2>爱好运动：{{ person.info.like }}</h2>
  <h2>其他爱好：{{ person.hobby }}</h2>
</template>

<script>
import {ref, reactive } from "vue"; // reactive 只针对于对象的响应式变化，reactive会将该对象实例化为一个 proxy对象
export default {
  name: "App",
  setup() {
    let name = ref("小明"); 
    let age = ref(18);
    let info = reactive({
       sex: "男",
       height: 1.8,
       like: "游泳",
     });
    let hobby =reactive(["抽烟", "喝酒", "烫头"]) ;


    // 可简写成为下方数据  长得和vue2中的data很像
    let person = reactive({
      name: "小明",
      age: 18,
      info: {
        sex: "男",
        height: 1.8,
        like: "游泳",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    //请记得一定需要抛出数据
    return {
      name,
      age,
      info,
      hobby,
      person,
    };
  },
};
</script>

下一篇：vue3数据变量的修改https://blog.csdn.net/qq_42543244/article/details/122146552