vue3中setup、ref、reactive、响应式

vue3语法格式

vue3提供的都是按需导入的方法，函数
setup函数是vue3中专门为组件提供的新属性。

<template>
  <div>
      {{name}}
  </div>
</template>

<script>
import { reactive } from "vue"
export default {
	props:{
		item:String
	}
  //setup函数会在beforeCreate之后，created之前执行 setup相当于是预设配置
  //setup函数的第一个形参，接收props数据,通过props.item获取
  setup(props){
    //创建响应式数据对象
    const state = reactive({
      name:'abc'
    })
    //setup函数中将响应式数据对象return出去供template使用
    return state
  }
}

reactive函数

reactive()函数接收一个普通对象，返回一个响应式的数据对象

按需导入reactive函数
import { reactive} from "vue"

创建响应式数据对象
const state = reactive({ id:1 })

如果我们一直一个个的返回，会很麻烦，所以直接返回一个state对象

<template>
  <div id="nav">
    ----b:{{b}}
  </div>
</template>
<script>
  import {
    reactive,
    onMounted,
    ref
  } from 'vue'
  export default {
    setup() {
      const state = reactive({
        b: ref(11)
      })
      onMounted(() => {
        setInterval(function () {
          state.b += 10
        }, 1000)
      })
      return state
    }
  }
</script>

ref的使用

ref()函数用来根据给定的值创建一个响应式的数据对象，ref()函数调用的返回值是一个对象，这个对象上只包含一个value属性
而这个的使用就需要.value拿到值，vscode中会自动帮你加上

setup(){
    var a =10
    var b = ref(11)
    const change = ()=>{
      a += 1;
      b.value += 2;//这里如果不设置.value是无法改变他的值
      console.log(a,b.value)
    }
    return {
      a,b,change
    }
  }

toRef

import {reactive} from 'vue'
setup(props,context) {
    const obj=reactive({name:'xwl',age:18,x,info:{school:'secret'}})
    const {name,age,info}=obj; //name，age，info都不是响应式的
    return {
        x,obj,
        name,age,info
    }
  } 

此时就需要我们的toRefs函数，它可以将reactive返回的对象中的属性都转成ref

import {reactive,toRefs} from 'vue'
setup(props,context) {
    const obj=reactive({name:'xwl',age:18,x,info:{school:'secret'}})
    const {name,age,info}=toRefs(obj); //name，age，info与ref.value建立链接，均为可响应式对象
    return {
        x,obj,
        name,age,info
    }
  }

如果我们只希望转换一个reactive对象中的属性为ref,那么可以使用toRef

import {reactive,toRef} from 'vue'
setup(props,context) {
    const obj=reactive({name:'xwl',age:18,x,info:{school:'secret'}})
    const name=toRef(obj,'name');//（对象，对象里的属性）
    return {
        x,obj,
        name
    }
  }

   // 把响应式数据state对象中的某个属性age变成了ref对象了
    const age = toRef(state, "age");
    // 把响应式对象中的某个属性使用ref进行包装,变成了一个ref对象
    const money = ref(state.money);

●为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值，更新时二者是同步关系。
●区别ref: 拷贝了一份新的数据值单独操作，更新时互不影响。
●应用: 当要将某个prop的ref传递给复合函数时，toRef很有用。

ref，toRef，toRefs区别

ref、toRef、toRefs 都可以将某个对象中的属性变成响应式数据

ref的本质是拷贝，修改响应式数据，不会影响到原始数据，视图会更新

toRef、toRefs的本质是引用，修改响应式数据，会影响到原始数据，视图不会更新

toRef 一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行

响应式的数据对象是什么意思

首先给大家看一个例子；
大家可以试着运行一下，这段代码；

<template>
  <div id="nav">
    a:{{a}}----b:{{b}}
    <button @click="change">click</button>
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
  setup(){
    var a =10
    var b = ref(11)
    const change = ()=>{
      a += 1;
      b.value+=2;
      console.log(a,b.value)
    }
    return {
      a,b,change
    }
  }
}
</script>

1. a是直接定义的普通变量，而b是我们用ref去申明的变量，所以b是响应式的数据；
2. 当我们点击按钮触发事件的时候，我们的a和b都会改变，但是页面上到底改变了吗？

这是默认的值：
我们可以清晰的看到，b是我们用ref声明的变量，它的数据的变化和视图的变化是一致的，那a呢？
a点击之后没有任何变化，这就是ref的作用啦~

响应式的数据的意思就是，数据的变化、视图也会变化，这就是响应式的数据

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时视图也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型

ref和reactive的区别

基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。
引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

ref定义基本类型，ref也可以定义引用类型（内部通过reactive转成了代理对象），ref是通过Object.definedProperty()的get，set实现响应式数据；

reactive用来定义引用类型：得到的是一个代理对象（reactive不可以定义基本类型）
reactive通过proxy()实现响应式，比ref更聪明；

代理就是下面这个：