Me pregunto si estoy haciendo esto de la mejor manera posible; Creé un componente que acepta una lista de elementos como apoyo, pero luego necesito mutar esa lista internamente en el componente, así que seguí los documentos de VueJs para proporcionar el valor de apoyo como valor inicial de una propiedad de datos, y luego usar la propiedad de datos cuando necesito hacer algún cambio en los datos.
export default { props: { items: { type: Array, default: () => { return [] } } }, data() { return { itemList: this.items } } } Sin embargo, me di cuenta de que esto hace que la propiedad itemList se adhiera al valor inicial y no se actualizará si el componente principal proporciona un nuevo valor de items a este componente, esto tiene sentido ya que el componente ya se representó y, por lo tanto, no necesita para reevaluar todas sus propiedades de data ; así que para solucionar esto, agregué un observador para observar cualquier cambio en los items :
watch: { items() { this.itemList = this.items; } }Encontré esta otra pregunta que tenía un problema similar y la respuesta aceptada hizo exactamente lo que acabo de hacer aquí; sin embargo, me gustaría saber si este es un método esperado y confiable para solucionar este problema o si hay otras formas de hacerlo.
La propiedad de datos usa la prop solo para la inicialización. No reaccionará a los cambios de valor de prop después de eso.
Sin embargo, una propiedad calculada lo hará. Es otra forma de hacerlo, pero dado que en realidad no está haciendo ningún "cómputo" sobre el valor de la propiedad , un observador con una función que cambia la propiedad de los datos me parece más apropiado.
Sin embargo, un observador regular es superficial . Su sugerencia no debería funcionar si el elemento principal simplemente mutó la matriz agregando o eliminando elementos. Solo debería reaccionar a una reasignación de la matriz (supongo que eso es lo que hizo su elemento principal ... reemplazó el valor de prop por completo).
Si necesita que el observador también reaccione a las mutaciones en el accesorio, es posible que desee crear un observador profundo :
watch: { items: { handler(newValue) { this.itemList = JSON.parse(JSON.stringify(newValue)); //deep array copy to prevent array mutations made by the child component from affecting the parent's array. Keep in mind this deep-copy technique using JSON has caveats. }, deep: true } }Pero eso puede volverse bastante costoso si su accesorio de matriz crece.
Además, me parece que tiene la intención de que el estado de su componente ( $data.itemList ) sea cambiado tanto por el componente mismo como por su padre *al mismo tiempo*. Esto puede ser problemático (condiciones de carrera y demás), así que ten cuidado.