[JavaScript知识库]vue3 reactive，ref， toRefs

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

import { ref } from 'vue'
export function message() {
  const list = ref<any[]>([])
  const loading = ref(false)
  const noMore = ref(false)
  const noData = ref(false)
  const netError = ref(false)
  // 获取数据 
  console.log(loading.value)
  console.log(list.value)
}

return {
  list,
  loading,
  noMore,
  netError,
  noData,
  message
}

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

import { reactive, ref } from 'vue'
export function message() {
  const data = reactive({
    list: ref<any[]>([]),
    loading: false,
    noData: false,
    noMore: false,
    netError: false
  })
  // 获取数据 
  console.log(data.loading)
  console.log(data.list)
}

return {
  data,
  message
}

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

import { reactive, ref } from 'vue'
export function message() {
  const data = reactive({
    list: ref<any[]>([]),
    loading: false,
    noData: false,
    noMore: false,
    netError: false
  })
  // 获取数据 
  console.log(loading)
  console.log(list)
}

return {
  ...toRefs(data),
  message
}

reactive 和 ref 都是用来定义响应式数据的，将数据变成响应式数据，当数据发生变化时UI也会自动更新
一般reactive去定义复杂的数据类型
而ref 更推荐定义基本类型，但其传递数组也是可以的，在实际运用中，如果直接用reactive传入数组，赋值以后他不会同步更新页面
当基本数据传递给reactive，reactive并不会将它包装成porxy对象，并且当数据变化时，界面也不会变化，所以reactive传递的参数必须是json对象或者数组，如果传递了其他对象（比如new Date()），在默认情况下修改对象，界面不会自动更新，如果也需要具有响应式，可以通过重新赋值的方式实现