navigation

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise

[react] Hooks

[Deployment 01] Nginx [Deployment 02] Docker deployVue project [Deployment 03] gitlab-CI

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex [source -vue01] Data reactive and initialize render [source -vue02] Computed responsive – Initialize, access, Update Procedure [source -vue04] Watch Listening properties – Initialize and update [source -vue04] vue. set and vm.$set [source -vue05] vue.extend

Vue. NextTick and VM.$nextTick

Front knowledge

Some words

Built-in tag: Reserved: If the tag is reserved so that it cannot be registered as a component, specification: The html5 specification allows further extension/mixin/plugin usage...Copy the code

(1) Component registration

Global registration and local registration
(1) Global registration
- Vue.component( id, [definition] )
  - parameter
    - Id: String, can be MyComponent or My-Component
    - Definition: Optional, function or object
      - Data must be a function
      - Do not include the el
  - role
    - Register or get global components
    - Globally registered components can be in
  - Note:
    - The (data) in the Definition object must be (function) so that each component instance can maintain a separate copy of the returned object
    - Id can be a string written either MyComponent or my-Component
    - A globally registered component can be used by all child components
(2) Local registration
- Local registration is done through the Components property object in the parameter object of new Vue()
Case 123

1. // Register the component, passing in an extended constructor Vue.component('my-component', Vue.extend({ /* ... */})) // Register the component, passing in an option object (automatically calling vue.extend) Vue.component('my-component'{/ *... // Get the registered component(always return the constructor) var MyComponent = Vue.component('my-component') -- -- -- -- -- -- -- -- -- -- -- -- -- -- 2. The Base/BaseButton ts global registered components / / / / 1. 2. If it is a.vue file, use webpack's require.context Vue.component('BaseButton', {
  data() {
    return {
      message: 'This is a base component -button'} }, template: '<div> <div>BaseButton</div> <div>{{message}}</div> </div>',})true// vue.config.js module.exports = {runtimeCompiler:true. / / the runtime + compiler version} -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3. Base/BaseButton ts -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- simple Vue.com ponent BaseButton global registration Components/BaseButton. Vue -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- use the require. The context to achieve all of the components in the Base folder of the automatic global registration/index. The ts -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Automatic global registration logic index.ts is as follows -- import Vue from'vue'
const requireContext = require.context('. '.false. /\.vue$/) requireContext.keys().forEach(fileName => { const componentModule = requireContext(fileName) const component =  componentModule.default Vue.component(component.name, component) })Copy the code

Context in vue: cn.vuejs.org/v2/guide/co…

(2) Vue.extend( options ) – api

parameter
- Options: An object containing component options
- Note:
  - Options. data must be a function
  - Vue.component() 和 Vue.extend()Parameter object ofdataIt has to be onefunction
usage
- Using the underlying Vue constructor, create a subclass
Case (encapsulating a global base TOAST component)
- Toast is a basic component that will be used in several places, so don’t import it and register it in Components, instead hang it on Vue.prototype
- The TOAST components are not placed in the Vue project’s DOM root node, which would be affected by routing, but are independent nodes

Base Global Base component directory structure SRC/Components/Base/index.js/toast.vueCopy the code

src/components/base/toast.vue

The first step: 1. Normal write a toast to show the component 2. Toast in the component data through the Vue. The extend to generate a subclass of the parameters of the instance of the object in the data to modify/SRC/components/base/toast. Vue] < template > <div class="base-toast"
    v-if="show"
    :class="[animateFn, backgrondType]"
  >{{message}}</div>
</template>
<script>
export default {
  name: "BaseToast".data() {
    return {
      message: ""// toast:true, // show the hidden fade:true, // Show the hidden animationtype: "".typeArr: ['error'.'success']}; }, computed: {backgrondType() {
        return 'toast-' + this.typeArr.find(type)},animateFn() {
        return this.fade ? 'fadein' : 'fadeout'}}}; </script> <style lang="css"> .base-toast { padding: 10px; Background: rgba(0, 0, 0, 0.5); position: absolute; left: 50%; top: 10px; transform: translate(-50%, 0); display: inline-block; margin: 0 auto; text-align: center; }.fadein {animation: animation_fade_in 0.5s; }.fadeout {animation: animation_fade_out 0.5s; } @keyframes animation_fade_in { from { opacity: 0; } to { opacity: 1; } } @keyframes animation_fade_out { from { opacity: 1; } to { opacity: 0; } } .toast-success { background: green; } .toast-error { background: red; } </style>Copy the code

src/components/base/index.js

- the second step: [SRC/components/base/index, js] import Vue the from"vue";
import Toast from "./toast.vue";

