feat(computed): warn if trying to set a readonly computed (vuejs#161)

Author: dsseng

packages/reactivity/__tests__/computed.spec.ts

@@ -1,6 +1,16 @@
-import { computed, reactive, effect, stop, ref } from '../src'
+import {
+  computed,
+  reactive,
+  effect,
+  stop,
+  ref,
+  WritableComputedRef
+} from '../src'
+import { mockWarn } from '@vue/runtime-test'
 
 describe('reactivity/computed', () => {
+  mockWarn()
+
   it('should return updated value', () => {
     const value = reactive<{ foo?: number }>({})
     const cValue = computed(() => value.foo)
@@ -157,4 +167,14 @@ describe('reactivity/computed', () => {
     plusOne.value = 0
     expect(dummy).toBe(-1)
   })
+
+  it('should warn if trying to set a readonly computed', () => {
+    const n = ref(1)
+    const plusOne = computed(() => n.value + 1)
+    ;(plusOne as WritableComputedRef<number>).value++ // Type cast to prevent TS from preventing the error
+
+    expect(
+      'Write operation failed: computed value is readonly'
+    ).toHaveBeenWarnedLast()
+  })
 })

packages/reactivity/src/computed.ts

@@ -29,7 +29,9 @@ export function computed<T>(
     : (getterOrOptions as WritableComputedOptions<T>).get
   const setter = isReadonly
     ? () => {
-        // TODO warn attempting to mutate readonly computed value
+        if (__DEV__) {
+          console.warn('Write operation failed: computed value is readonly')
+        }
       }
     : (getterOrOptions as WritableComputedOptions<T>).set