1. ref函数

因为在setup中返回的数据不是响应式的， 这时候就需要ref来定义响应式数据。
ref的作用： 定义一个响应式的数据。

1.1 步骤：

从vue框架中导入ref函数
在setup函数中调用ref函数并传入数据（简单类型或者复杂类型的数据）
在setup函数中把ref函数调用完毕的值以对象的形式返回出去。

1.2 语法：

const num= ref(100)
创建一个包含响应式数据的引用对象（reference对象， 简称ref对象）
JS中的操作数据： num.value
模板中读取数据： 不需要.value， 直接{{num}}

1.3 备注：

接收的数据可以是：基本类型、也可以式对象类型
基本类型的数据：响应式依靠的式类上的getter与setter完成的
对象类型的数据：内部求助了Vue3.0中的一个新函数——reactive函数

  1. <template>
  2. <h2>姓名：{{name}}</h2>
  3. <h2>年龄：{{age}}</h2>
  4. <button @click="changeName">修改姓名</button>
  5. <button @click="changeAge">修改年龄</button>
  6. <hr>
  7. <hr>
  8. <h2>职位：{{job.name}}</h2>
  9. <h2>薪水：{{job.salery}}</h2>
  10. <button @click="changeJobName">修改职位</button>
  11. <button @click="changeSalery">修改薪资</button>
  12. </template>
  14. <script>
  15. import { ref} from'vue'
  16. export default { 
  17.   setup() {
  18.     let name = ref('IRIC')
  19.     let age = ref(20)
  20.     function changeName(){
  21.         name.value += '!'
  22.     }
  23.     function changeAge(){
  24.         age.value ++
  25.     }
  26.     let job = ref({
  27.         name:'web前端工程师',
  28.         salery:'20K'
  29.     })
  31.     function changeJobName(){
  32.         job.value.name+= 'haha'
  33.     }
  34.     function changeSalery(){
  35.         job.value.salery += 10
  36.     }
  37.     return { name, age, changeName, changeAge, job, changeJobName, changeSalery}
  38.   },
  39. }
  40. </script>

通过看源码可以知道调用ref会返回一个RefImpl的实例对象，RefImpl类中有getter和setter可以检测到数据的变化

  1. function ref(value) {
  2.     return createRef(value, false);
  3. }
  5. function createRef(rawValue, shallow) {
  6.     if (isRef(rawValue)) {
  7.         return rawValue;
  8.     }
  9.     return new RefImpl(rawValue, shallow);
  10. }
  12. class RefImpl {
  13.     constructor(value, _shallow) {
  14.         this._shallow = _shallow;
  15.         this.dep = undefined;
  16.         this.__v_isRef = true;
  17.         this._rawValue = _shallow ? value : toRaw(value);
  18.         this._value = _shallow ? value : convert(value);
  19.     }
  20.     get value() {
  21.         trackRefValue(this);
  22.         return this._value;
  23.     }
  24.     set value(newVal) {
  25.         newVal = this._shallow ? newVal : toRaw(newVal);
  26.         if (hasChanged(newVal, this._rawValue)) {
  27.             this._rawValue = newVal;
  28.             this._value = this._shallow ? newVal : convert(newVal);
  29.             triggerRefValue(this, newVal);
  30.         }
  31.     }
  32. }

2. reactive函数

  • ref函数定义的响应式数据在代码中使用要加.value，不是很方便，这时候我们可以使用reactive定义响应式数据。

  • reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

    2.1 使用步骤

  • 导入：从vue框架中导入reactive函数

  • 调用：在setup函数中调用reactive函数并将对象数据传入
  • 导出：在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

    2.2 代码

    ```javascript

```