Error en el procesamiento: "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'longitud')", ¿error de procesamiento de datos profundo? ? ? ?

Aparecen molestos errores rojos en vue, por ejemplo, como se muestra en la siguiente figura:
1.

2. Error en el renderizado: "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'nombre')"
. confuso Las personas están angustiadas, aunque vue se procesa normalmente, ¿
por qué ocurre ese problema?

1. Después de que comienza la inicialización de la fase del ciclo de vida de vue, comienza el ciclo de vida,
2. Defina todos los datos en data to vm a través de Object.defineProperty, y habrá datos en vm.
3. Determine si hay un parámetro el para especificar el alcance de vue para controlar la plantilla HTML y continúe bajando si lo hay, o espere a que vm.$mount llame antes de bajar.
4. . . . . .
   Como se mencionó anteriormente, si el no está montado, los datos se procesarán primero, lo que provocará el error anterior.
   Solución: 1. Puede agregar v-if o una operación ternaria
   a los datos que desea procesar para juzgar.

<template>
  <div>
  <van-button type="primary" @click="LookImg">查看</van-button>
   <van-popup v-model="show" closeable close-icon-position="top-left" :overlay="false" :style="{ height: '100%',width:'100%' }">
   // 这里通过 v-if 进行判断，错误就可以解决了
    <van-nav-bar v-if="Data.photos" :title="'剧照'+'('+Data.photos.length+')'"/>
   // 这里通过 三元运算进行判断，错误就可以避免了
     <input  :value="Data.photos ? Data.photos.name : '' "/>
    <van-row gutter="2" justify="center">
      <van-col  span="8"  v-for="item in Data.photos" :key="item">
        <van-image
        class="photo-context"
        height="100x"
        width="100%"
        :src="item"
        />
      </van-col>
    </van-row>
  </van-popup>
  </div>
</template>
<script>
export default {
    
    
  props: {
    
    
    Data: {
    
    
      type: Object,
      default () {
    
    
        return {
    
     }
      }
    }
  },
  data () {
    
    
    return {
    
    
    show:false

    }
  },
  created () {
    
    

  },
  methods: {
    
    
  LookImg(){
    
    
  this.show = true
  }

}
</script>

2. Si la longitud se evalúa en el método, entonces podemos hacer esto:
si el valor se asigna directamente en el proyecto, se producirá un error, como: error "longitud de indefinido"

this.roleNumber = this.Data.role.length // 报错

Nuestra solución es hacer un juicio if() sobre él en el método , y luego asignar

// 可以对想要的属性或者是值的上一层进行if判断 比如，length的上一层进行判断
if(this.Data.role){
    
    
this.roleNumber = this.Data.role.length // 完美解决vue报错的问题
}