Vue中需要注意的事项

1、在子component中的data不能是一个对象，必须是一个函数，然后该函数返回一个对象

data(){
  retrun {
    swiperOption:{}
  }
}

2、vue中，如果每个组件发生一个ajax请求，就会造成很大的性能损耗，如何操作可以降低性能损耗

问题：在vue中，一个页面被拆分成多个component，如果每一个component都发生一个ajax请求，就会造成页面很卡的现象

解决方法：一个页面的component包括：HomeHeader.vue HomeSwiper.vue HomeIcons.vue等，然后这些组件被组合在Home.vue中，此时ajax请求应该放在这个父组件Home.vue中的生命周期函数mounted()，然后数据由父组件传递给子组件

3、在vue 中使用vue-awesome-swiper插件实现轮播图的时候，数据是从后台拿到的，当数据没有拿到的时候，数据为空，此时下面的写法存在问题，轮播图首先显示的不是第一张图

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
      </swiper-slide>
    </swiper>
  </div>
</template>

解决方法：在<swiper>上用v-if语句判断数据是否为空，为空则不显示，有数据才显示

<swiper :options="swiperOption" v-if="list.length">

一般，在html中不书写js代码，可以用一个计算属性来代替：

<swiper :options="swiperOption" v-if="list.length">

computed:{
  showSwiper(){
    return this.list.length
  }
}

4、在computed中定义的属性，看下在变量里面打了debugger触发时机的问题

在computed中，定义变量aa，然后在aa的定义里面打了debugger，在页面初始化的时候，没有进入到该变量的定义的原因：

变量aa是一个computed属性，该aa要挂载在DOM上，页面渲染的时候才会进入到变量aa定义的方法内

Vue中需要注意的事项

猜你喜欢