Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗?

william 发布于2019-08-23 18:22 / 1022人阅读

摘要：有关系吗没关系面试的时候总会问如何在的实例上挂载一个方法属性也就是的小技巧但是突然有人问他俩有啥关系还真是新鲜我想应该是网上有文章写是用法的但是没有说明的用法以及为什么就能在组件内这么调用所以下面我就细细的说下说能学会啥看完本文能掌握如何定

有关系吗?

没关系, 面试的时候总会问如何在Vue的实例上挂载一个方法/属性, 也就是Vue.prototype的小技巧, 但是突然有人问他俩有啥关系还真是新鲜.

我想应该是网上有文章写Vue.prototype.$xx是用法的, 但是没有说明Vue.use的用法以及Vue.prototype.$xx为什么就能在组件内this.$xx 这么调用, 所以下面我就细细的说下.

说能学会啥?

看完本文, 能掌握如何定义一个Vue插件, 以及Vue.prototype.$xx的原理.

Vue.use 用饿了么UI举例

下面是饿了么UI的引入代码, 大家对这段应该很熟悉了.

import Vue from "vue"
import Element from "element-ui"
Vue.use(Element)

接下来, 我们在看下这个Element是什么

这里我们看到Element是个对象, 上面有version等字段, 其中还有一个install,他是本文的主角, Vue.use就是要运行这个install对应的函数.

最小结构

写一段最少的代码演示如何用Vue.use初始化插件:

// 插件
const plugin = {
  install(){
    document.write("我是install内的代码")
  }
}

// 初始化插件
Vue.use(plugin); // 页面显示"我是install内的代码"

在codepen上看预览

如果想知道插件的具体实现, 请看 https://cn.vuejs.org/v2/guide...

总结

Vue的插件是一个对象, 就像Element.

插件对象必须有install字段.

install字段是一个函数.

初始化插件对象需要通过Vue.use().

扩展学习

Vue.use()调用必须在new Vue之前.

同一个插件多次使用Vue.use()也只会被运行一次.

Vue.prototype.$xx

好了, 回过头我们再看眼上面的图片, 是不是发现了熟悉的代码:

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
...

Vue.prototype 的用法我相信大家都会用, 我做过调查, 我就不啰嗦了, 但是我发现大家好像不知道"所以然".

所以然

为什么初始化的时候运行了Vue.prototype.$alert, 然后就可以在任意组件内部运行this.$alert()了呢? 首先要了解构造函数, 实例, 原型(prototype)这3个概念.

构造函数, 实例, 原型(prototype)

这3个概念有点老生常谈了, 百度一搜很多解释, 我先举个例子来和Vue类比你就明白他俩了.

首先我写个假的Vue我们叫他AVue, 恩, 他是个"赝品", "A货", 接下来跟我一步一步走:

1. AVue是个构造函数

这里我们只模拟下methods功能.

function AVue({methods}){
    for(let key in methods){
        this[key] = methods[key];
    }
}

2. 给AVue的原型上放个$alert

AVue.prototype.$alert = ()=>{document.write("我是个赝品!")}

3. 实例化AVue

实例化Vue的时候我们知道, 我们会传入一个对象, 对象里面有data/methods等, 我的AVue一样, 下面我们让AVue也学Vue那样实例化:

// 我只山寨了methods, 所以只能学methods喽
const av = new AVue({
    methods: {
        say(){
            this.$alert(); 
        }
    }
});

// 调用一下say
av.say(); // 我是个赝品!

在codepen上预览

总结

好了, 运行到这里, 我想你应该看明白了吧, 之前大家写的Vue.prototype.$xx其实只不过是js中函数原型的特性罢了: 函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取, 要不你也做个"赝品"试下.

扩展

vue让大家知道了defineProperty, 我们自己也可以用下他, 比如让Vue.prototype变成不可写的, 防止被覆盖.

Object.defineProperty(Vue.prototype, "$alert", {
    writable: false,
    value(){
        console.log("我是行货!")
    }
});

课后练习

建议大家可以随便写一个vue的插件练手, 比如我的练手项目就是他:

命令式调用vue组件
https://github.com/any86/vue-...

GPU云服务器云服务器栈和队列面试题血缘关系面试题栈面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105120.html

「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
面试被问到Vue?想进一步提升?那就停下来看一下吧

摘要：两个对象键名冲突时，取组件对象的键值对。允许声明扩展另一个组件可以是一个简单的选项对象或构造函数，而无需使用。这主要是为了便于扩展单文件组件。 Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在...

andot 2019-08-26 14:05 评论0 收藏0
vue之插件编写

摘要：插件分类插件通常会为添加全局功能，插件的编写方法一般分为类，如上图所示的插件应当有一个公开方法。前言前段时间看到黄轶老师的一篇文章感触颇多。特别是下面这一段话插件 Vue 化引发的一些思考这篇文章我不仅仅是要教会大家封装一个 scroll 组件，还想传递一些把第三方插件（原生 JS 实现）Vue 化的思考过程。很多学习 Vue.js 的同学可能还停留在 XX 效果如何用 Vue....

xuexiangjys 2019-08-21 17:04 评论0 收藏0
vue中extend，mixins，extends，components,install的几个操作

摘要：前言你知道，用法吗你知道他们的区别吗你知道他们的执行顺序嘛下面都能找到这些答案使用构造器创建一个子类参数是包含组件选项的对象是全局的创建构造器实例传入的数据为对应的标签最外层必须只有一个标签这是扩展的数据创建实例，并挂载到一个元素上。前言你知道extend,mixins,extends，components,install用法吗? 你知道他们的区别吗?你知道他们的执行顺序嘛? 下面...

沈俭 2019-08-22 18:39 评论0 收藏0