关于v-show失效以及没有数据时渲染报错处理

v-show不能使用在template上，不然失效，v-if可以

然后有时候你会发现，没有数据渲染会报错，啥cannot read 。。of undefined， 比如你再页面上写了{{result.row.name}} 但是你这次请求到的数据

压根没有row属性，只有个result空对象，如果你只是用result.row那就只显示个undefined，但是你还点一下name，那就会报错了，很常见的错误，啥cannot read 。。of undefined

 

关于这个错误，如果用的是v-if，其实第一次就不会看到这个错误，因为v-if是页面上根本没有这个元素

没有数据渲染报错，一般在页面上放点初始数据，或者页面上数据做个判断，那种result&&result.row&&result.row.name

 

真机智,刚刚遇到个问题，就是一般路由传id到一个页面，然后单独请求，这种类似详情页面

我用组件传id，遇到个问题，因为用的v-show，生命周期都不会执行了，于是改用v-if，就每次都会执行

 

问题一  页面出现,生命周期不执行的问题,导致传了不同的id,却没有再发请求

解决:总的来说,v-if,让生命周期一直在重新执行,就好像路由跳转的组件一样,他们每次都是重新添加dom到页面上,所以生命周期一直执行

而v-show,一开始执行一次,后面都是通过display:none隐藏, 所以其实这个dom一直在页面上,所以生命周期不会重新执行

问题二  页面出现,渲染的时候,cannot read 。。of undefined的错误,总的来说就是{{result.row.name}},结果只有个result空对象,

如果是name属性为空,那还不会报错,可能你一般做些啥功能,result.row.name?result.row.nam:'默认name'

但是这个问题,是就一个result对象,row是undefined,再点name一定报错

解决:可以设置一些默认值,或者写成{{result.row?.name}}

具体?的用法可以看看我讲?的那篇博客