Vue组件props传入blog.comments更新时created内无法获取最新值问题

created生命周期钩子仅会在组件首次初始化时执行一次，你把处理blog.comments的逻辑放在这个钩子里，后续父组件传入的blog对象内部字段更新时，不会重复触发created内的代码，自然无法获取到更新后的值。

你可以根据业务场景选下面任意一种方案实现：

• 方案1：使用watch监听目标值变化
  这是最贴合你现有代码逻辑的改法，不需要大幅调整原有代码：
  • 如果需要监听整个blog对象的所有字段变化，开启深度监听即可，加上immediate: true可以让逻辑在初始化时就执行，完全替代你原来写在created里的逻辑：

  watch: {
    blog: {
      deep: true,
      immediate: true,
      handler(newBlog) {
        if (newBlog && newBlog.comments) {
          this.comments = []
          this.$nextTick().then(() => {
            this.comments = this.$srv.myMethod(newBlog.comments)
            console.log(this.comments) // 原代码此处缺失闭合单引号，已修正
            this.$root.$emit('comments', newBlog, this.comments)
          })
        } else {
          // 其余业务逻辑
        }
      }
    }
  }
  

  • 如果你只关心blog.comments的变化，可以直接精准监听该字段，性能比深度监听整个对象更好：

  watch: {
    'blog.comments': {
      immediate: true,
      handler(newComments) {
        if (newComments) {
          this.comments = []
          this.$nextTick().then(() => {
            this.comments = this.$srv.myMethod(newComments)
            console.log(this.comments)
            this.$root.$emit('comments', this.blog, this.comments)
          })
        } else {
          // 其余业务逻辑
        }
      }
    }
  }
  

• 方案2：用计算属性派生comments值
  如果你不需要在组件内部手动修改comments的值，完全可以移除data中声明的comments字段，直接用计算属性基于props自动派生，响应式更新是Vue自动处理的，不需要手动写监听逻辑：

  computed: {
    comments() {
      if (!this.blog || !this.blog.comments) return []
      return this.$srv.myMethod(this.blog.comments)
    }
  },
  // 如果需要在comments变化时触发事件，单独监听计算属性即可
  watch: {
    comments: {
      immediate: true,
      handler(newComments) {
        if (this.blog) {
          this.$nextTick(() => {
            this.$root.$emit('comments', this.blog, newComments)
          })
        }
      }
    }
  }
  

注意：你贴出的原代码中console.log('this.comments);缺失字符串闭合单引号，运行时会抛出语法错误，记得修正。

内容的提问来源于stack exchange，提问作者chaf ch r