Vue3 中的 ref 函数

1.作用

        ref 定义一个响应式数据

2.语法及理解

        1.const xxx = ref(initValue)

        2.创建一个包含响应式数据的引用对象（reference 对象），简称 ref 对象，ref 函数就是把数据包装成一个 ref 对象，ref中的 value 存储着当前数据对象

        3.ref 对象打印结果如下：以name属性为例

3.操作数据

        1.JS 中操作数据：xxx.value

        2.模板中读取数据，不需要 .value ，直接：<div>{{ xxx }}</div>，模板中会自动 .value

        3.JS 中获取对象数据类型中的数据：xxx.value 获取当前对象，xxx.value.key值 ，可以获取到对象数据类型中的数据，不需要再写 .value

4.备注

        1.接收的数据可以是：基本数据类型，也可以是对象数据类型

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

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

5.代码模块展示：

<template>
  <!-- vue3 中组件中的模板结构可以没有根标签 -->
  <h1>我是{{ name }}</h1>
  <h1>今年{{ age }}</h1>
  <h1>工作是{{ job.type }}</h1>
  <h1>薪资是{{ job.salary }}</h1>
  <button @click="sayHello">点击欢迎</button>
  <hr>
  <button @click="change">点击更改信息</button>
</template>

<script>

  // 引入 渲染函数中的 h
  import {h} from 'vue'
  // 引入 ref 函数
  import {ref} from 'vue'
  export default {
    name: 'App',

    // vue3 配置
    setup() {
      // 数据
      let name = ref('张三')
      let age = ref(18)
      let job = ref({
        type: '前端工程师',
        salary: '30k'
      })

      // 方法
      function sayHello() {
        alert('Hello Vue3')
      }


      function change() {
        name.value = '李四',
        age.value = 99,
        job.value.type = 'UI工程师',
        job.value.salary = '60k'
        console.log(name)
        
      }

      // 返回一个对象 (常用)
      return {
        name,
        age,
        job,
        sayHello,
        change
      }

    }
  
  }
</script>

<style>

</style>