Использование и различие между расширениями, расширениями, минсинами, минсинами в Vue

Vue.js

предисловие

Начинающий Вью. Расширение, расширение, минксин и минксин не были хорошо поняты. После долгих исследований я пришел к следующим выводам. Если есть какая-либо ошибка, пожалуйста, поправьте меня.

1.Vue.extend

Официальное объяснение Vue.extend

Vue.extend — этоГлобальныйAPI фактически создает конструктор и монтирует его в элемент HTML (создает тег шаблона). Параметры можно передавать через propsData.

    <h1>Vue.extend</h1>
    <hr>
    <div id="element">
        <h1>Hello!</h1>
    </div>
    <hr>
    <author></author>
    <hr>
    <div id="transmit"></div>

Примечание. Содержимое внутри смонтированного элемента будет перезаписано.

    var Profile1 = Vue.extend({
    template: '<p>My name is {{Name}}</p>',
    data: function () {
        return {
        Name: 'ElucidatorSky'
        }
      }
    })
    // 输出 Profile1 实例，在控制台输出为VueComponent{}
    console.log(new Profile1());
    // 创建 Profile1 实例，并挂载到一个元素上。
    new Profile1().$mount('#element')

    var Profile2 = Vue.extend({
        template:"<p>{{Name}}</p>",
        data:function(){
            return{
                Name:'ElucidatorSky'
            }
        }
    });   
    // 创建 Profile2 实例，并挂载到一个元素上。
    new Profile2().$mount('author');

    var Profile3 = Vue.extend({
        template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',
        data: function () {
            return {
            extendData: '这是extend扩展的数据',
            }
        },
        props:['propsExtend']
    })
    // 创建 Profile 实例，并挂载到一个元素上。可以通过propsData传参.
    new Profile3({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#transmit')

после бега

Зачем использовать расширение

В проекте vue, после того, как у нас есть инициализированный root instance, все страницы в основном управляются роутером, а компоненты тоже локально регистрируются импортом, поэтому нам не нужно обращать внимание на создание компонентов, что более важно экономичнее, чем растянуть сердце. Но это имеет несколько недостатков:

Шаблоны компонентов предопределены. Что, если я хочу динамически отображать компоненты из интерфейса? Весь контент находится в#appРендеринг вниз, зарегистрированные компоненты визуализируются в текущей позиции. Если бы я реализовал такую ​​программу, какwindow.alert()Что делать, если компонент подсказки просит вызвать его как функцию JS? В этот момент,Vue.extend + vm.$mountКомбинация пригодится.

2.extends

Официальное объяснение

extends — это опция, в основном для облегчения расширения однофайловых компонентов. Но полученный параметрпростой объект опцийилиКонструктор, так что extends может толькоРасширяйте один компонент за раз

// extends示例
var CompA = { 
            created:function(){
                console.log("我是被扩展出来的");
                }
            }
extends: CompA

консольный вывод

3. Vue.mixin и минксины

Официальное объяснение Vue.mixin

Vue.mixin — это миксин. Функция миксина заключается в том, что несколько компонентов могут совместно использовать данные и методы.После введения в компонент, использующий миксин, методы и атрибуты миксина также включаются в компонент и могут использоваться напрямую. Vue.mixin() может смешивать ваши пользовательские методы со всеми экземплярами Vue (то есть, все добавленные компоненты будут иметь смешанные ваши пользовательские методы).

// mixins示例        
//全局混入
Vue.mixin({
    created:function(){
        console.log('我是全局被混入的');
    }
})
var mixin = {
  created: function () { console.log('我是外部被混入的') }
}
var app = new Vue({
// 局部混入
  mixins: [mixin]
})

Особенности миксинов: методы и параметры не являются общими для компонентов

номер параметра в объекте миксина

export default {
    data() {
        return {
            num: 1,
        }
    },
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('hello form mixinIn')
        }
    }
}

Номер параметра в компоненте 1 выполняет операцию +1

<template>
  <div class="template1">
      <p><button @click="addone">组件1</button></p>
      template1里的num:{{num}}
  </div>
</template>

<script>
import mixinIn from '../assets/mixinIn'
export default {
    mixins: [mixinIn],
    methods:{
        addone(){
            this.num++
        }
    }
}
</script>

Параметр в компоненте 2 выполняет операцию +2

<template>
  <div class="template1">
      <p><button @click="addtwo">组件2</button></p>
      template2里的num:{{num}}
  </div>
</template>

<script>
import mixin from '../assets/mixinIn'
export default {
    mixins: [mixin],
    methods:{
        addtwo(){
            this.num+=2
        }
    }
}
</script>

Компонент 1, число в компоненте 2 не влияют друг на друга

И примеси, и расширения могут создавать файлы js извне и ссылаться на них через импорт.

//全局引用mixin
import mixin1 from './mixin1'
import Vue_extend from './Vue_extend'
var Profile1 = Vue.extend(Vue_extend)
new Profile1().$mount('#app')
Vue.mixin(mixin1)
//局部引用mixin
import mixin2 './mixin2'; // 引入mixin文件
import extend './extend'; // 引入mixin文件
export default {
   mixins: [mixin2],
   extend: extend
}

разница между ними

import Vue from 'vue'
import mixin1 from './assets/mixin1'
import mixin2 from './assets/mixin2'
import Vue_extend from './assets/Vue_extend'
import extend from './assets/extend'
var Profile1 = Vue.extend(Vue_extend)
Vue.mixin(mixin1) // 先混入
new Profile1().$mount('#app')  // 再挂载 先挂载则全局混入不进去
export default {
  name: 'App',
  mixins:[mixin2],
  extends: extend,
  created() {
      console.log("我是原生app的")
  }
}

mixin1.js

export default {
    created() {
        console.log('我是全局混入的mixin1')
    }
}

mixin2.js

export default {
    created() {
        console.log('我是局部混入的mixin2')
    }
}

extend.js

export default {
    created() {
        console.log('我是局部扩展的')
    }
}

Vue_extends.js

export default {
    created() {
        console.log('我是全局扩展的')
    }
}

результат

Мы видим, что глобальный mixin1 смешивается с смонтированным Vue_extend и расширенным расширением.

Сначала вызовите mixin1 на монтировании миксина: «Я миксин1 глобального миксина».

Затем выведите смонтированный Vue_extend: «Я глобально расширен»

Затем выведите mixin1 в собственное приложение: «Я глобально смешанный mixin1».

Затем выведите mixin1, смешанный с расширением: «Я миксин1, смешанный глобально»

Затем расширение вывода расширено: «Я локально расширен»

Затем выведите локально смешанный миксин2: «Я локально смешанный миксин2»

Окончательный вывод нативного приложения: «Я нативное приложение».

Из этого видно

  1. расширение будет смешано Vue.mixin
  2. Если компонент микшируется, миксин выполняется первым
  3. Порядок выполнения: Vue.extends > Vue.mixin, смешанный с нативным приложением > extends > mixins > нативное приложение

Справочная статья

Несколько операций расширения, примеси, расширения, компоненты, установка в Fire Wolf 1 vue

Видеоурок по Tech Fat Vue

Категории