腾轩资源网 - 专注优质QQ活动-绿色软件-游戏辅助-技术教程分享网!

Vue3中shallowRef和shallowReactive的使用方法

腾轩资源网 编程资源
扫码手机访问
0

本文章主要为大家介绍了Vue3中shallowRef和shallowReactive函数的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,需要的可以参考一下

shallowReactive

只能实现复杂数据类型的第一层响应式。

<template>
  <!-- shallowReactive -->
  <div>{{ obj }}</div>
  <button @click="obj.children.age++">修改children.age</button>
</template>

<script>
import { reactive, shallowReactive} from "@vue/reactivity";
export default {
  setup() {
    //使用shallowReactive只能对复杂数据类型的第一层数据实现响应式
    //既name,age,无法对children下的name,age实现响应式
    let obj = shallowReactive({
      name: "张三",
      age: 18,
      children: {
        name: "张三三",
        age: 2,
      },
    });

    return {
      obj,
    };
  },
};
</script>

<style></style>

shallowRef

只能对简单数据类型实现响应式,如果是复杂数据类型,则无法实现响应式

<template>
  <!-- shallowRef -->
  <div>{{ counter.x }}</div>
  <button @click="counter.x++">counter.x++</button>
</template>

<script>
import { shallowRef } from "@vue/reactivity";
export default {
  setup() {
    //shallowRef 只能对简单数据类型实现响应式
    //无法对复杂数据类型实现响应式
    let counter = shallowRef({
      x: 0,
    });

    return {
      counter,
    };
  },
};
</script>
<style></style>

标签:

暂无标签
    协助本站seo优化一下,谢谢!
    关键词不能为空

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail: 571533527@qq.com

同类推荐
分享
评论列表
签到
编程资源 Vue3中shallowRef和shallowReactive的使用方法
本文章主要为大家介绍了Vue3中shallowRef和shallowReactive函数的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,...
扫描二维码阅读原文
腾轩资源网 January, 01
初始化 ×