ref函数

• 作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

  • JS中操作数据： xxx.value

  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

• 备注：

• 接收的数据可以是：基本类型、也可以是对象类型。

• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

• 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

 

<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <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(20)

    //方法
    function changeInfo(){
      name.value = '李四'
      age.value = 30
      console.log(name);
      console.log(age);
    }

    //setup的返回值,返回一个对象
    return{
      name,age,changeInfo
    }

  }
 
}
</script>

<style>

</style>

 

处理对象类型

<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作类型：{{job.type}}</h2>
  <h2>薪水：{{job.salary}}</h2>
  <button @click="changeInfo">更新信息</button>
</template>

<script>
import {ref} from 'vue'

export default {
  name: 'App',
  setup() {
    //数据,定义变量
    let name=ref('张三')
    let age=ref(20)
    let job = ref({
      type:'前端工程师',
      salary:'30k'
    })

    //方法
    function changeInfo(){
      name.value = '李四'
      age.value = 30
      job.value.type='java工程师'
      job.value.salary='35k'
      console.log(job.value);
    }

    //setup的返回值,返回一个对象
    return{
      name,age,changeInfo,job
    }

  }
 
}
</script>

<style>

</style>