Vue中需要注意的事项

绝地灬酷狼 2022-02-26 01:10 348阅读 0赞

**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定义的方法内

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中导入导入 Mint-UI的注意事项

Module build failed: ReferenceError: Unknown plugin “component” ![在这里插入图片描述][watermar

喜欢ヅ旅行/ 2022年12月05日 01:40/ 0 赞/ 144 阅读

相关内核中的并发注意事项（编写驱动代码注意事项）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

雨点打透心脏的1/2处/ 2022年11月21日 09:46/ 0 赞/ 355 阅读

相关 Vue--注意事项

原文网址：[Vue--注意事项\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 滚动其他网址 > [vue 中监听document.body.

缺乏、安全感/ 2022年08月31日 09:56/ 0 赞/ 146 阅读

相关 node-redis模块需要注意的事项

node之中连接redis使用的redis模块，虽然好用，但是有些地方还是需要注意。 npm install redis redis client 行为： 1、客户

桃扇骨/ 2022年07月13日 06:43/ 0 赞/ 285 阅读

相关 vue-devtools的安装和注意事项

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装及注意事项。

末蓝、/ 2022年04月13日 07:16/ 0 赞/ 200 阅读

相关设定目标需要注意的事项

一年之计在于春，春天的到来寓意着新希望和新期待，相比于北方，许多低纬度地区的人们对于春天的感觉并不那么明显，很难单纯从温度上感受到季节的变化。春天的到来并不以人们的感受为标

落日映苍穹つ/ 2022年03月19日 09:20/ 0 赞/ 353 阅读

相关 Vue中需要注意的事项

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

绝地灬酷狼/ 2022年02月26日 01:10/ 0 赞/ 349 阅读

相关 mysql版本更改需要注意事项

在实际开发中，会由于环境的改变或者项目的需求会对mysql的版本进行调整，从低版本升到高版本常常会遇到困难，列出遇到的问题，共同学习，使用语言为JAVA。场景为低版本5.5.6

淩亂°似流年/ 2022年02月01日 23:41/ 0 赞/ 385 阅读

相关爬虫需要注意的常见事项

前言注意事项构造合理的 HTTP 请求头设置合理的cookie 爬虫访问速度和路径的控制注意网页隐藏的信息使用可变IP 我

水深无声/ 2021年11月09日 23:56/ 0 赞/ 440 阅读

相关 Vue中一些需要注意的点

1.给link添加事件、给组件绑定原生事件在vue-router1中使用v-link写入路由，但是在vue-router2中要使用router-link写入路由，在浏览器渲

雨点打透心脏的1/2处/ 2021年09月18日 02:20/ 0 赞/ 472 阅读