Vue3【八】ref创建基本类型的响应式数据

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

在setup中直接声明变量不是实时变化的响应式数据
要想使基本类型数据变成响应式数据，需要用到ref()函数

案例截图

案例目录

案例代码

Person

<template>
    <div class="person">
        <h1>我是Person组件</h1>
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }} </h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showAdd">查看信息</button>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
// ref创建基本类型的响应式数据
// 数据 原来是写在data中的，此时name，age，add 都不是响应式的,加上ref()就变成了响应式的了，引用数据要加.vlaue
let name = ref("太上老君")
let age = ref(18000)
let add = '太上老君是公认的道教始祖，即道教中具有开天创世与救赎教化的太上道祖。'
function showAdd() {
    alert(add)
}
function changeName() {
    name.value = name.value == "太白金星" ? '太上老君' : '太白金星'
    console.log(name)
}
function changeAge() {
    age.value += 1
    console.log(age)
}
</script>

<style scoped>
.person {
    background-color: #ff9e4f;
    box-shadow: 0 0 10px;
    border-radius: 30px;
    padding: 30px;
}

button {
    margin: 0 10px;
    padding: 0 5px;
    box-shadow: 0 0 5px;
    ;
}
</style>