Life is too short to waste a second

Vue组件使用props,data和computed的区别

props的值改变时,组件使用的props动态更新,computed动态更新,但data不会改变
Example

  props: ['fatherMsg'],
  data () {
    return {
      msg: this.fatherMsg
    }
  },
  computed: {
    cmpMsg () {
      return this.fatherMsg
    }
  }

当fatherMsg改变时,data中的msg不会动态更新,computed中的则会。data只能通过赋值来改变,本例中,如果要使data动态更新,可以使用watch监听faterMsg,并在faterMsg改变时执行this.msg = this.fatherMsg。

  watch: {
    fatherMsg () {
      this.msg = this.fatherMsg
    }
  }

一般的,如果没有特殊要求,直接使用props即可。当需要利用props组成新变量时,且该变量时要跟随父级改变,推荐使用computed。

发表评论

电子邮件地址不会被公开。