vue3 ref和toRef区别

<template>
	<div @click="change">
		<div>{
    
    {
    
    newObj1}}</div>
		<div>{
    
    {
    
    newObj2}}</div>
    </div>
</template>
<script>
	import {
    
     ref, toRef } from 'vue'
	setup() {
    
    
	    const obj = {
    
    name: '123123', age: 18}
	    let newObj1 = ref(obj.name);
	    let newObj2 = toRef(obj, 'name');
	
	    function change(){
    
    
	      // 不会修改原始数据，更新界面
	      // newObj1.value = 'Tom';
	      // console.log(obj,'---',newObj1.value)
	      // 修改原数据，不会更新界面
	      newObj2.value = 'Tom';
	      console.log(obj,'---',newObj2.value)
	    }
	    return {
    
    
	      obj,
	      newObj1,
	      newObj2,
	      change,
	    }
	}
</script>