最近项目遇到的问题总结 - vue篇（2）

cp3_forever
614 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

前言

已经用vue开发过很多项目，然后也踩过很多坑，但是之前踩过坑，解决了就完事了，没有总结，导致下次遇到还是忘记之前怎么解决的。所以今天借着这篇文章，总结下最近使用vue的几个问题，也方便下次来查阅。

prop验证

因为我有个值初始值是null，然后调用接口获取数据后才把对象赋值给它。所以它的类型就有null 和 object 2种类型。

然后我需要把该值传给子组件。于是我的props就写成

props: {
 val: {
   type: [null, Object],
   required: true
 }
}

运行项目，如果你的类型不是这两个类型，应该是报类型错了。

但是它报的是下面这个错误

image.png

看来prop的type类型不能这样写。 这里是说null不是构造函数，不能用来做prop的类型校验。

那该怎么验证null类型?

思索无果，只能去官方文档那里看看。果然有发现。

image.png

那就是无需做null和undefined的校验，它会自动通过校验。

以我上面的例子为例，只需做对象的校验即可。如下

props: {
 val: {
   type: Object,
   required: true
 }
}

Object.assign

我们知道vue是无法通过Object.assign方式监听对象新增的属性，无法响应式更新。

但是如果是之前就在data里面定好的属性，通过Object.assign方式来更新属性的话还是会触发响应式更新。

  data () {
    return {
      obj: {
        name: 'a'
      }
    }
  },
  mounted () {
    // 可以触发更新
    Object.assign(this.obj, { name: 'b' })
  }

然后我需要对这个对象进行watch监听，如果没加deep属性，则对象的属性变化是无法触发watch的。

只有对对象重新赋值，才会触发watch变化。

所以我就有了以下骚操作

我直接Object.assign后，赋值给对象，以为可以触发watch变化。

  data () {
    return {
      obj: {
        name: 'a'
      }
    }
  },
  watch: {
    obj () {
      console.log(this.obj)
    },
  },
  mounted () {
    this.obj = Object.assign(this.obj, { name: 'b' })
  }

事实上watch并没有触发变化。

这个就有点触及我的知识盲区。难道对象赋值也不能触发watch变化吗？

后面想了一下，就想通了。

watch变化是赋值的前后对象不一样的才可以，如果前后对象是一样的，则无法触发watch更新。

然后我是对obj直接Object.assign，这样得到的obj已经是更新后的对象，这是如果把obj赋值给obj，前后是没有变化的，是不能触发watch变化的。

所以可以改写成

this.obj = Object.assign({}, { name: 'b' })

这样就能触发watch变化。

函数的执行

在vue中，触发事件对应的函数，直接把函数名绑定到对应的事件名上就行。该事件触发时，自然会执行该函数。

比如

@click="eventFn"

但是如果我需要某个状态为true时，才可以执行eventFn。

所以我就写成了

@click="status && eventFn"

但是这样写，触发事件，该函数并没有触发。

vue会把这识别成一个表达式来执行。并没有把eventFn当成函数执行。

所以改成

// 第一种方式
@click="status && eventFn()"

// 第二种方式
@click="eventFn"

function eventFn () {
  if (this.status) return
}
avatar
文章
阅读
粉丝