开发Vue插件四种方式

Posted 2023-04-03

参考技术A 在 vuejs 源码 src/core/global-api/use.js 中可以阅读到 vuejs 插件需要 export 一个 install 函数。 vue 使用 indexOf 检测插件是否已注册，防止插件的重复注册。

一个指令定义对象可以提供如下几种钩子函数(都为可选)：

指令钩子函数会被传入以下参数：

上面说明文档是在 vuejs 官方文档教程中摘抄的，可以通过 这里 阅读而更多

vill-directive插件地址

vuejs 插件需要提供一个 install 函数向外暴露。在 src/directives/time 下的 index.js 中一共开发了三个不同关于 time 的指令 v-time 、 v-clock 、 v-down

v-time 获取一个传入的时间戳值 binding.value ，然后返回一个符合格式的 time 值

v-down 传入未来的一个时间戳，计算倒计时间。

getFormatTime 是 YYYY-MM-DD hh:mm:ss 时间格式的函数， computeTime 是计算传入时间与当前时间差值得格式时间。

通过 prototype 方式开发插件，是在 vue 的原型上添加属性或者方法。例如：

message插件地址

在 src/lib/vill-message 中的 index.js 中，定义了 vuejs 的 install 函数，主要是把方法和属性添加到 vue 的原型上。

Vue.extend 使用基础 Vue 构造器，创建一个“子类”。 options 是可以传入的参数配置。然后对数据进行手动挂载 $mount ，最后加入 document 文档中。

message 是传入的参数值，是提示的内容值； Icon 是一个图标组件。

Icon 图标组件采取的 render 函数进行渲染，根据传入的参数 success 、 error 、 warning 、 info ，直接渲染同名 SVG 图标(有点取巧)，这样避免 v-if 和 v-else 的多个条件判断的做法。

mixin 使用比较简单，可以定义常用 method 或者生命周期函数在 Minxin 中，然后混入各组件之中。

添加 vue 全局方法和属性开发 vue 插件跟 prototype 比较类似，差别只是在把属性或者方法绑定在 prototype 改成直接绑定在 vue 实例上。如下所示：

其他 message.vue 组件模板完全和 prototype 原型上一样。

vue四种挂载方式区别

参考技术A 1.第一种,最常见.vue-cli模板就是这样

import Vue from 'vue'

import App from './App'

new Vue(

    el: '#app',                                  //#app 元素的 outerHTML 是 Vue 模板，该模板可以被编译成 render function。

    template: '<App/>',

    components: App

)

2.第二种，这种挂载是直接挂载到入口文件index.html 的 id=app 的dom 元素上

new Vue(

    router,

    store,

).$mount('#app')       

3.第三种，

new Vue(

    router,

    store,

    render: h => h(App)

).$mount('#app')

4.第四种，

new Vue(

     el:'#app',  

     router,  

     render: h =>h(App)

)

 5.第五种：

var options =

    el: '#app',

     store,

     router,

     ...App

;

new Vue(options)

$mount()用于手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中假如需要延迟挂载，可以在之后手动调用vm.$mount()方法挂载。

例如：newVue(router,render:h=>h(App)).$mount("#app");

render: x => x(App)// 这里的render: x => x(App)是es6的写法// 

转换过来就是： 暂且可理解为是渲染App组件// 

render:(function(x)// return x(App);// );