vue3 ref与reactive的区别【基础篇】

一、什么是ref?

        1.ref和reactive-样也是用来实现响应式数据的方法由于reactive必须传递一个对象，所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦所以Vue3就给我们提供了ref方法，实现对简单值的监听。

        2.ref本质:ref底层的本质其实还是reactive系统会自动根据我们给ref传入的值将它转换成
ref(xx) -> reactive({value:xx})。

        3.ref注意点:在Vue的html中使用ref的值不用通过value获取在JS中使用ref的值必须通过value获取。

二、在Vue的html中使用ref的值不用通过value获取

<template>
  <h1>基本信息</h1>
  <h3>姓名：{{ name }}</h3>
  <h3>年龄：{{ age }}</h3>
  <h4>工作类型：{{job.type}}</h4>
  <button @click="sayHello()">点击</button>
</template>

<script>
// ref的作用：定义一个响应式的数据
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 数据
    let age = ref(18);
    let name = ref("张三");
    let job = ref({
      type: "前端开发工程师",
      salary: "30k",
    });
    //方法
    function sayHello() {
      // 修改
      name.value = "李四";
      age.value = "23";
      job.value.type = "UI设计师";
    }
    return {
      age,
      name,
      job,
      sayHello,
    };
  },
};
</script>

 三、ref和reactive区别:

区别一：

如果在template里使用的是ref类型的数据，那么Vue会自动帮我们添加.value 如果在template里使用的是reactive类型的数据，那么Vue不会自动帮我们添加.value。

区别二： ref函数只能够去监听简单类型的数据变化，不能够去监听，复杂类型的变化(数组、对象) reactive函数传递的参数必须是对象(json/arr)。

区别三 __v_isRef 是ref中拥有的属性 Vue底层就是根据这个来进判断是否需要在template添加.value的哈 reactive 是没有__v_isRef这个属性的，所以不会帮我们添加.value的。