ref和toRef的区别

(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

toRef 和toRefs的区别

toRef一次仅能设置一个数据；toRefs可以设置多个数据，toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行

reactive() , toRefs(), ref() 的区别

(1)ref 中定义的值, 需要通过value属性
(2)reactive()使用和ref()函数区别在于可以直接拿到对象
(2)toRefs使用和reactive()函数区别在于可以直接使用对象中name属性

1. reactive函数传入的为引用类型，例如数组、对象等，但不能代理基本类型值,返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可

2. toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，类似使用拓展用算符...的方法返回数据data

3. ref() 函数根据给定的值创建一个响应式的数据对象，传入的为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性,只在setup函数内部访问ref函数需要加.value

ref

import {ref} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'sr', age : 26};
    let newObj= ref(obj.name);
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

toRef

import {toRef} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRef(obj, 'name');
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

toRefs

import {toRefs} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'sr', age : 16};
    let newObj= toRefs(obj);
    function change(){
      newObj.name.value = 'Tom';
      newObj.age.value = 18;
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

reactive 和ref和toRefs区别

// ref
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({ 
    setup() {
       const name = ref<string>('张三') 
      // 在js 中获取ref 中定义的值, 需要通过value属性      
     console.log(name.value); 
      // 同时定义的响应变量比如return出去，不然界面不会生效
     // 就像vue2中data里面的值需要return一个道理
       return { 
          name
       }
     } }); 
</script>

// reactive
<template>
 {{state.name}} 
<template> 
<script lang="ts">
 import { defineComponent, reactive, ref, toRefs } from 'vue';
 export default defineComponent({ 
   setup(props, context) {
       let state = reactive({
         name: 'test'
       }); 
      return {
         state
       } 
    } });
 </script>

// toRefs
<template>
// 加了toRefs使用和reactive()函数区别在于可以直接使用name属性
   {{name}}
<template>
<script lang="ts"> 
import { defineComponent, reactive, ref, toRefs } from 'vue'; 
export default defineComponent({ 
    setup(props, context) {
       let state = reactive({
         name: 'test'
       });
       return {
         // 关键点在这里
         ...toRefs(state)
       } 
    } }); 
</script>