Разделение параметров маршрутизации

Обычно используйте параметры маршрута внутри компонентов, большинство людей сделают это:

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

использовать в компоненте$routeЭто делает его тесно связанным с соответствующим маршрутом, поэтому компонент можно использовать только на некоторых конкретных URL-адресах, что ограничивает его гибкость.

Правильный путь - пройтиpropsразъединение

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: true
    }]
})

будет направленpropsсвойство установлено наtrueПосле этого компонент может быть пропущен черезpropsполучилаparamsпараметр

export default {
    props: ['id'],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

Кроме того, вы также можете использовать шаблон функции для возвратаprops

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

Документация:router.v ue js.org/this/expensive/starved…

функциональные компоненты

Функциональный компонент не имеет состояния, он не может быть создан, у него нет жизненного цикла и методов. Создавать функциональные компоненты тоже очень просто, достаточно добавить в шаблонfunctionalПросто объявить. Как правило, он подходит для компонентов, которые зависят только от изменений внешних данных.Из-за их легкого веса производительность рендеринга будет улучшена.

Все, что нужно компоненту, передаетсяcontextПередача параметров. Это объект контекста, представление конкретных свойствДокументация. здесьprops— это объект, содержащий все связанные свойства.

функциональные компоненты

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
        </div>
    </div>
</template>

использование родительского компонента

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from '@/components/List.vue'
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title: 'title',
                content: 'content'
            }],
            currentItem: ''
        }
    }
}

Документация:Talent.v ue js.org/v2/expensive/hot…

проникновение в стиль

Очень часто модифицируют стили сторонних компонентов в процессе разработки, но из-заscopedИзоляция атрибутов стилем, возможно, потребуется удалитьscopedили начать другоеstyle. Эти методы приведут к побочным эффектам (загрязнение стиля компонента, недостаточно элегантный), а проникновение стиля будет иметь эффект только при использовании в препроцессоре CSS.

мы можем использовать>>>или/deep/Для решения этой проблемы:

<style scoped>
外层 >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

Расширенное использование часов

выполнить немедленно

watchОн будет запускаться только при изменении свойства слушателя.Иногда мы хотим создать компонент после создания компонента.watchвозможность немедленного выполнения

Возможный способ думать об этом состоит в том, чтобыcreateВызывается один раз в жизненном цикле, но такой способ написания не элегантен, возможно, мы можем использовать этот метод

export default {
    data() {
        return {
            name: 'Joe'
        }
    },
    watch: {
        name: {
            handler: 'sayName',
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

Глубокое слушание

При прослушивании объекта он не может быть запущен при изменении свойств внутри объекта.watch, мы можем установить для него мониторинг глубины

export default {
    data: {
        studen: {
            name: 'Joe',
            skill: {
                run: {
                    speed: 'fast'
                }
            }
        }
    },
    watch: {
        studen: {
            handler: 'sayName',
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

Запустить прослушиватель для выполнения нескольких методов

Используйте массивы для установки нескольких элементов в виде строк, функций, объектов.

export default {
    data: {
        name: 'Joe'
    },
    watch: {
        name: [
            'sayName1',
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler: 'sayName3',
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log('sayName1==>', this.name)
        },
        sayName2() {
            console.log('sayName2==>', this.name)
        },
        sayName3() {
            console.log('sayName3==>', this.name)
        }
    }
}

Документация:Talent.v UE JS.org/V2/API/#w…

watch слушает несколько переменных

сами часы не могут прослушивать несколько переменных. Но мы можем вернуть объект, вычислив свойства нескольких переменных, которые необходимо отслеживать, а затем отслеживать этот объект, чтобы добиться «прослушивания нескольких переменных».

export default {
    data() {
        return {
            msg1: 'apple',
            msg2: 'banana'
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log('msg1 is change')
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log('msg2 is change')
                }
            },
            deep: true
        }
    }
}

Параметр события $event

$eventЭто специальная переменная объекта события, в некоторых сценариях она может предоставить нам больше доступных параметров для реализации сложных функций.

родное событие

Ведет себя так же, как объект события по умолчанию в собственных событиях.

<template>
    <div>
        <input type="text" @input="inputHandler('hello', $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

пользовательское событие

Ведет себя в пользовательских событиях для захвата значений, выброшенных из дочерних компонентов.

my-item.vue :

export default {
    methods: {
        customEvent() {
            this.$emit('custom-event', 'some value')
        }
    }
}

App.vue

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
            </my-list>
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) // 'some value'
        }
    }
}

Документация:Talent.v UE JS.org/V2/Expensive/EV…

Talent.v UE JS.org/V2/expensive/co…

Двусторонняя привязка пользовательских компонентов

компонентыmodelОпции:

Позволяет пользовательскому компоненту настраивать свойства и события при использовании v-model. По умолчанию v-модель компонента будет использовать значение как свойство, а ввод — как событие, но некоторые типы ввода, такие как переключатели и кнопки-флажки, могут захотеть использовать свойство значения для разных целей. Конфликтов, возникающих в этих ситуациях, можно избежать, используя вариант модели.

inputПо умолчанию как двустороннее связанное событие обновления, через$emitМожет обновлять связанные значения

<my-switch v-model="val"></my-switch>

export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        switchChange(val) {
            this.$emit('input', val)
        }
    }
}

