Vue3中的toRef和toRefs的区别和用法示例小结

<template>
  <h2>
    reactive-name: {{ user.name }} 
  </h2>
  <h2>
    toRef-name: {{ uName }}
  </h2>
  <button @click="onChangeName">点击</button>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
	setup() {
    let user = reactive({
      name: 'zs',
      age: 18
    })
	// 复制 user 里的 name 属性
    let uName = toRef(user, 'name')
    // 更改  
    const onChangeName = () => {
      uName.value = 'ls'
    }
    return {
      user,
      uName,
      onChangeName
    }
  }
}
</script> 

<template>
  <h2>
        {{ name }} 
  </h2>
  <h2>
         {{ age }}
  </h2> 
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
	setup() {
    let user = reactive({
      name: 'zs',
      age: 18
    }) 
    return {
         ...toRefs(user),
    }
  }
}
</script> 

<template>
  <div>
    <p>Count: {{ i }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { ref } from 'vue';
	setup(){
		const i = ref(0); 
		const increment = () => {
		  i.value++;
		};
		return{
			i,increment
		} 
	} 
</script>

<template>
  <div>
    <p>User Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p> 
  </div>
</template>
<script>
import { reactive } from 'vue';
setup(){
	const user = reactive({
	  name: 'Alice',
	  age: 30
	});
	return{
		user
	}
} 
</script> 

<template>
  <div>
    <p>User Name: {{ name }}</p>
    <p>Age: {{ age }}</p> 
  </div>
</template>
<script setup>
import { reactive } from 'vue';
setup(){
	const user = reactive({
	  name: 'Alice',
	  age: 30
	});
	return{
       ...toRefs(user)
	}
} 
</script>