vue技巧

vue组件销毁时取消监听事件

外部监听组件或第三方组件的生命周期函数

状态管理小项目不用Vuex而是Vue.observable手写一个状态管理

store.js

/*
 * @Author: your name
 * @Date: 2020-06-26 11:58:28
 * @LastEditTime: 2020-06-26 12:04:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹\vues\src\components\store.js
 */ 
import Vue from 'vue'
// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
    userInfo: {},
    roleIds: []
})
// 通过mutations,修改属性
export const mutations = {
    setUserInfo(userInfo) {
        store.userInfo = userInfo
    },
    setRoleIds(roleIds) {
        store.roleIds = roleIds
    }
}

组件中使用

Vue.extend + 单例模式去实现全局的loading

Vue.extend是一个全局的api
通过Vue.extend将组件转换为全局组件
可以开发一些全局的组件

customLoading.vue

index.js 通过 (Vue.extend 改造组件)

   import Vue from 'vue'
    import LoadingComponent from './customLoading.vue'
    // 通过Vue.extend将组件包装成一个子类
    const LoadingConstructor = Vue.extend(LoadingComponent)
    let loading = undefined
    LoadingConstructor.prototype.close = function(){
        // 如果loading有用 则去掉loading的引用
        if(loading){
            loading = undefined
        }
        // 先将组件隐藏
        this.visible = false
        //延迟300毫秒 等loading的关闭动画结束 销毁组件
        setTimeout(()=>{
            // 移除挂载的dom元素
        //this.$el  是Vue实例关联的DOM元素
            if(this.$el&&this.$el.parentNode){
                this.$el.parentNode.removeChild(this.$el)
            }
            //调用组件的$destroy方法进行组件销毁
            this.$destroy()
        },300)
    }
    const Loading = (options={})=>{
        //如果组件已渲染，则返回即可
        if(loading){
            return loading
        }
        // 要挂载的元素
        let parent = document.body
        // 组件属性
        const ots = {
            text:'',
            ...options
        }
        //通过构造函数初始化组件 相当于new Vue()
        const instance = new LoadingConstructor({
            el:document.createElement('div'),
            data:ots
        })
        // 将loading元素挂载到parent上面
        parent.appendChild(instance.$el)
        // 显示loading
        Vue.nextTick(()=>{
            instance.visible = true
        })
        // 将组件实例赋值给loading
        loading = instance
        return instance
    }
    export default Loading

在页面中使用loading

参考于https://juejin.im/post/5eef77...