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>