vue中计算属性computed的getter setter问题

首先不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

需求如下:

vue中计算属性computed的getter setter问题









邮箱和编码联动:
规则是邮箱是编码[email protected]
代码如下
this.add_customer_form.buyer_code为绑定编码
this.add_customer_form_email为绑定的邮箱
computed:
vue中计算属性computed的getter setter问题

ok,没问题操作上面编码下面会联动;
but,懂你操作下面email的时候会报错:
vue中计算属性computed的getter setter问题
vue.esm.js?101b:476 [Vue warn]: Computed property "add_customer_form_email" was assigned to but it has no setter.
这是因为没有给动态计算属性设置set。
然后我们这样:
vue中计算属性computed的getter setter问题
but 还是会报错:
Error in event handler for "input": "RangeError: Maximum call stack size exceeded"
栈溢出
最后我用一个中间变量 add_customer_form_email_2
vue中计算属性computed的getter setter问题
其实这里用watch方法更简洁 建议动态计算的变量有操作的机会的话或类似的场景,
用watch
vue中计算属性computed的getter setter问题

查了下vue中关于这块的源码:
vue中计算属性computed的getter setter问题
也就是传入的是一个函数,或者传入的对象里没有 set 属性,当你尝试直接该改变这个这个计算属性的值,都会报这个错误。