Vue3 ref 更新實時數據

vue2中ref操作原生Dom元素

vue3中實時更新DOM數據需要導入

• 基本數據類型

1. import {ref} from 'vue'

2. 數據定義需要包裹ref

3. 定義的數據vue將他放入了一個對象之中，所以在獲取這個值時需要

   如name.value這樣獲取。

<template>
   <h1>一個人的信息</h1>
   <h2>姓名:{{name}}</h2> 
   <h2>年齡:{{age}}</h2>
   <button @click="changeInfo">說話</button>
</template>
​
<script>
 import {ref} from 'vue'
   export default{
   name:'App',
       setup(){
           //數據
           let name=ref('張三')
           let age = ref(18)
           //方法
           function changeInfo(){
              name.value = '李四'
              age.value = 48
           }
           //返回的是一個對象(常用)
           return{
               name,
               age,
               changeInfo
           }
       }
}
</script>

• 對象類型的數據：內部"求助"了vue3.0中的一個新函數----reactive函數中的proxy

  和基本數據不同，在對數據進行修改時 需要job.value.salary如此格式

  <template>
     <h1>一個人的信息</h1>
     <h2>工作種類:{{iob.type}}</h2> 
     <h2>工作薪水:{{job.salary}}</h2>
     <button @click="changeInfo">說話</button>
  </template>
  ​
  <script>
   import {ref} from 'vue'
     export default{
     name:'App',
         setup(){
             //數據
           let obj= ref({
           type:'前端',
           salary：30k
           })
             //方法
             function changeInfo(){
                job.value.salary = '60k'
                job.value.type = 'hai'
             }
             //返回的是一個對象(常用)
             return{
                 name,         
                 age,
                 changeInfo
             }
         }
  }
  </script>