Leanote's Blog

let timer = setTimeout(()=> {})
this.$once("hook:beforeDestroy", () => {
    clearTimeout(timer)
    timer = null
})

组件: countDown.vue

<template>
    <div class="countDown_container">
        <slot v-bind="dateData"></slot>
    </div>
</template>
<script>
import dayjs from "dayjs";
export default {
    name: "countDown",
    props: {
        computeEndTimeFlag: Boolean, // 是否计算结束时间
        nowTime: {
            type: String | Number,
            default: () => Date.now()
        },
        startTime: {
            type: String | Number,
        },
        endTime: {
            type: String | Number,
            required: true,
        },
        showDay: Boolean,
    },
    data() {
        return {
            dateData: {},
            realEndTime: null,
        }
    },
    created() {
        const realEndTime = this.computeEndTimeFlag ? new Date(this.endTime).getTime() : this.getRealEndTime()
        this.realEndTime = realEndTime
        this.$emit("getRealEndTime", realEndTime)
        this.setDateData(realEndTime - new Date().getTime())
        this.updateState();

// this.$options.data()//是原始data中的数据
// this.$data //是改变后的data中的数据
this.$root //表示app.vue中data的数据
Object.assign(this.$data, this.$options.data())

两列表格(完整版)

<template>
    <div class="permission">
        <div class="check_all_box">
            <el-checkbox
                v-model="checkAll"
                :indeterminate="!!checkedList && !! checkedList.length && isIndeterminate['all']"
                @change="handleCheckAllChange"
            >
                全选
            </el-checkbox>
        </div>
        <el-checkbox-group
            v-model="checkedList"
            @change="handleItemChange"
        >
            <template v-for="(Ritem, Ridx) in allPermission">
                <div
                    class="check_item_box rflex"
                    :key="Ritem[allPermissionDataType.code]"
                >
                    <div class="parent_box border_box rflex flex_align_items_center">
                        <el-checkbox
                            :label="Ritem[allPermissionDataType.code]"
                            :indeterminate="getItemAll(Ritem)"
                 

在main.js 或者全局路由钩子前面运行一次

function syncSessionStorage() {
    if (!sessionStorage.length) {
        // 这个调用能触发目标事件，从而达到共享数据的目的
        localStorage.setItem('getSessionStorage', Date.now())
    }
    // 该事件是核心
    window.addEventListener('storage', function (event) {
        if (event.key == 'getSessionStorage') {
            // 已存在的标签页会收到这个事件
            localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
            localStorage.removeItem('sessionStorage')
        } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
            // 新开启的标签页会收到这个事件
            var data = JSON.parse(event.newValue)
            for (var key in data) {
                sessionStorage.setItem(key, data[key])
            }
            // 额外的触发赋值store操作
            const { content = {} } = JSON.parse(sessionStorage[keyName + "login_data"]) || {}
            store.commit('SET_ACCESS_TOKEN', content.access_token)
            store.commi

新建一个文件mock/index.js

// 首先引入Mock
const Mock = require('mockjs')
// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
})
let configArray = []
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
    if (key === './index.js') return
    configArray = configArray.concat(files(key).default)
})
// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|')
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
    }
})

在main.js里引入

import "../mock" //mock文件路径

定义接口

import Mock from "mockjs"
import { getUrlParams } from "@/util/util" // 截取get请求传递params时候url的参数
export default {
    'get|/mock/clouldStoreSKU/page': option => {
        console.log("option", option)
        const { page, page_size } = option.body || getUrlParams(option.url)
        let resData = Mock.mock({
            count: 10,
  

什么是函数式组件

我们可以把函数式组件想像成组件里的一个函数，入参是渲染上下文(render context)，返回值是渲染好的HTML

对于函数式组件，可以这样定义：

Stateless(无状态)`：组件自身是没有状态的
Instanceless(无实例)：组件自身没有实例，也就是没有this
由于函数式组件拥有的这两个特性，我们就可以把它用作高阶组件(High order components)，所谓高阶，就是可以生成其它组件的组件。就像日本的高精度的母机。

下面示例的完整Demo

那创造一个函数式组件吧
functional: true加上render function，就是一个最简单的函数式组件啦，show your the code, 下面就创建一个名为FunctionButton.js的函数式组件

export default {
    name: 'functional-button',
    functional: true,
    render(createElement, context) {
        return createElement('button', 'click me')
    }
}

就像上文所讲的，函数式组件没有this，参数就是靠context来传递的了，下面我们看下context有哪些属性呢

Render context
props
children
slots (a slots object)
parent
listeners
injections
data

其中上面的data包含了其他属性的引用，nibility。 在下面的范例中会有具体使用

现在创建一个App.vue来引入上面的函数式组件

<template>
    <FunctionalButton>
        click me
    </FunctionButton>
</template>

上面的click me就是FunctionButton.js的childern属性了，我们可以把组件改造下，由App.vue来定义组件的button按钮

动态缓存组件

• 使用keep-alive的include, 动态控制状态

不能缓存多层级路由

• 解决: 干掉中间空白路由, 只支持3层路由

  1. 使用include或者exclude
  2. 二级router-view设置组件name属性

  3. 在router.beforeEach中加入如下代码

     if (to.matched && to.matched.length > 2) {
         for (let i = 0; i < to.matched.length; i++) {
             const element = to.matched[i]
             if (element.components.default.name === 'Blank') {
                 to.matched.splice(i, 1)
             }
         }
     }