问题：

场景：

在实际项目开发中，有时会在vue模版中的html标签上，使用 v-if 条件判断节点是否展示。有时候通常习惯于直接根据对象某个key的属性值判断。

如下图demo写法：app.vue是父组件，HelloWorld.vue是子组件，属性绑定传递了一个infoObj对象

<template>
  <div id="app">
    <h1>这是用vue-cli创建的Vue2项目</h1>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld :infoObj="infoObj" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      infoObj: null,
    };
  },
  created() {
    setTimeout(() => {
      this.infoObj = {
        protocol: "ssh",
      };
    }, 1000);
  },
};
</script>

在子组件上，通过infoObj的protocol这个key的值判断元素dom是否应该展示。

<template>
  <div class="hello">
    <h1 v-if="infoObj.protocol == 'ssh'">测试</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    infoObj: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

解决方案：

如果在父组件app.vue中的infoObj 初始值为null，那么控制台一定会报错：TypeError: Cannot read properties of null (reading 'protocol')，如果 infoObj 初始值为{}，就不会报错。

通常情况下vue里的infoObj 应该是接口请求回来的值，注意赋值是null和undefined的情况：

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      infoObj: {},
    };
  },
  created() {
    setTimeout(() => {
      this.infoObj = undefined || {}
    }, 1000);
  },
};
</script>

这样就可以控制节点的显示与隐藏，控制台不会报错了。

当然更多的时候，前端的数据是通过接口获取的，为了防止后台接口的数据有null或者undefined的情况，可以在赋值时通过 || {}这种方式赋默认值，也可以通过watch 对 infoObj 监听，判断 protocol 的值，赋值给一个 新的data数据： flag。再通过flag去控制元素显示与隐藏，也是可以的。可以根据实际情况灵活使用，规避控制台报错的情况出现。