Vue 实例方法 & Vue use

2020/10/09 posted in 原理笔记

这篇 markdown 记录了：

Vue use 和 Vue.prototype.$xx 的概念

如何创建且使用一个插件

如何在 Vue 的原型上挂载对象

Vue use()

Vue use() 用于使用 Vue 插件，本质是调用 Vue 插件中的 install 方法。

Vue 插件本身是一个对象，这个对象中必须包含 install 方法，install 是一个函数。

本质上 Vue.use() 就是调用插件中定义的 install 方法，需要在 new Vue() 之前调用。

// 定义插件
const plugin = {install(){document.write('我是一个插件')
  }
}

// 使用插件
Vue.use(plugin); // html 页面上显示 "我是一个插件"

Vue.prototype.$xx 会往 Vue 实例的原型上挂载一个对象，同样也需要在 new Vue() 之前挂载。

// 定义 Vue 原型上的 myName 属性，加上 $ 符号防止冲突
Vue.prototype.$myName = 'Evan'
// 在 Vue 实例中可直接使用
console.log(this.$myName) // 输出 Evan

Vue use() 使用的是 Vue 的插件，Vue.prototype.$xx 是往 Vue 原型链上挂载一个对象。

在插件中的 install 方法中，可以调用 Vue.prototype.$xx，这样在 Vue use() 之后，在 Vue 原型链上就挂载了自定义的对象。