Vue3-5-响应式数据处理

    name: '宝马',

    color: 'red'

  }

})

const m2=readonly(m1)

const m3=shallowReadonly(m1)

const updata = () => {

  // m2.name+='=='

  // m2.car.name+='=='

  // m3.name+='=='

  m3.car.name+='=='

  /*

  * readonly的只读是深层次的，所有数据都不能修改

  * shallowReadonly的只读是浅层次的，里面的数据是可以修改的

  */

}

return{

  m2,m3,updata,

}

}

})

[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)toRaw 与 markRaw

==================================================================================



1.  toRaw返回由 reactive 或 readonly 方法转换成响应式代理的普通对象

2.  这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新

3.  markRaw标记一个对象，使其永远不会转换为代理。返回对象本身

4.  应用场景:  

    有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象  

    当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能

toRaw 与 markRaw

{{m1}}

---

<button @click=“clicktoRaw”>点击 toRaw

<button @click=“clickmarkRaw”>点击 markRaw

[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)toRef

========================================================================



1.  为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的

2.  区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响

3.  应用: 当要将 某个prop 的 ref 传递给复合函数时，toRef 很有用

clicktoRef

{{m1}}

---

<button @click=“clicktoRef”>点击 clicktoRef

[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)customRef

============================================================================



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

2.  自定义hook函数防抖

customRef

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

h1>

{{keyword}}

[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)provide 与 inject

===================================================================================



1.  provide和inject提供依赖注入，功能类似 2.x 的provide/inject

2.  实现跨层级组件(祖孙)间通信



*   app.vue

provide 与 inject

{{color}}

<button @click=“color=‘red’”>点击

<button @click=“color=‘yellow’”>点击

<button @click=“color=‘pink’”>点击

---

*   son.vue

son组件

---

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

ame:‘App’,

components:{

son,

},

setup() {

const color=ref(‘red’)

provide('color',color)

return {

  color

}

}

})

*   son.vue

son组件

---

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。