vue3 provide与inject的使用小技巧分享

目录

• vue3 provide与inject使用技巧
• 进入正题
• 父组件
• child组件
• son组件
• vue3的一些实用技巧
• v-for 和 v-if 不要一起使用（Vue2）

vue3 provide与inject使用技巧

主要使用来沟通上下文，比如父——子——子1——子2，父组件和子2组件间的通信，不使用这方法也能解决的方式还有两种

• props $emit 一层一层的传 弊端：写着太麻烦
• vuex 用多了性能就不太行了

进入正题

官方文档上只提供了传递值的方式，没有提供子组件去跨级改父级组件的值，但是可以换一种写法就可以了，直接代码

代码结构： 父组件——child组件——son组件

父组件

ps: 当然也可以换一种写法 这一种写法要简便一点 但是语义化更弱 

const state: any = reactive({
  name: 'zlz',
  age: 24,
  update // 更新state的方法
})
provide('ref2', state)

child组件

son组件

vue3的一些实用技巧

v-for 和 v-if 不要一起使用（Vue2）

此优化技巧仅限于Vue2，Vue3 中对 v-for 和 v-if 的优先级做了调整，

永远不要把 v-if 和 v-for 同时用在同一个元素上

原因是 v-for 的 优先级高于 v-if，所以当它们使用再同一个标签上是，每一个渲染都会先循环再进行条件判断

注意： Vue3 中 v-if 优先级高于 v-for，所以当 v-for 和 v-if 一起使用时效果类似于 Vue2 中把 v-if 上提的效果

例如下面这段代码在 Vue2 中是不被推荐的，Vue 也会给出对应的警告

  

    {{ user.name }}
  

我们应该尽量将 v-if 移动到上级 或者 使用 计算属性来处理数据

  

    {{ user.name }}
  

如果你不想让循环的内容多出一个无需有的上级容器，那么你可以选择使用 template 来作为其父元素，template 不会被浏览器渲染为 DOM 节点

如果我想要判断遍历对象里面每一项的内容来选择渲染的数据的话，可以使用 computed 来对遍历对象进行过滤

// js
let usersActive = computed(()=>users.filter(user => user.active))
// template

    

      {{ user.name }}
    

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。