Vue-директива: обновление vs componentUpdated

В документе говорится

update вызывается после обновления содержащего компонента

и это

ComponentUpdated вызывается после обновления содержащего компонента и его дочерних элементов.

Но каковы фактические варианты использования одного из них?


vue.js vuejs2 vue-component
person Joe Park    schedule 21.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что, если у вас есть группа компонентов, которые необходимо обновить внешне? Я полагаю, что единственная реальная ценность, которую я мог видеть в своей голове, это то, что у вас есть что-то, что изменяется, когда что-то еще обновляется.

Допустим, вы визуализируете PDF-файл и хотите, чтобы граница средства просмотра изменилась после завершения визуализации. Предположим, вы помещаете файл в div, и он должен загрузить и отобразить этот PDF-файл. Допустим, вы превращаете элемент div в компонент и добавляете функции, необходимые для его запуска.

Затем, когда PDF-файл загружается, yo $ отправляет сообщение родителю, сообщающее ему об обновлении. Вы устанавливаете переменную, а затем, когда родительский компонент обновляется, он проверяет, что говорит переменная, и соответствующим образом изменяет границу. Таким образом, приложение будет обновляться только в нужное время. Когда объект загружается и когда объект изменяется / удаляется.

<template>
    <html>
       <border></border
    </html>
</template>

<script> 


Vue.component('pdf-renderer', {
    data(){
        pdf:null,
    },
    methods:{
        renderPDF(){
            //your code here
            this.$emit('done')
        }
    },

}

Vue.component('border', {
    template: '<div><pdf-renderer v-on:done="rendered()"></pdf-renderer></div>'
    data(){
        return {
            isRendered:false
        },
    },
    methods: {
        rendered(){
            this.isRendered = true;
        }
    },
    updated () {
        if(this.isRendered){
            //border settings
        } else {
           //other border settings
        }
    }
}


 </script>
person Miguel Coder    schedule 21.07.2017