модифицировать компонентmodelПараметры, настраиваемые связанные переменные и события

<my-switch v-model="num" value="some value"></my-switch>

export default {
    model: {
        prop: 'num',
        event: 'update'
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        num: {
            type: Number,
            default: 0
        }
    },
    methods: {
        numChange() {
            this.$emit('update', this.num++)
        }
    }
}

Документация:Talent.v UE JS.org/V2/API/#touch…

Мониторинг жизненного цикла компонентов

Обычно мы отслеживаем жизненный цикл компонента, используя$emit, родительский компонент получает событие для уведомления

Подсборка

export default {
    mounted() {
        this.$emit('listenMounted')
    }
}

родительский компонент

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>

На самом деле есть более простой способ использования@hookВы можете отслеживать жизненный цикл компонента, не внося в него никаких изменений. такой же,created,updatedи т. д. также могут использовать этот метод.

<template>
    <List @hook:mounted="listenMounted" />
</template>

Программные прослушиватели событий

Например, если вы определяете таймер при монтировании страницы, вам необходимо сбросить таймер при уничтожении страницы. Это выглядит хорошо. но посмотри внимательноthis.timerЕдинственная функция состоит в том, чтобы иметь возможностьbeforeDestroyСерийный номер таймера получается изнутри, и кроме этого толку никакого.

export default {
    mounted() {
        this.timer = setInterval(() => {
            console.log(Date.now())
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}

Лучше всего, если к нему будут иметь доступ только хуки жизненного цикла. Это не серьезная проблема, но ее можно считать беспорядком.

мы можем пройти$onили$onceСлушайте уничтожение жизненного цикла страницы, чтобы решить эту проблему:

export default {
    mounted() {
        this.creatInterval('hello')
        this.creatInterval('world')
    },
    creatInterval(msg) {
        let timer = setInterval(() => {
            console.log(msg)
        }, 1000)
        this.$once('hook:beforeDestroy', function() {
            clearInterval(timer)
        })
    }
}

После использования этого метода, даже если мы создадим несколько таймеров одновременно, это не повлияет на эффект. Потому что они автоматически очищаются программно после уничтожения страницы.

Документация:Talent.v UE JS.org/V2/expensive/co…

Вручную монтируйте компоненты

В некоторых случаях ручное монтирование компонентов может сделать нашу реализацию более элегантной. Например, компонент всплывающего окна идеально используется через императивный вызов, напримерelementUIизthis.$message. Вместо того, чтобы передавать переключатели состояния в шаблоне, эта реализация действительно плоха.

Начнем с самого простого примера:

import Vue from 'vue'
import Message from './Message.vue'

// 构造子类
let MessageConstructor = Vue.extend(Message)
// 实例化组件
let messageInstance = new MessageConstructor()
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)

Следующее реализует простойmessageвсплывающий компонент

Message/index.vue

<template>
    <div class="wrap">
        <div class="message" :class="item.type" v-for="item in notices" :key="item._name">
            <div class="content">{{item.content}}</div>
        </div>
    </div>
</template>

// 默认选项
const DefaultOptions = {
    duration: 1500,
    type: 'info',
    content: '这是一条提示信息！',
}
let mid = 0
export default {
    data() {
        return {
            notices: []
        }
    },
    methods: {
        add(notice = {}) {
            // name标识 用于移除弹窗
            let _name = this.getName()
            // 合并选项
            notice = Object.assign({
                _name
            }, DefaultOptions, notice)

            this.notices.push(notice)

            setTimeout(() => {
                this.removeNotice(_name)
            }, notice.duration)
        },
        getName() {
            return 'msg_' + (mid++)
        },
        removeNotice(_name) {
            let index = this.notices.findIndex(item => item._name === _name)
            this.notices.splice(index, 1)
        }
    }
}

.wrap {
    position: fixed;
    top: 50px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.message {
    --borderWidth: 3px;
    min-width: 240px;
    max-width: 500px;
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0 0 8px #ddd;
    overflow: hidden;
}

.content {
    padding: 8px;
    line-height: 1.3;
}

.message.info {
    border-left: var(--borderWidth) solid #909399;
    background: #F4F4F5;
}

.message.success {
    border-left: var(--borderWidth) solid #67C23A;
    background: #F0F9EB;
}

.message.error {
    border-left: var(--borderWidth) solid #F56C6C;
    background: #FEF0F0;
}

.message.warning {
    border-left: var(--borderWidth) solid #E6A23C;
    background: #FDF6EC;
}

Message/index.js

import Vue from 'vue'
import Index from './index.vue'

let messageInstance = null
let MessageConstructor = Vue.extend(Index)

let init = () => {
    messageInstance = new MessageConstructor()
    messageInstance.$mount()
    document.body.appendChild(messageInstance.$el)
}

let caller = (options) => {
    if (!messageInstance) {
        init()
    }
    messageInstance.add(options)
}

export default {
    // 返回 install 函数 用于 Vue.use 注册
    install(vue) {
        vue.prototype.$message = caller
    }
}

main.js

import Message from '@/components/Message/index.js'

Vue.use(Message)

использовать

this.$message({
    type: 'success',
    content: '成功信息提示',
    duration: 3000
})

Документация:Talent.v UE JS.org/V2/API/#VM-…