Vue3 study notes

1. ref: Simply think of it as another way of writing data in data in vue2, wrapping a responsive data object

2. reactive: create a responsive data object

3. The difference between ref and reactive:
   (1) ref(obj) can be simply understood as reactive({value: obj})
   (2) basic type values ​​(String, Nmuber, Boolean, etc.) or single-value objects (similar to {count: 3} such an object with only one attribute value) use ref
   (3) reference type value (Object, Array) use reactive

4. toref: Convert a value in the object into responsive data, accepting two parameters (obj object, object attribute name), for example

<script>
// 1. 导入 toRef
import {toRef} from 'vue'
export default {
    setup() {
        const obj = {count: 3}
        // 2. 将 obj 对象中属性count的值转化为响应式数据
        const state = toRef(obj, 'count')
		
		// 3. 将toRef包装过的数据对象返回供template使用
        return {state}
    }
}
</script>

5. The difference between ref and toref:
   (1) ref is a copy of the incoming data; toRef is a reference to the incoming data
   (2) the value of ref will update the view; the value of toRef will not update the view
6. torefs: Similar to toref, it converts the values ​​of all attributes in the incoming object into responsive data objects. This function supports one parameter, namely the obj object

setup() {
        const obj = {
			name: 'css',
			age: 22,
			gender: 0
		}
        // 2. 将 obj 对象中属性count的值转化为响应式数据
        const state = toRefs(obj)