Инициализируйте данные с помощью props, не делая их реактивными
Есть ли способ инициализировать объект в данных раздела данных с помощью объекта props, не делая его реактивным для самого объекта prop? Я по-прежнему хочу, чтобы объект в разделе данных (currentUser) реагировал на представление.
<template>
<div>
{{ currentUser.name }}
</div>
</template>
props: {
user: Object,
},
data() {
return {
currentUser: {
name: user.name
}
};
},
Ничего такого. Мне он нужен только для инициализации.
возраст, currentUser: JSON.parse(JSON.stringify(this.user))
По моему опыту, после инициализации из опоры дочерние данные не будут реагировать на родительские изменения опоры, если вы не настроите часы на опоре.
Ответы 3
Реквизиты в vue.js используются для реактивности. Невозможно сделать опору нереактивной.
Вы технически правы, но OP не просит сделать опору нереактивной (хотя я вижу, как заголовок может заставить вас так думать).
Создавать локальные данные, которые компонент не изменяет ...
props: {
user: Object,
},
data: function () {
return {
userAsMounted,
};
},
Скопируйте опору в то время, когда вы хотите, чтобы она перестала реагировать. (За все время, при установленном) ...
mounted() {
Object.assign(this.userAsMounted, this.user)
},
Обратитесь к копии ...
<template>
<div>
{{ userAsMounted.name }}
</div>
</template>
Вы не можете отключить реактивность, но вы можете контролировать, как / когда устанавливается data в вашем компоненте.
В частности, вы можете использовать одну из инициализационных хуки жизненного цикла для установки переменной данных с начальным значением, переданным в опору:
// Will only be run when the component is created.
created() {
const { user } = this;
this.currentUser = user;
// You could also use `this.currentUser = {...user};`
// (accomplishes the same thing as Object.assign), but vue won't react
// when modifying sub-properties of a reactive object within a component.
},
Если опора user не установлена при запуске created, вы можете попробовать условно установить ее в ловушке updated:
updated() {
const { currentUser, user } = this;
// Only set current user if it has not yet been set.
if (!currentUser) {
this.currentUser = user;
}
},
Почему голос против?
Вы можете уточнить? Что вы хотите, чтобы произошло, когда родитель изменит свойства свойства пользователя?