本章將介紹的是另一個響應(yīng)式數(shù)據(jù)的創(chuàng)建方式ref

1、概述：函數(shù)，創(chuàng)建并返回一個響應(yīng)式數(shù)據(jù)對象，并在此對象上只包含一個.value屬性指向該數(shù)據(jù)值；
2、用例：由vue提供，按需引入：import { ref } from 'vue';

<p>{{name}}</p>  // 視圖中直接使用即可，不需要.value

import { ref } from 'vue';

setup() {
    const name = ref('zhang_san');
    console.log(name.value) // 'zhang_san'
    // 同樣需要使用return返回
    return { name };
}

如果使用ref將一個對象創(chuàng)建為響應(yīng)式代理的話，則該對象會被進(jìn)行深度響應(yīng)式創(chuàng)建

<p>{{data.count}}</p> // 0
<p>{{data.content.age}}</p> // 10 

setup(props, context) {
    const defaultVal = {
      count: 0,
      content: {
        age: 10
      }
    };
    const data = ref(defaultVal);
    console.log(data.value.count) // 0
    console.log(data.value.content.age) // 10
    return {
      data
    };
}
data.value.count ++ // 1 視圖重新渲染
data.value.content.age++ // 11 視圖重新渲染

下面是ref數(shù)據(jù)能訪問到的部分常用方法及延伸方法。

unref()

1、概述：返回代理原始值，如果參數(shù)為ref則返回原始代理值，如果不是ref則返回參數(shù)本身
2、用例：由vue提供，按需引入：import { unref } from 'vue';

import { unref } from 'vue';
const a = ref(1);
const b = 'zhagn_san';
console.log(unref(a)) // 1
console.log(unref(b)) // zhagn_san

toRef()

1、概述：可以將reactive創(chuàng)建的代理的某個屬性傳遞出來用ref進(jìn)行代理
2、用例：由vue提供，按需引入：import { toRef } from 'vue';

import { reactive, toRef } from 'vue';
const data = reactive({ name: 'zhang_san', age: 20 });
const toRefValue = toRef(data, 'age');

toRefValue.value++  // toRefValue.value 21
console.log(data.age) // 21

data.age++ // data.age 22
console.log(toRefValue.value) // 22

3、注意：使用toRef將reactive的屬性代理后，屬性值的變化會同時影響toRef后的值和原本reactive的屬性值
4、實例：在將prop的引用傳遞給復(fù)合函數(shù)的時候，toRef將非常有用

setup(props) {
    userHandler(toRef(props, 'name'));
    // 這將使得userHandler拿到的name為響應(yīng)式代理
}

toRefs()

1、概述：可以將reactive創(chuàng)建的代理的所有屬性傳遞出來用ref進(jìn)行代理
2、用例：由vue提供，按需引入：import { toRefs } from 'vue';

import { reactive, toRefs } from 'vue';
const data = reactive({ name: 'zhang_san', age: 20 });
const toRefValue = toRefs(data);

toRefValue.age.value++  // toRefValue.age.value 21
console.log(data.age) // 21

data.age++ // data.age 22
console.log(toRefValue.age.value) // 22

3、注意：使用toRefs將reactive的屬性代理后，屬性值的變化會同時影響toRefs后的對應(yīng)屬性值和原本reactive的屬性值
4、實例：從組合函數(shù)返回響應(yīng)式對象時，這將很有用，而不是使用es6數(shù)據(jù)結(jié)構(gòu)的方式，這樣會使reactive的屬性失去響應(yīng)式代理

function userHandler() {
  const state = reactive({ name: 'zhang_san', age: 20});
  return toRefs(state)
}

export default {
  setup() {
    const { name, age} = userHandler();
    return { name, age };
  }
}

isRef()

1、概述：判斷響應(yīng)式代理是否為ref所創(chuàng)建
2、用例：由vue提供，按需引入：import { isRef } from 'vue';

import { ref, reactive, isRef } from 'vue';
const name = ref('zhang_san');
const user = reactive({sex: '男', age: 20});

console.log(isRef(name)) // true
console.log(isRef(user)) // false
// 應(yīng)用場景：在獲取一個未知的數(shù)據(jù)對象的值時，如：
const newV = isRef(name) ? name.value : name;

下一章：（七）計算屬性 - computed
上一章：（五）響應(yīng)式數(shù)據(jù)對象 - reactive

ps：在你想從一個人身上得到什么的時候，先想想你自己在這個人身上付出了什么。