当前位置：首页 > news >正文

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记第12章 Vue3.X新特性解析 12.12 响应式系统工具集的使用

news 来源：原创 2024/5/19 1:00:16

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第12章 Vue3.X新特性解析

文章目录

- - Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
  - 第12章 Vue3.X新特性解析
  - - 12.12 响应式系统工具集的使用
    - - 12.12.1 unref()
      - 12.12.2 toRef()
      - 12.12.3 isRef()
      - 12.12.4 isProxy()
      - 12.12.5 isReactive()
      - 12.12.6 isReadonly()

12.12 响应式系统工具集的使用

Vue3提供了一组响应式工具，其中经常使用的有unref()、toRef()、isRef()、isProxy()、isReactive()和isReadonly()。

12.12.1 unref()

作用：如果unref()函数的参数是ref数据，则返回value值，如果不是ref数据，则返回参数本身。

使用步骤：

定义ref变量并赋值
直接打印ref变量，输出的是对象
使用unref()函数直接获取对象的value值

举个栗子：

<template>
  <div id="nav">
    <h1>unref()</h1>
  </div>
  <!-- <router-view/> -->
</template>

<script>
import {ref , unref} from 'vue'

export default {
    setup() {
      //定义ref变量
      var num = ref(10)

      //如果直接打印num，打印的是对象
      console.log(num)

      //使用unref打印出的是num对象的value值
      console.log(unref(num))

      return {
        num 
      }

    }
}
</script>

<style>

</style>

运行效果

在这里插入图片描述

12.12.2 toRef()

作用：把reactive对象中的一个属性创建成ref数据

使用步骤：

创建reactive代理对象
使用toRef()函数把reactive中的某一个属性转为ref数据
打印ref数据

举个栗子：

<template>
  <div id="nav">
    <h1>toRef()</h1>
  </div>
  <!-- <router-view/> -->
</template>

<script>
import {reactive , toRef} from 'vue'

export default {
    setup() {
      var data = reactive({num : 10})

      //toRef有两个参数，第一个参数reactive创建对象名
      //第二个参数是reactive对象中的某一个参数
      //numRef具有响应式和可传递性

      var numRef = toRef(data , "num")

      console.log(numRef.value)

      return {
        data , 
        numRef
      }

    }
}
</script>

<style>

</style>

在这里插入图片描述

12.12.3 isRef()

作用：检查一个值是否为ref对象

举个栗子

<template>
  <div id="nav">
    <h1>isRef()</h1>
  </div>
  <!-- <router-view/> -->
</template>

<script>
import {ref , isRef} from 'vue'

export default {
    setup() {
      var num = ref(10)

      console.log(isRef(num)) //true
      console.log(isRef(100)) //false

      return {
        num
      }

    }
}
</script>

<style>

</style>

在这里插入图片描述

12.12.4 isProxy()

作用：检查对象是否为代理对象。

当前，已学代理对象有两个：reactive()函数创建的和readonly()函数创建的。

举个栗子

<template>
  <div id="nav">
    <h1>isProxy()</h1>
  </div>
  <!-- <router-view/> -->
</template>

<script>
import {reactive , isReactive , readonly , isReadonly , isProxy} from 'vue'

export default {
    setup() {
      var data = reactive({num : 10})
      var newdata = readonly(data)

      //判断是否为代理对象
      console.log(isProxy(data))
      console.log(isProxy(newdata))

      return {
        data,
        newdata
      }

    }
}
</script>

<style>

</style>

在这里插入图片描述