// 引入
import { ref } from 'vue';

// 定義 響應(yīng)式數(shù)據(jù)  在 <script> 標(biāo)簽中
// 在 <script> 標(biāo)簽中寫(xiě)的 JS 代碼 ， 都需要寫(xiě) .value 來(lái)獲取值
const name = ref('張三');
const age = ref(20);
const tel = '123xxxxxxxxxx';
const count = ref(0); // 創(chuàng)建一個(gè)響應(yīng)式的數(shù)字
const message = ref('Hello, Vue 3!'); // 創(chuàng)建一個(gè)響應(yīng)式的字符串

// 訪問(wèn)和修改引用的值
// 使用 ref() 創(chuàng)建的響應(yīng)式引用會(huì)返回一個(gè)對(duì)象
// 該對(duì)象有一個(gè) .value 屬性來(lái)訪問(wèn)和修改其值
console.log(count.value); // 0
count.value++; // 修改值
console.log(count.value); // 1

<template>
// 在模板中，不需要使用 .value 。當(dāng)在模板中使用時(shí)，ref 會(huì)自動(dòng)解包
    <div class="person">
        <h2>姓名：{
  { name }}</h2>
        <h2>年齡：{
  { age }}</h2>
        <h2>地址：{
  { tel }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年齡</button>
        <button @click="showTel">查看電話</button>
        <p>{
  { count }}</p> <!-- 直接使用 count -->
        <button @click="count++">Increment</button>
    </div>
</template>

const user = ref({
  name: 'Alice',
  age: 25,
});
// 訪問(wèn)和修改對(duì)象屬性
console.log(user.value.name); // Alice
user.value.age++; // 修改屬性
console.log(user.value.age); // 26

// 從 Vue 中導(dǎo)入
import { reactive } from 'vue';

// 創(chuàng)建響應(yīng)式對(duì)象
const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!',
});

// 訪問(wèn)和修改響應(yīng)式屬性
// 可以像訪問(wèn)普通對(duì)象一樣訪問(wèn)和修改響應(yīng)式對(duì)象的屬性。
// Vue 會(huì)自動(dòng)追蹤這些屬性的變化，并在它們變化時(shí)更新視圖。
console.log(state.count); // 0
state.count++; // 修改屬性
console.log(state.count); // 1

const state = reactive({
    user: {
        name: 'Alice',
        age: 25,
    },
});
// 訪問(wèn)嵌套屬性
console.log(state.user.name); // Alice
// 修改嵌套屬性
state.user.age++;
console.log(state.user.age); // 26