vue3 - 02.ref全家桶

啦啦朵朵

已于 2022-10-16 20:58:56 修改

阅读量207

点赞数

文章标签： vue.js javascript 前端

于 2022-10-16 20:52:55 首次发布

本文链接：https://blog.csdn.net/qq_34111842/article/details/127352710

版权

本文探讨了Vue3中的ref和shallowRef的区别，强调了它们不能混合使用以避免不必要的视图更新。同时介绍了triggerRef用于强制刷新视图的功能，并通过customRef展示了如何实现一个简单的防抖功能。

摘要由CSDN通过智能技术生成

ref:

<template>
  <div>
    {
  {name}}
    <hr />
    <button @click="handleChange">change</button>
  </div>
</template>
<script setup lang='ts'>
  import { ref } from 'vue'
  type info = {
    name:string
  }
  const name = ref<info>({
    name:"xiaoming"
  })
  const handleChange = () => {
    name.value.name = "xiaohong"
  }
</script>
<style scoped>
</style>

isRef：判断当前是否为ref对象

<template>
  <div>
    {
  {name}}
    <hr />
    <button @click="handleChange">change</button>
  </div>
</template>
<script setup lang='ts'>
  import { isRef, ref } from 'vue'
  type info = {
    name:string
  }
  const name = ref<info>({
    name:"xiaoming"
  })
  const handleChange = ()