Vue开发中一些『非常规』手段

Posted 2021-09-15 凌雁飞鸿

开发过程中偶尔也会遇到比较特殊、复杂的业务场景，这时候使用一些冷门的、特殊的技术解决方案往往会起到柳暗花明的作用，了解一些也有助于知识面的扩展。

一、provide和inject

常见于各类组件库中，并不推荐直接使用在业务代码中。不论嵌套有多深；子孙组件通过inject来接收。

//父组件:
provide: { //provide 是一个对象,提供一个属性或方法
  foo: \'这是 foo\',
  fooMethod:()=>{
    console.log(\'父组件 fooMethod 被调用\')
  }
},

// 子或者孙子组件
inject: [\'foo\',\'fooMethod\'], //数组或者对象,注入到子组件
mounted() {
  this.fooMethod()
  console.log(this.foo)
}
//在父组件下面所有的子组件都可以利用inject

注意事项：
1.provide和inject必须成对使用；
2.provide和inject绑定并不能响应（但是对于引用类型，因为JS的特性还是可以做到相应的）。

二、$root

// 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}

三、Vue.observable

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象;
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新;
也可以作为最小化的跨组件状态存储器，用于简单的场景。
通讯原理实质上是利用Vue.observable实现一个简易的vuex

// 文件路径 - /store/store.js
import Vue from \'vue\'

export const store = Vue.observable({ count: 0 })
export const mutations = {
  setCount (count) {
    store.count = count
  }
}

//使用
<template>
    <div>
        <label for="bookNum">数 量</label>
            <button @click="setCount(count+1)">+</button>
            <span>{{count}}</span>
            <button @click="setCount(count-1)">-</button>
    </div>
</template>

<script>
import { store, mutations } from \'../store/store\' // Vue2.6新增API Observable

export default {
  name: \'Add\',
  computed: {
    count () {
      return store.count
    }
  },
  methods: {
    setCount: mutations.setCount
  }
}
</script>

四、render函数

在做一个用户自定义页面内容块的需求中用到了这个东西。如果在一个template中有很多重复的代码时可食用render()进行优化。

// 根据 props 生成标签
// 初级
<template>
  <div>
    <div v-if="level === 1"> <slot></slot> </div>
    <p v-else-if="level === 2"> <slot></slot> </p>
    <h1 v-else-if="level === 3"> <slot></slot> </h1>
    <h2 v-else-if="level === 4"> <slot></slot> </h2>
    <strong v-else-if="level === 5"> <slot></slot> </stong>
    <textarea v-else-if="level === 6"> <slot></slot> </textarea>
  </div>
</template>

// 优化版,利用 render 函数减小了代码重复率
<template>
  <div>
    <child :level="level">Hello world!</child>
  </div>
</template>

<script type=\'text/javascript\'>
  import Vue from \'vue\'
  Vue.component(\'child\', {
    render(h) {
      const tag = [\'div\', \'p\', \'strong\', \'h1\', \'h2\', \'textarea\'][this.level-1]
      return h(tag, this.$slots.default)
    },
    props: {
      level: {  type: Number,  required: true  } 
    }
  })   
  export default {
    name: \'hehe\',
    data() { return { level: 3 } }
  }
</script>

五、异步组件

作用不必赘述，下面是实现异步组件的几种方法。

// 工厂函数执行 resolve 回调
Vue.component(\'async-webpack-example\', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包, 这些包
  // 会通过 Ajax 请求加载
  require([\'./my-async-component\'], resolve)
})

// 工厂函数返回 Promise
Vue.component(
  \'async-webpack-example\',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import(\'./my-async-component\')
)

// 工厂函数返回一个配置化组件对象
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import(\'./MyComponent.vue\'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})