问题：
场景：
在实际项目开发中，有时会在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去控制元素显示与隐藏，也是可以的。可以根据实际情况灵活使用，规避控制台报错的情况出现。
