Vue3技术7之toRaw与markRaw、customRef、provide与inject、响应式数据的判断、组合式API的优势分析

最新推荐文章于 2024-04-01 10:04:59 发布
最新推荐文章于 2024-04-01 10:04:59 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： Vue3基础 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/130339509
版权

Vue3技术7

toRaw与markRaw

toRaw

App.vue

<template>
  <button @click="toggle=!toggle">切换显示/隐藏</button>
  <Demo v-if="toggle"></Demo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";

export default {
  name: 'App',
  components: {Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我和++</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <h2 v-show="person.car">汽车信息：{{person.car}}</h2>
  <button @click="addCar">添加一辆汽车</button>
  <button @click="person.car.name+='!'">修改汽车名字</button>
  <button @click="person.car.price++">修改汽车价格</button>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
  <button @click="toRawPerson">输出最原始的person</button>
</template>

<script>
import {reactive, toRefs,ref,toRaw} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let sum=ref(0)
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    function toRawPerson(){
      const p=toRaw(person)
      console.log('p',p)
    }

    function addCar(){
      const car={name:'奔驰',price:40}
      person.car=car
    }


    //返回一个对象（常用）
    return{
      sum,
      toRawPerson,
      addCar,
      person,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

markRaw

Demo.vue

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我和++</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <h2 v-show="person.car">汽车信息：{{person.car}}</h2>
  <button @click="addCar">添加一辆汽车</button>
  <button @click="person.car.name+='!'">修改汽车名字</button>
  <button @click="person.car.price++">修改汽车价格</button>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
  <button @click="toRawPerson">输出最原始的person</button>
</template>

<script>
import {reactive, toRefs,ref,toRaw,markRaw} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let sum=ref(0)
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    function toRawPerson(){
      const p=toRaw(person)
      console.log('p',p)
    }

    function addCar(){
      const car={name:'奔驰',price:40}
      // person.car=car
      person.car=markRaw(car)
    }


    //返回一个对象（常用）
    return{
      sum,
      toRawPerson,
      addCar,
      person,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

请添加图片描述

总结

  1. toRaw：
    （1）作用：将一个由reactive生成的响应式对象转为普通对象
    （2）使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
  2. markRaw
    （1）作用：标记一个对象，使其永远不会再成为响应式对象
    （2）应用场景：
    • 有些值不应被设置为响应式的，例如复杂的第三方类库等
    • 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

案例：（并且还具备防抖功能）

App.vue

<template>
  <input type="text" v-model="keyword">
  <h3>{{keyword}}</h3>
</template>

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

export default {
  name: 'App',
  setup(){
    // let keyword=ref('hello')
    //自定义一个ref——名为：myRef
    function myRef(value,delay){
      let timer
      return customRef((track, trigger) => {
         return{
           get(){
             console.log(`有人从myRef这个容器里面读取数据了，我把${value}给他了`)
             track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
             return value
           },
           set(newValue){
             console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
             clearTimeout(timer)
             timer=setTimeout(() => {
               value=newValue
               trigger()  //通知Vue去重新解析模板
             },delay)
           }
         }
      })
    }


    let keyword=myRef('hello',500)
    return{
      keyword
    }
  },
}
</script>

请添加图片描述
set执行修改数据的过程：
在这里插入图片描述
定时器实现防抖功能原理：
在这里插入图片描述

总结

  1. ref与customRef类比：
    在这里插入图片描述
    也可以类比为：

ref =>自动挡
customRef => 手动挡

  1. customRef：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制

provide与inject

实现祖孙组件间通信

目录结构

在这里插入图片描述

App.vue

<template>
  <div class="app">
    <h1>我是App组件（祖），{{name}}---{{price}}</h1>
    <Child></Child>
  </div>
</template>

<script>
import {reactive, toRefs,provide} from 'vue'
import Child from "@/components/Child";

export default {
  name: 'App',
  components: {Child},
  setup(){
    let car=reactive({name:'奔驰',price:'40w'})

    provide('car',car)


    return{
      ...toRefs(car)
    }
  },
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h1>我是Child组件（子）</h1>
    <Son></Son>
  </div>
</template>

<script>
    import Son from "@/components/Son";
    export default {
        name: "Child",
      components: {Son}
    }
</script>

<style scoped>
.child{
  background-color: orange;
  padding: 10px;
}
</style>

Son.vue

<template>
  <div class="son">
    <h1>我是Son组件（孙），我接收到了，{{car.name}}----{{car.price}}</h1>
  </div>
</template>

<script>
import {inject} from 'vue'
export default {
  name: "Son",
  setup(){
    let car=inject('car')
    console.log("car",car)
    return{car}
  }
}
</script>

<style scoped>
.son{
  background-color: pink;
  padding: 10px;
}
</style>

在这里插入图片描述

总结

  1. 作用：实现祖与后代组件间通信
  2. 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据
  3. 具体写法
    （1）祖组件中：
setup(){
    ······
    let car=reactive({name:'奔驰',price:'40w'})
    provide('car',car)
    ······
  },

（2）后代组件中：

setup(props,context){
    ······
    let car=inject('car')
    return{car}
    ······
  },

响应式数据的判断

App.vue

<template>
  <div class="app">
    <h1>我是App组件（祖），{{name}}---{{price}}</h1>
  </div>
</template>

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

export default {
  name: 'App',
  setup(){
    let car=reactive({name:'奔驰',price:'40w'})
    let x=ref(0)
    let car2=readonly(car)

    console.log("isReactive(car)",isReactive(car))
    console.log("isRef(x)",isRef(x))
    console.log("isReadonly(car2)",isReadonly(car2))
    console.log("isProxy(car2)",isProxy(car2))


    return{
      ...toRefs(car)
    }
  },
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

在这里插入图片描述

总结

  1. isRef：检查一个值是否为一个ref对象
  2. isReac：检查一个对象是否由reactive创建的响应式代理
  3. isReadonly：检查一个对象是否由readonly创建的只读代理
  4. isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

组合式API的优势

配置式的API存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改

在这里插入图片描述在这里插入图片描述

组合式API的优势

更加优雅的组织代码，函数。让相关功能的代码更加有序的组织在一起。
在这里插入图片描述
在这里插入图片描述

VillanelleS
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
主要介绍了稍微学一下 Vue 的数据响应式（Vue2 及 Vue3），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【Vue3 第六章】ref、toRef、toRefs、toRaw 方法应用
前端知识分享喵
12-29 3753
ref、toRef、toRefs、toRaw 方法应用
vue3学习 4.toRaw
热门推荐
weixin_43152108的博客
06-25 1万+
1.toRaw 获取原始数据不是引用关系 而是全等关系 1.toRaw 从Reactive或Ref中得到原始数据 2.toRaw作用 做一些不想被监听的事情(提升性能) let obj ={name:'zs',age:19} /* ref/reactive数据类型的特点: 每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的 所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,
vue3中markRaw详解
最新发布
Br不二
04-01 750
在 Vue 3 中，`markRaw` 是一个用于告诉 Vue 的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象，并且你确定你不需要它成为响应性对象时，你可以使用 `markRaw` 来标记它
13.（vue3.x+vite）组件间通信方式之provide与inject.rar
09-19
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue3.0数据响应式原理详解
10-16
主要介绍了Vue3.0数据响应式原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3中toRaw使用
u013594477的专栏
11-26 4429
1、toRaw使用场景 ref/reactive数据类型每次修改都会被追踪，都会更新UI界面，但是这样是非常消耗性能的，所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么这个时候我们就可以通过toRaw方法拿到它的原始数据，对原始数据进行修改，这样就不会被追踪，这样就不会更新UI界面，这样性能就好了。 reactive: <template> <p>{{state}}</p> <button @click="myFn">按钮点击<
Vue3实用技巧：详解toRaw和markRaw的应用场景，让你快速还原数据并使其不再成为Vue3中的响应式对象
weixin_43263566的博客
10-02 3590
toRaw 与 markRaw （还原数据，设置数据不会再成为响应式对象）
【vue3练习 -13】vue3使用toraw(),markRaw()
weixin_52941842的博客
09-07 1034
vue3使用toraw(),markRaw()
【vue3】使用toRaw，方法获取变量的原始值，便于调试
qq_17335549的博客
10-27 2879
【vue3】使用toRaw，方法获取变量的原始值，便于调试
【Vue3】toRaw与markRaw的使用和示例（转）
【敦厚的曹操】的专栏
08-23 1099
【Vue3】toRaw与markRaw的使用和示例（转）
简单说下vue3 toraw的作用
ejunda的博客
11-13 871
toRaw 是 Vue 3 中的一个函数，它的作用是将一个响应式对象转换为普通的 JavaScript 对象。需要注意的是，toRaw 只能用于 Vue 3 中创建的响应式对象，对于普通对象或 Vue 2 中的响应式对象，调用 toRaw 会直接返回输入对象本身，不做任何转换。如果对象是响应式的，我们可以使用 toRaw 将其转换为原始值，并对其进行一些非响应式的操作。获取原始值：通过调用 toRaw，可以获取到一个响应式对象的原始 JavaScript 对象，而不是它的代理对象。
vue3的toRaw和markRaw
weixin_45441173的博客
02-19 779
vue3的toRaw和markRaw
以响应式著称的Vue，为什么会提供toRaw和markRaw
程序员成长指北
11-01 636
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言众所周知，Vue作为典型得MVVM框架，是以响应式为基础，数据驱动视图。让我们开发起来更加方便，更加的得心应手。何为MVVM：MVVM是Model-View-ViewModel的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。保持应用程序逻辑和UI之间的清晰分...
vue3知识点：toRaw 与 markRaw
刘大猫
07-18 1814
vue3知识点：toRaw 与 markRaw
vue3组合式API的自定义事件
07-27
Vue 3 的组合式 API 提供了一种自定义事件的机制，可以让你在组合式 API 中使用自己定义的事件。在 Vue 3 中，你可以使用 `provide` 和 `inject` 来实现自定义事件的传递和监听。 首先，你需要在提供方组件中使用 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值