Что-то вызовет предупреждение в консоли? Почему это не рекомендуется и как бы вы это исправить?

Question

речь идет о хорошей практике и знаниях по Javascript и VueJ.

Я уже прокомментировал Type Api, чтобы увидеть, сохраняются ли другие предупреждения

<script>
    export default {
        name: "printer",
        props: {
            model: {
                type: String,
                required: true
            },
            ip: {
                type: String,
                required: true
            },
            jobs: {
                type: Object,
                validator: (value) => ["inProgress", "done", "error"].every((status) => typeof value[status] === "number")
    },
    progress: {
        type: Number,
            required: true
    },
    api: {
        type: Api,
            required: true
    }
    },
    data: () => ({
        timer: null
    }),
        methods: {
        async refreshProgress() {
            this.jobs = await this.api.getJobsNumbers({ model: this.model });
        }
    },
    created() {
        this.timer = setInterval(() => this.refreshProgress(), 30000);
    },
    destroyed() {
        clearInterval(this.timer);
    }
    };
</script>

Так что я ищу советы, как яЯ новичок в VueJS и нужно описать и цель изменения

Answer 1

В вопросе отсутствует точный текст предупреждения, поэтому я просто предполагаю, что вы говорите о предупреждении, вероятно, что-то вроде этого:

[Vue warn]: избегайте прямого изменения объекта, так как значение будетперезаписывается при повторной визуализации родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Подставка изменена: "jobs"

Другими словами, вы изменяете состояние родителя в дочернем компоненте, что не очень хорошая идея, и поэтому Vue предупреждает вас.

Есть несколько способовкак это исправить:

1. сделать копию реквизита и сохранить его в данных компонентов. Обновлять только внутреннее состояние. Изменения не будут видны родителю
2. Вместо изменения jobs prop вызовите пользовательское событие, передающее новое состояние (возвращаемое из вызова API) в качестве аргумента. Родитель должен обработать событие и обновить свое собственное состояние с новым значением (обновление будет проходить через подпорку обратно к дочернему компоненту)
3. Если вы абсолютно уверены, что ваш компонент printer будет единственным местом, где jobsобъект будет видоизменяться, вы можете изменять свойства объекта вместо замены всего объекта без каких-либо предупреждений. Это возможно, но не рекомендуется ...

Подробнее см. Документация Vue или некоторые очень похожие вопросы SO