学习Vue3新特性了-Provide()/inject()

阿飞756
329 阅读2分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

前言

续接上文 Vue2 食用了太久了, Vue3 也发布很久很久了(只怪更新迭代太快(真是内卷太严重了...)), 本文将来学习一下 Vue3 的新语法 setup() 这是一个神奇的钩子, 与 Vue2.x 的 methods/watch/computed 等各写各的 不同, 在 Vue3 中 各种方法函数工具钩子都可写在 setup()内, 然后通过 return{} 返回.

对于 Vue3.x 听到的最多的高级功能更新就是 composition-api 了. 在 Vue2.x 中使用的 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效(因为组件化模块化一般一个.vue文件的行数建议不超过 300 行, 但是还是有很多同学就是会写出十倍 3000 行的.vue文件组件)。这就是当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人以及后续阅读/查找 bug/更新/迭代来说，这会导致组件难以阅读和理解, 就太不明显小麻烦了!

Vue3.x 的新特性学习 provide 和inject

对于使用Vue进行项目开发, 免不了组件化开发要封装各种各样的组件, 而这时封装组件用到的两个技巧: provide/ inject就比较有用了.

在 Vue3 中 provide/inject 同样可以方便的使用, 在上文学到的 setup() 函数中是这个它们, 注意: 两者都只能在当前活动实例的 setup() 期间调用

provide

provide 需要从 vue 手动显示地导入: import { provide } from 'vue', 然后在 setup() 中调用来定义每个属性

provide 使用方法: provide 函数允许通过两个参数定义属性键值对 property：

1. name (<String> 类型): property的
2. value


// 通过vue3文档的例子来进行理解
import { provide } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}

inject使用

同理provide: inject也是可以传递两个参数(property name & 值) 在 setup() 中使用时，也需要从 vue 手动显式导入.

参考文档

学贵坚持, 加油

更文带给我们的不只鼓励, 还帮我们养成习惯, 总结工作中重复的工作, 造轮子是每天的工作, 一遍又一遍, 下次遇到还是各种搜索各种找.

hxdm 一起加油吧!

avatar
文章
阅读
粉丝