• vue.extend,mixins和vue.component的区别


    1. Vue.extend

    Vue.extend就是传入一下组件options,然后返回了一个Vue的子类,也可以看做是一个组件构造函数。

    真的是一个Vue的子类,源码中,使用原型集成和Copy属性和方法形式,将其继承自Vue。

    const Sub = function VueComponent (options) {
        this._init(options)
    }
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(
        Super.options,
        extendOptions
    )
    Sub['super'] = Super

    2. Vue.component

    Vue.component是一个插件注册方法,就是把Vue.extend函数new出来的组件实例,注册到Vue的Options上。本质是也就是在全局Vue实例的Options,

    添加了一个key/value,value就是组件实例。由于组件的Options会继承Vue的Options,所以在任何组件中,都能调用该组件。

    Vue.component('global-component', Vue.extend(baseOptions));

    这是原始的调用方式,用Vue.extend注册一个组件。Vue内部对其进行了简化,可以省略调用Vue.extend,只传入Options就行了

    //传入一个选项对象(自动调用 Vue.extend),等价于上行代码.
    Vue.component('global-component', baseOptions);

    3. Vue.mixins

    mixins可以全局添加一些方法或属性,方便所有组件调用。可以用来添加通用的对象引用和方法

    Vue.mixin({
        data:{
            //组件中可以使用this.$axios来调用axios的方法,十分方便
            $axios: axios
        },
        methods: {
            //每个组件从全局store中取出用户信息
            getUser() {
                return store.getters.user;
            }
        }
    })

    总结:

    1. mixins是对Vue的Options进行添加,由于组件会继承Vue的options,相当于给所有实例添加了Options。用于添加公共行为。

    2. extend产生一个Vue子类,只会影响这个子类的实例对象,不会对Vue类本身即其他Vue组件实例产生影响。

  • 相关阅读:
    Effective Java 的笔记(二)
    设计模式系列 装饰模式
    一道多线程题目的解决方案
    Effective Java 的笔记(一)
    Java 并发编程实践
    【转】微博技术底层架构的实现
    Head First JavaScript 笔记
    JVM 学习笔记 类的加载和执行
    背包问题
    Oracle 序列号通过定时任务重置
  • 原文地址:https://www.cnblogs.com/mengff/p/12890968.html
Copyright © 2020-2023  润新知