ref主要是用來包裝原始類型（也就是vue2中基本數(shù)據(jù)類型）的數(shù)據(jù)镊折。
ref()接收一個內(nèi)部值莺葫，返回一個ref對象
為什么要包裝對象：
在javaScript當(dāng)中，原始數(shù)據(jù)類型如string和number只有值，是沒有引用的爬范；如果在一個函數(shù)的返回中是一個字符串變量，接收這個字符串的代碼只會獲得一個值弱匪，是沒有辦法追蹤原始變量后續(xù)的變化的青瀑；因此包裝對象的意義就是提供一個讓我們能夠在函數(shù)之間以引用的方式傳遞任意類型值的容器焕盟。
1罩引、ref的創(chuàng)建：基本類型的響應(yīng)式數(shù)據(jù)
- 作用：定義響應(yīng)式變量午笛。
- 語法：
let（var席爽、const） xxx =ref(初始值)涩咖。 - 返回值：一個
RefImpl的實例對象棍鳖，簡稱ref對象或ref扛点，ref對象的value屬性是響應(yīng)式的透葛。
<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">
/* 數(shù)據(jù)尖奔，原來都是寫在data中（注意：此時的name,age,sex數(shù)據(jù)都不是響應(yīng)式數(shù)據(jù)） */
let name = '趙四';
let age = 18;
let sex = '男';
console.log('this:', this);
/* 方法搭儒，寫在methods中 */
function chanageAge() {
/* 注意: 此時修改age，頁面是不會發(fā)生變化的 */
age = 19;
console.log('年齡:', age);
}
function chanageSex() {
/* 注意: 此時修改sex提茁，頁面是不會發(fā)生變化的 */
sex = '女';
console.log('性別:', sex);
}
</script>
如上圖所示的代碼淹禾，運行如下：
圖片.png
點擊修改性別和年齡按鈕執(zhí)行了修改操作，但是UI并沒有做出相應(yīng)的變化茴扁，意味著不是響應(yīng)式的铃岔。
圖片.png
let sex = ref('男');
function chanageSex() {
/* 注意: 此時修改sex，頁面是不會發(fā)生變化的 */
sex = '女'
console.log('性別:', sex);
}
點擊按鈕，其輸出結(jié)果和UI為：
6e45cc1f17323b7456905fcd67379c6b.png
改為
sex.value = '女',其輸出結(jié)果和UI如下所示
let sex = ref('男');
function chanageSex() {
sex.value = '女';
console.log('性別:', sex);
}
圖片.png
重點：
- 在
js中操作需要xxx.value毁习，但是在模版中不需要.value智嚷，可以直接使用。- 對于
let sex = '男'來說纺且，sex不是響應(yīng)式的盏道，sex.value才是響應(yīng)式的（屬性響應(yīng)）。
