Vue開発におけるいくつかの『非常規』手段(一)

開発の過程でたまに特殊で複雑なビジネスシーンに遭遇することもあります.この時、いくつかの冷たい、特殊な技術ソリューションを使用すると、柳暗花明の役割を果たし、知識面の拡張にも役立ちます.
一、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
  }
}

//  



import { store, mutations } from '../store/store' // Vue2.6  API Observable

export default {
  name: 'Add',
  computed: {
    count () {
      return store.count
    }
  },
  methods: {
    setCount: mutations.setCount
  }
}

四、render関数
これは、ユーザーがページコンテンツブロックをカスタマイズする必要がある場合に使用されます.1つのtemplateに重複するコードが多数ある場合、render()を使用して最適化できます.

//    props     
//   


//    ,   render           



  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 } }
  }

五、非同期コンポーネント
作用は言うまでもなく、非同期コンポーネントを実現するためのいくつかの方法である.

//        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
})