ref

ref主要是用来包装原始类型（也就是vue2中基本数据类型）的数据。
ref()接收一个内部值，返回一个ref对象

为什么要包装对象：
在javaScript当中，原始数据类型如string和number只有值，是没有引用的；如果在一个函数的返回中是一个字符串变量，接收这个字符串的代码只会获得一个值，是没有办法追踪原始变量后续的变化的；因此包装对象的意义就是提供一个让我们能够在函数之间以引用的方式传递任意类型值的容器。

1、ref的创建：基本类型的响应式数据

• 作用：定义响应式变量。
• 语法：let（var、const） xxx =ref(初始值)。
• 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

<template>
    <view class="content">
        <view>姓名:{{name}}</view>
        <view>年龄:{{age}}</view>
        <view>性别:{{sex}}</view>
        <button @click="chanageAge">修改年龄</button>
        <button @click="chanageSex">修改性别</button>
    </view>
</template>

<!-- 如果是组件的话就需要这么个玩意 -->
<script lang="ts">
    export default {
        /* 组件名 */
        name: 'Content'
    }
</script>

<script setup lang="ts">
    /* 数据，原来都是写在data中（注意：此时的name,age,sex数据都不是响应式数据） */
    let name = '赵四';
    let age = 18;
    let sex = '男';
    console.log('this:', this);

    /* 方法，写在methods中 */
    function chanageAge() {
        /* 注意: 此时修改age，页面是不会发生变化的 */
        age = 19;
        console.log('年龄:', age);
    }

    function chanageSex() {
        /* 注意: 此时修改sex，页面是不会发生变化的 */
        sex = '女';
        console.log('性别:', sex);
    }
</script>

如上图所示的代码，运行如下：

图片.png

点击修改性别和年龄按钮执行了修改操作，但是UI并没有做出相应的变化，意味着不是响应式的。

图片.png

    let sex = ref('男');
    function chanageSex() {
        /* 注意: 此时修改sex，页面是不会发生变化的 */
        sex = '女'
        console.log('性别:', sex);
    }

点击按钮，其输出结果和UI为：

6e45cc1f17323b7456905fcd67379c6b.png
改为sex.value = '女',其输出结果和UI如下所示

    let sex = ref('男');
    function chanageSex() {
        sex.value = '女';
        console.log('性别:', sex);
    }

图片.png

重点：

• 在js中操作需要xxx.value，但是在模版中不需要.value，可以直接使用。
• 对于let sex = '男'来说，sex不是响应式的，sex.value才是响应式的（属性响应）。