「Nuxt チュートリアルへようこそ！」の質問 #85
-
|
https://github.com/vuejs-jp/learn.nuxt.com/blob/main/content/0.index.md で何か困ったことや質問があれば遠慮なく質問して下さい |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
リアクティビティー パート１にて
とありましたが、 |
Beta Was this translation helpful? Give feedback.
-
|
ご質問ありがとうございますー！ （内部的には、、、などあれば詳しいメンバーコメントあればお願いします。 |
Beta Was this translation helpful? Give feedback.
-
|
あはは， はい，型定義上は しかーし！実際には e.g. console.log 等で ref オブジェクトを出力してみると，実際にはいろんなものが詰まってると思います． |
Beta Was this translation helpful? Give feedback.
-
|
配列をリアクティブで管理している場合に、１０列×１０００行ぐらいのデータとなると、 |
Beta Was this translation helpful? Give feedback.
-
|
@keishuu ref 関数では配列やオブジェクトのネストした値もすべて監視しているため、大規模な配列などには shallowRef 関数を使うことで以下のように const shallowArray = shallowRef([
/* ディープなオブジェクトの大きなリスト */
])
// これは更新をトリガーせず...
shallowArray.value.push(newObject)
// これはします:
shallowArray.value = [...shallowArray.value, newObject]
// これは更新をトリガーせず...
shallowArray.value[0].foo = 1
// これはします:
shallowArray.value = [
{
...shallowArray.value[0],
foo: 1
},
...shallowArray.value.slice(1)
]こういった Vue.js を用いたパフォーマンス最適化については、以下の公式ドキュメントが参考になると思いますので合わせてご参照ください。 https://ja.vuejs.org/guide/best-practices/performance#general-optimizations なお、こちらの Discussion はハンズオンの Q&A として使用しているため、新たな質問が来ないようにクローズしておりますが、質問対応自体は引き続き行っております。 |
Beta Was this translation helpful? Give feedback.
ご質問ありがとうございますー！
利用できるのはvalue以外にはないです。
詳しくは下記を参照ください。
https://ja.vuejs.org/guide/essentials/reactivity-fundamentals
（内部的には、、、などあれば詳しいメンバーコメントあればお願いします。