const generatorToast = ({ message, type, duration = 200 }) => { const ToastConstructor = Vue.extend(Toast); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - Vue. The extend () to generate the Vue subclass const toastInstance = new ToastConstructor ({/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- new subclass, Create component instance EL: document.createElement("div"), // -------------------------- The component is attached to the nodedata() {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- will and Toast in the component data mergingreturn {
        message,
        type,
        show: true,
        fade: true}; }});setTimeout(() => {
    toastInstance.fade = false; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- animation, perform} ahead of time, duration - 500);setTimeout(() => {
    toastInstance.show = false; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- show hidden}, duration). document.body.appendChild(toastInstance.$el); // ---------------- component hangs in position};exportThe default {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- install plugin object methodinstall() {
    Vue.prototype.$BaseToast= generatorToast; }}; // Option can be a function or an object with an install method. // Here we wrap toast/index as a Vue plug-in and register it with vue.use ()Copy the code

SRC /main.js entry file

Step 3: [SRC/main js entry file] 1. Introduce the SRC/components/base/index, js 2. Vue. Use () to register the plugin import Vue the from'vue'
import App from './App.vue'
import Toast from './components/base'

Vue.config.productionTip = falseVue. Use (Toast) / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Vue plug-in registered new Vue ({render: h = > h (App),}).$mount('#app')

Copy the code

src/App.vue

Step 4: [SRC/app.vue] 1. Use <template> <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
    this.$BaseToast({/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- by this.$BaseToast() calls the message:'111',
      duration: 3000,
      type: 'error'
    })
  }
}
</script>

Copy the code

Vue. The extend () the source code

In one sentence: Using the base Vue constructor, create a subclass

Vue.extend = function(extendOptions) { extendOptions = extendOptions || {}; Var Super = this; var Super = this; Var SuperId = super.cid; // SuperId => id var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}); // cachedCtors // Used to cache Constructor // without the _Ctor property in the argument object, assign extendOptions._Ctor = {} to an empty objectif(cachedCtors[SuperId]) {// Cache exists, return directlyreturncachedCtors[SuperId] } var name = extendOptions.name || Super.options.name; // Select * from 'options'; // Select * from' options'if(name) { validateComponentName(name); // validateComponentName() validates name validity // 1. Can't be a built-in tag name like slot Component // 2. } var Sub =.} var Sub =functionVueComponent(options) {// define subclass this._init(options); }; Sub.prototype = Object.create(Super.prototype); / / pointed to prototype prototype (subclass) (parent prototype) / / (subclass instance) can inherit (superclass prototype) on the properties and methods of Sub. The prototype. The constructor = Sub; // make sure that prototype.constructor doesn't point to Sub sub. cid = cid. ++; Sub.options = mergeOptions( Super.options, extendOptions ); // Merge options => merge the options and parameter objects of the parent class Sub['super'] = Super; // Mount the super attribute on the subclass, // For props and computed properties, we define the proxy getters on // the Vue instances at extension time, on the extended prototype. This // avoids Object.defineProperty callsfor each instance created.
  if (Sub.options.props) {
    initPropsThe $1(Sub); // this[propName] is the props function. // this[propName] is the props function.if (Sub.options.computed) {
    initComputedThe $1(Sub); } // allow further extension/mixin/plugin usage // sub.extend = super.extend; Sub.mixin = Super.mixin; Sub.use = Super.use; // create asset registers, so extended classes // can have their private assets too. ASSET_TYPES.forEach(function (type) {
    Sub[type] = Super[type]; }); Component directive filter // var ASSET_TYPES = [//'component', / /'directive', / /'filter'
    // ];

  // enable recursive self-lookup
  if(name) { Sub.options.components[name] = Sub; } sub.superoptions = super.options; Sub.extendOptions = extendOptions; Sub.sealedOptions = extend({}, Sub.options); // cache constructor cachedCtors[SuperId] = Sub; / / SubreturnSub // return Sub};Copy the code

data

Vue. The extend source juejin. Cn/post / 684490… Vue. The extend source zhuanlan.zhihu.com/p/121799032 toast component 1 juejin. Cn/post / 684490… Toast Component 2 juejin.cn/post/684490…

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[vue source 05] – vue.extend

navigation

Front knowledge

Some words

(1) Component registration

(2) Vue.extend( options ) – api

Vue. The extend () the source code

data

[vue source 05] – vue.extend

navigation

Front knowledge

Some words

(1) Component registration

(2) Vue.extend( options ) – api

Vue. The extend () the source code

data

Related Posts

React V16 + Latest lifecycle scenarios

[Deep 08] Front end security

I swear by the end of this article I will understand how mobile ADAPTS to those transformations