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

Delete it if you don’t see it again! Large factory front end test questions (link failure please click the original text)

How do I set the alignment of individual elements of the spindle in Flex layout? Illustration-self does not work in Flexbox.

All that stuff about me redeveloping Yapi