1、作用：ref是用来定义一个响应式的数据。

2、表达式：let 变量=ref（数据）

3、注意点：

a、ref本质上是重新复制了一遍数据生成一个响应式的数据类型。

b、js的操作方式需要使用.value方法。

c、不建议使用在对象和数组上面，因为嵌套层级太深使用不方便。

4、使用

赋值

代码如下：

<template>
  <div class="container">
    <h1>{{ name }}</h1>
    <button @click="changeInfo">修改信息</button>
  </div>
</template>
<script>
import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("张三");
    onBeforeMount(() => {});
    onMounted(() => {});
    let changeInfo = () => {
      name.value="李四"
    };
    return {
      name,
      changeInfo,
    };
  },
};
</script>
<style lang="scss" scoped></style>

5、ref作用到对象的问题，直接如图所示：

ref作用对象的使用

代码如下：

<template>
  <div class="container">
    <h1>{{ name }}</h1>
    <h1>{{ user.name }}</h1>
    <button @click="changeInfo">修改信息</button>
  </div>
</template>
<script>
import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("张三");
    let user = ref({name:"张三"});
    onBeforeMount(() => {});
    onMounted(() => {});
    let changeInfo = () => {
      name.value="李四";
      console.log("user",user,user.value);
      user.value.name="李四"
    };
    return {
      name,
      user,
      changeInfo,
    };
  },
};
</script>
<style lang="scss" scoped></style>

总结：

我们可以学习到ref是用来创建一个响应式数据，同时最合适我们使用到基本的数据类型上，不适应我们的数组和对象。