[vue报错]之Computed property "XXX" was assigned to but it has no setter.

最新推荐文章于 2024-11-16 16:07:02 发布

原创最新推荐文章于 2024-11-16 16:07:02 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

61 篇文章

订阅专栏

本文深入探讨Vue框架中Computed属性的Set与Get机制，解析如何在计算属性中进行赋值操作，并通过实例说明Set属性的作用及其实现方式。同时，对比了Computed与Watch的异同，为开发者提供更清晰的Vue属性更新机制理解。

首先定位可以知道的是:

在使用computed的时候出现的问题:

这里提示我们需要使用setter, 我也是一脸懵逼, 什么是setter, computed为什么需要setter, 和我有什么关系, 带着这个疑问我们打开vue 的官网,
毕竟遇到问题, 先看官网文档
我们发现: vue 关于 computed的说明

明确一点的是, computed中, 可以设置两个属性, 一个get , 一个set ,
默认只传 get 进去, (这里还可以l联系到objectDefinePropety)
一个是读取, 一个修改设置

刚开始我对两个东西也是一脸的懵逼,
但是看完了下面这个例子, 我相信你会有进一步的了解

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取, 计算属性的 getter
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置, 计算属性的 getter 和 setter
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2  走get
vm.aPlus = 3  //走 set 
vm.a       // => 2
vm.aDouble // => 4

当你对计算属性进行赋值的时候就就是使用了 set属性来进行赋值,但是赋值后的操作是我们定的, 他会自动执行,
所以, 在set中我们会传入一个新值作为参数

回到题目:

这里报错, 我们大致是对计算属性,进行了赋值一类的操作,但是有没有在set属性声明, 所以会报这个错, 所以我们需要在set中完成即可,

另一个发现 ,如果使用存在数组方法,不会报错:
例如 , 你之前可能使用这个计算属性, 直接this.list =this.listData (这样绝对会报错),
但是你使用this.list.push(...this.listData) ,即是不用声明set, 也不会报错(猜想可能是vue中重写数组方法的原因)

注: 值得一提的是在使用 watch 来进行监听的时候 , 我们也是传入两个参数一个(newOne, oldOne),
newOne,参数是不是有点对应 computed set 的意思

这篇博客也有点东西的: 参考