我练习项目眼中的 vue

因为毕业设计开始了 vue 的学习之路,曾写过一些入门的 vue 小白学习文章系列(2018 我所了解的 Vue 知识大全(一))。如今已经工作半年了,这一次想说说我我平时练习项目中的 vue ,我习惯采用 ES6 书写,仅供参考,如果有可以改进的希望能够学习到,下次我说说我在工作中的 vue

练习的 参考项目,在项目中对于注释我自己还是很满意的哈哈哈

  1. 在注册,提交订单,新增按钮请求接口,为了防止用户的重复提交我们前端可以进行简单处理(函数节流或者标志位开关)
//函数节流,当一个函数被反复调用的时候,他只会执行一次,函数柯里化,调用一个函数,返回另一个函数
export function debounce(func,delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      func.apply(this,args)
    },delay)
  }
}
复制代码

  1. 我们在子组件里面定义了一个方法,在父组件的兄弟元素中调用,使他改变子组件里面某些性质,或者传递数据(ps:可能描述有一点不对),在父组件的兄弟元素里面调用子组件,好像有点意思,我们要怎么去实现呢??

vue 中有一个 ref 特性,为了该组件赋予一个 ID 引用,可以通过引用可以获取到子组件里面的内容,但是我们要注意 $refs 只会在组件渲染完成之后生效,并且他们不是响应式的,避免在模板或者计算属性中访问 $refs

在父组件中的兄弟元素中通过 this.$refs.searchBox.setQuery(query) 进行引用详细见 search 组件92行和 search-box 组件的33行

  1. 在我们请求接口的时候,最好进行边界条件处理(异常处理),避免因为接口导致页面无响应假死(player的322行)
getLyric() {//获取歌词格式化
  this.currentSong.getLyric().then((lyric) => {
    if (this.currentSong.lyric !== lyric) {
      return
    }
    this.currentLyric = new Lyric(lyric, this.handleLyric)//当前歌曲的歌词
    if (this.playing) {//当我们歌曲在播放的时候,才会有歌词,
      this.currentLyric.play()
    }
  }).catch(() => {//异常处理,清理
    this.currentLyric = null
    this.playingLyric = ''
    this.currentLineNum = 0
  })
},
复制代码

异常处理,边界处理,我们前端应该要考虑,我们永远都不知道用户会怎么进行操作

  1. mapMutations 是对 mutations 做一层封装,在 methods,用扩展运算符,就可以做一个对象的映射,映射一个方法名

  1. vue 中,在 datapropcomputed 里面定义的数据会自动给她们添加一个 setget方法,用来实时监测数据的变化,然后响应到DOM 中,如果我们不需要监测变化,只是获取数据用来暂时保存,我们可以直接在方法中定义使用

  1. 在同一个组件里面如果有两个地方用到同样一段代码,我们可以抽象出来用一个公共的方法,如果是两个或者多个组件用到大量相同的一长段代码,我们可以用 mixin抽象出来(组件里面有的同名的方法会覆盖 mixin 里面的方法,因为组件里面的东西优先级更高)

项目书写建议

  1. 我们的基础组件(子组件)中,没有任何逻辑处理,基础组件值负责派发事件,告诉父组件或者外部组件有个事件被触发了,以及告诉外部,他所知道的所有信息,所有的业务逻辑处理都在父组件进行,由外部触发事件

  1. 为了今后代码向后可扩展性,我们不在具体的方法中写入具体的数字,最好通过 const 常量来引入。我们在引入子组件的时候,最好子组件里面都是抽象的东西,通过父组件去传递 suggest 组件的40行

  1. vue-cli 构建工具中,如果要上传空文件到 Github 上面需要一个 .gitkeep 文件,否则空文件是不会上传到 github上面的

  1. vuex定义数据的时候首先要想到我们需要什么数据,相关最底层数据=>state

getter 数据的映射,通常是一个函数,类似计算属性,可以根据 state 计算出一些属性,也可以是一些复杂的判断逻辑

mutation,定义我们修改数据的逻辑,mutation-types 定义我们mutation 需要哪些动作即函数名

  1. 项目命名规范,可以让我们不经过大脑思考就知道这个文件是干什么的,这个函数有什么用。管理,尽可以的使得代码解耦性强,易于管理,易于查找,易于分享。变量命名语义化,可减少注释,清晰易懂

  1. vue 的使用中,如果 data 中的键和 methods 对象中定义的函数名称相同,会有警告提示,因为会出现对象覆盖对象的情况,所以不允许出现这样的情况。优先级关系:props 优先级 > data 优先级 > methods 优先级

  1. vue2.0以上的版本,最终渲染都是通过 render 函数,如果写的是template 属性,则需要编译成 render 函数(生命周期图可以看出)

期待我的续更吧,或许写的有点糟糕,我是初学者,如有错误之处,请多多请教(sunseekers_)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coding迪斯尼

快速在组合中查找重复和遗失的元素

12140
来自专栏分布式系统和大数据处理

非暴力沟通

知道这本书是一次在和朋友跑步时听她提起,因为我有去京东上面看图书畅销榜的习惯,无意中又看到了这本书,朋友正好看完了,就借来读一下。

21340
来自专栏ROBOTEDU

【本体】电机偏差值

10940
来自专栏飞总聊IT

沟通学TCP握手,等于谋财害命

TCP之所以有这个三次握手协议有很多历史原因。但是最主要的我认为是网络基础架构不稳定。因为不稳定,所以我们需要多次向对方表示或者等待对方反复确认“我爱你”...

15820
来自专栏Java成长之路

程序员们,转变你的思维方式吧!

笔者已经工作两年多了,在这里我想谈下关于程序员关于职业的思维方式。对于职业的思维方式,决定了一个人的选择和成就。建立一个正确的思维方式,有利于我们主动管理自己的...

10230
来自专栏zhisheng

想成为「不那么差」的程序员,离不开这个 buff

一周前,我分享了篇文章《如何成为一位「不那么差」的程序员》,当时主要是从硬技能和软实力两方面分享经验,今天我想做一点补充:其实,做一名不那么差的程序员,也离不开...

15220
来自专栏程序员互动联盟

为什么程序员越来越排斥面试时做题?

从业十几年经历的不是很多, 算起来也就是三四家,在编程行业跳槽比较频繁的行业,这算是一股清流了,呆的习惯了也就懒得动了,主要还是觉得在一个公司呆的时间长点,才真...

29120
来自专栏程序员互动联盟

阿里巴巴待遇这么好,为什么还有这么多人离职?

不是每个阿里巴巴的职位待遇都是那么好,而且作为阿里巴巴几万人的大公司即使很低的比例离职也有相当的数量,这也属于正常的现象,正常来讲一个人离职主要有两种理由:

21730
来自专栏程序员互动联盟

程序员是否应该拿年薪百万的工资?

就目前国内程序员的薪资状态能达到百万级别的少的可怜,做技术开发做过几年之后很快就能达到天花板,就现在国内程序员水平年薪达到这一半就已经算是很不错的了,大部分的程...

12310
来自专栏程序员互动联盟

程序员如何迈过年薪30万的坎?

作为一个写了十几年代码的老程序员,程序员要想拿到年薪30万,起码需要具备以下几个条件:

18720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励