require.context, watch 的immediate配合handler-- Vue 开发必须知道的 36 个技巧

https://juejin.im/post/5d9d386fe51d45784d3f8637  Vue 开发必须知道的 36 个技巧

https://www.itread01.com/content/1548038172.html webpack 之 require.context 用法


If you want to use your image as a module, do not forget to bind data to your vuejs component

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "./assets/logo.png"


export default {
    data: function () {
        return {
            image: image
        }
    }
}
</script>

<style lang="scss">
</style> 

And a shorter version :

<template>
  <div id="app">
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style> 

require.context
the example below is easy to understand, and it seems like if the modules you want to import are not very much, then writing in "require.context" way is more complicated.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

Just to support relatively little markup in a template:

<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

Fortunately, if you’re using Webpack (or Vue CLI 3+, which uses Webpack internally), you can use require.context to globally register only these very common base components. Here’s an example of the code you might use to globally import base components in your app’s entry file (e.g. src/main.js):

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of the components folder
  './components',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

watch    一般watch最初綁定的時候是不會執行的
的immediate配合handler，將可以取得oldValue與newValue，而且immediate會讓最初綁定時也觸法watch
的deep配合handler，將可以取得oldValue與newValue(不確定)，並且會同時監聽他的子層，當子曾有改變時也會觸發他（當然爾，它的消耗大）
https://cythilya.github.io/2017/04/15/vue-watch/  Summer。桑莫。夏天https://blog.csdn.net/Amanda_wmy/article/details/83749560 
vue.js监听属性watch(handler方法immediate属性deep属性)