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>