Vue3中使用ref与reactive创建响应式数据的示例代码

<template>
  <h1 class="home">首页</h1>
  // 基本数据类型
  <p>{{name}}</p>
  <p>{{age}}</p>
  <button @click="addAge">增加年龄</button>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
 
  let name = ref("张三")
  let age = ref(18)
 
  function addAge(){
    age.value += 1
  }
</script>

<template>
  <h1 class="home">首页</h1>
  <p>我喜欢开{{car.name}}</p>
  <button @click="changeCar">修改汽车</button>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
 
  // 数据
  let car = ref({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    car.value.name = car.value.name === "AuDi" ? "YaDi" : "AuDi"
  }
</script>

<template>
  <h1 class="home">首页</h1>
  // 对象数据类型
  <p>我喜欢开{{car.name}}</p>
  <button @click="changeCar">修改汽车</button>
  <hr>
  <h3>我喜欢的游戏：</h3>
  // 数组数据类型
  <ul>
    <li v-for="item in games" :key="item.id">{{item.name}}</li>
  </ul>
  <button @click="changeFirstGame">改变第一个游戏</button>
  <hr>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
  import {reactive} from "vue";
 
  // 数据
  let car = reactive({name: "AuDi", price: 1000000})
  let games = reactive([
    {id: "001", name: "英雄联盟"},
    {id: "002", name: "穿越火线"},
    {id: "003", name: "洛克王国"}
  ])
  // 方法
  function changeCar(){
    car.name = car.name === "AuDi" ? "YaDi" : "AuDi"
  }
  function changeFirstGame(){
    games[0].name = "LOL"
  }
</script>

  function changeCar(){
    car = {name: "YaDi", price: 1000}
  }

  function changeCar(){
    car = reactive({name: "YaDi", price: 1000})
  }

<template>
  <h1 class="home">首页</h1>
  <p>我喜欢开{{car.name}}，价值{{car.price}}元</p>
  <button @click="changeCar">修改汽车</button>
</template>
 
<script setup lang="ts">
  import {reactive} from "vue";
 
  // 数据
  let car = reactive({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    Object.assign(car, {name: "YaDi", price: 1000})
  }
</script>

<template>
  <h1 class="home">首页</h1>
  <p>我喜欢开{{car.name}}，价值{{car.price}}元</p>
  <button @click="changeCar">修改汽车</button>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
 
  // 数据
  let car = ref({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    car.value = {name: "YaDi", price: 1000}
  }
</script>

<template>
  <div>
    <p ref="title">hello vue3</p>
    <button @click="showTag">输出title标签的组件</button>
  </div>
</template>
 
<script setup lang="ts">
  import {ref} from 'vue';
 
  // 创建一个title，用于存储ref标记的内容
  let title = ref()
 
  function showTag(){
    console.log(title.value)
  }
</script>

<template>
  <Home ref="qwe"/>
  <button @click="showTag">获取组件</button>
</template>
 
<script setup lang="ts">
  import Home from "./components/Home.vue"
  import {ref} from "vue";
 
  let qwe = ref()
 
  function showTag(){
    console.log(qwe.value)
  }
</script>

<template>
  <div>
    <p ref="title">hello vue3</p>
    <button @click="showTag">输出title标签的组件</button>
  </div>
</template>
 
<script setup lang="ts">
  import {ref,defineExpose} from 'vue';
 
  // 创建一个title，用于存储ref标记的内容
  let title = ref()
 
  function showTag(){
    console.log(title.value)
  }
  defineExpose({title})
</script>

<template>
  <h1 class="home">首页</h1>
  <p>{{name}}</p>
  <p>{{price}}</p>
  <button @click="changeCarName">修改车名</button>
  <button @click="changeCarPrice">修改价格</button>
 
</template>
 
<script setup lang="ts">
  import {reactive, toRefs} from "vue";
 
  // 数据
  let car = reactive({name: "AuDi", price: 1000000})
  let {name,price} = toRefs(car)
  // 方法
  function changeCarName(){
    name.value = "YaDi"
  }
  function changeCarPrice(){
    price.value = 1000
  }
</script>

  let car = reactive({name: "AuDi", price: 1000000})
  let carName = toRef(car, 'name')
  let carPrice = toRef(car, 'price')