Vue易错点收集

易错点解析

• 遍历嵌套数据:外层套里层,外层的数据得先有,由于里层的数据依赖外层,才能继续渲染

- 数据格式类似这样:

	[
        {
            id:1
            name:'xxx'
            categoryChild:[...] // 继续上面的套路,包裹一个个对象,里面再包裹[]...
        }
        {...}
        {...}
    ]
    
- 结构如下:

	<!--第一层-->
<div class="item" v-for="(item1,index) in categoryList" :key="item1.categoryId">
  <h3>
    <a href="">{{item1.categoryName}}</a>
  </h3>
  <div class="item-list clearfix"><!--第二层-->
    <div class="subitem" v-for="(item2,index) in item1.categoryChild" :key="item2.categoryId">
      <dl class="fore">
        <dt><!--第二层遍历不能写这,写这就和第三层平级,导致第三层数据无法遍历出来-->
          <a href="">{{item2.categoryName}}</a>
        </dt>
        <dd>
          <!--第三层遍历-->
          <em v-for="(item3,index) in item2.categoryChild" :key="item3.categoryId">
            <a href="">{{item3.categoryName}}</a>
          </em>
        </dd>
      </dl>
    </div>
  </div>
</div>
	

router再次跳转到同一组件,页面不刷新的问题

• path路径一定要添加params参数(没这个参数就不会刷新)

### router.js
......
{
  	  name:"search",
  	  // path:"/search",
	  path: '/search/:keyword?', // 一定要传
  	  component:Search,
	  meta:{show:true}
  },
  
### xxx.index.vue
......

goSearch(){
        
        let location = {name:'search',params:{keyword:this.keyword}}
        if(this.$route.query){
                location.query = this.$route.query
        }
        this.$router.push(location)
}

async和await解析

• 为什么要用?因为我要直接的结果,而不是一个破对象(Promise对象)

• 先发一个普通请求

......
const actions = {
	......
	getBannerList({commit}){
		var res = reqGetBannerList();
		console.log(res) // 返回一个Promise对象,需要的数据藏得比较深
		......
	}
}

• 加上这两个关键字

const actions = {
	......
	async getBannerList({commit}){
		var res = await reqGetBannerList();
		console.log(res) // 直接返回需要的结果: {code: 200, data: Array(4)}
	}
}

• 目前的结论: async和await实质就是对Promise对象的进一步封装,通过它可以直接获取我们需要的数据

布尔判断注意事项

• 空对象是true,而空字符串是false

Boolean({})
>>>true // 特别注意
Boolean('')
>>>false