vue2升级vue3:provide与inject 使用注意事项

provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。

在善用依赖注入之前是，我们先来了解一些概念，帮助我们更全面的了解依赖注入的前世今生

IOC 和DI 是什么

控制反转（Inversion of Control，缩写为IoC），是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。其中最常见的方式叫做依赖注入（Dependency Injection，简称DI），还有一种方式叫“依赖查找”（Dependency Lookup）。通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体，将其所依赖的对象的引用传递(注入)给它。

什么是依赖注入

依赖注入用大白话来说：就是将实例变量传入到一个对象中去

在vue中，我们套用依赖注入的概念，其实就是在父组件中声明依赖，将他们注入到子孙组件实例中去，可以说是能够很大程度上代替全局状态管理的存在！

VUE provide 和 inject 使用场景

当我们需要从父组件向子组件传递数据时，我们使用 props。

而一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。

若仍然将 prop 沿着组件链逐级传递下去的话，可能会很麻烦。

VUE提供了provide 和 inject来解决了这个问题。

无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

这个比 react 的 createContext 和 useContext 使用简单！也好理解些！当然熟悉react的，还可以参考：https://github.com/zephraph/vue-context-api

在vue2.x中使用provide 和 inject

父组件

export default {
  name: "provide",
  data() {return {host:'zhoulujun.cn'}},
  components: {
    inject,
  },
  provide: {
    site: "zhoulujun.cn",
  },
};

子组件使用

export default {
  name: "inject",
  inject: ["showName"],
};

如果 provide 需要使用 data 内的数据时，需要将 provide 转换为返回对象的函数。

export default {
  name: "provide",
  data() {return {host:'zhoulujun.cn'}},
  components: {
    inject,
  },
  provide(){return{site:this.host}},
};

具体参看：https://v2.vuejs.org/v2/api/#provide-inject

在vue3.x中使用provide 和 inject

vue3用方法太多，这里具体看官方案例

具体参看：https://vuejs.org/guide/components/provide-inject.html

需要注意的事项：

• 在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

• 为了给 provide/inject 添加响应性，使用 ref 或 reactive 。

父组件

import { provide } from 'vue'
export default {
  setup(){
    let site = ref("zhoulujun.cn")
    provide('site',site)
  }
}

子组件

import { inject } from 'vue'
export default {
  setup(){
    const site = inject('site')
    return{
      site
    }
  }
}

上述示例，在父组件或子组件都会修改 info 的值。

provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢？就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。

在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。

readonly 只读函数，使用之前需要引入，如果给变量加上 readonly 属性，则该数据只能读取，无法改变，被修改时会发出警告，但不会改变值。

//发布
let info = ref("今天你学习了吗？")
const changeInfo = (val)=>{
 info.value = val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)

//订阅
const info = inject('info')
const chang = inject('changeInfo')
chang('冲向前端工程师')

所以我们就给provide发射出去的数据，添加一个只读属性，避免发射出去的数据被修改。

参考链接：

react的createContext及useContext 和 vue3的 provide 及 inject https://blog.csdn.net/skyblacktoday/article/details/124044886

vue 3 学习笔记 (八)——provide 和 inject 用法及原理 https://juejin.cn/post/7034679042540306440

转载本站文章《vue2升级vue3:provide与inject 使用注意事项》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8871.html