Vue中需要注意的事项

绝地灬酷狼 2022-02-26 01:10 391阅读 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 条评论，391人围观）

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

相关阅读

相关 vue 组件需要注意的事项：

![1190185-20190926094108874-109405451.png][] 转载于:https://www.cnblogs.com/JAVA-STUDYE

曾经终败给现在/ 2023年08月17日 17:09/ 0 赞/ 167 阅读

相关 vue项目注意事项

vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块，每个文件名需要大写，路由命名全部小写，第一层路由就是最下面的那几个导航的名

港控/mmm°/ 2023年06月01日 12:53/ 0 赞/ 57 阅读

相关 Vue组件需要注意的事项

Vue.js 1、Vue的下载安装：Vue.js官网 | 学习 | 教程 | 安装。 2、Vue.js的版本：2.6.10。 3、Vue的第一个程序：Hello,

我不是女神ヾ/ 2023年05月29日 02:34/ 0 赞/ 58 阅读

相关 Vue--注意事项

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

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

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

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

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

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

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

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

相关 Vue中需要注意的事项

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

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

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

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

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

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

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

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

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

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

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