[vue3] ref&reactive

ref

可以定义:基本类型、对象类型的响应式数据

reactive

只能定义:对象类型的响应式数据

<template>
    <div class="person">
      <h2>Name: {{ name }}</h2>
      <h2>Age: {{ age }}</h2>
      <h2>Tel: {{ tel }}</h2>
      <button @click="changeName">changeName</button>
      <button @click="changeAge">age++</button>
      <button @click="showTel">tel</button>

      <h2>Car's price: {{ car.price }}</h2>
      <button @click="changePrice">price++</button>

      <h2>Country list: </h2>
      <ul>
        <li v-for="c in countries" :key="c.name">{{ c.name }}</li>
      </ul>
      <button @click="change1Country">change one country</button>
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { ref, reactive } from 'vue'
  
  //data
  let name = ref('Jack')
  let age = ref(19)
  let tel = '123456'
    
  let car = reactive ({brand:'Volve', price:100})
  let countries = reactive([
    {name:'CN', continent:'Asia'},
    {name:'JP', continent:'Asia'},
    {name:'US', continent:'North America'}
  ])
  
  //function
  function changeName() {
    name.value = 'Tom'
  }
  
  function changeAge() {
    age.value += 1
  }
  
  function showTel() {
    alert(tel)
  }

  function changePrice() {
    car.price += 1
  }

  function change1Country() {
    countries[2].name = 'Canada'
  }


</script>
  
<style scoped>
  /* 可以添加样式 */
</style>