🍷

[vue3] ref(computed())はreadonlyになり、valueに代入しても意味がない [@vue/reactivity]

2024/08/08に公開

以下はnodeで検証した結果

@vue/reactivityは ref, computed, watch などののstate関係がvueから独立して実装されているpackage

var V = require("@vue/reactivity")
// undefined
var ref = V.ref(V.computed(() => 10))
// undefined
ref.value
// 10
ref.value = 19
// [Vue warn] Write operation failed: computed value is readonly
// 19
ref.value
// 10

上記のように、ref.value = 19で代入しても変化もエラーも起こらない

なぜvarで定義してるの?

nodeやブラウザのコンソールで検証する際、↑キーで変数の上書きがサクッと出来て便利だから

var n = 10
var n = 20 // エラーにならず、nは20になる

let n2 = 10
let n2 = 20 // 2つ目でエラーになる

const n3 = 10
const n3 = 20 // これも2つ目でエラー

Discussion