# vue或uniapp中this.$set()時的語法格式 # vue或uniapp中this.$set()時的語法格式（寫法） 日期：2020-07-31欄目：[前端經驗](http://www.duanlonglong.com/qdjy/953.html "前端經驗")瀏覽：6947次 this.$set()的主要功能是解決vue語法中改變數據時未驅動視圖的改變，也就是實際數據被改變了，但我們看到的頁面并沒有變化，在此呢復現問題的代碼我就不給你寫了，這里主要講this.$set()的用法，如果你遇到類似問題可以嘗試下，vue官網寫的是Vue.set，和this.$set()是一樣的，但要注意當前this的指向問題，你要記住時this.$set()時當前this的指向一定要是最外層。 vue和uniapp語法大部分都是相同的，uniapp是針對移動端的，并且可以開發小程序，最重要的區別是uniapp開發小程序時不能操作dom，注意，是不能，不是不建議，操作DOM后編譯代碼時會報錯。 先寫下數據 ``` <pre class="calibre13">``` items<span class="token1">:</span> <span class="token1">[</span> <span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"one"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"1"</span> <span class="token1">}</span><span class="token1">,</span> <span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"two"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"2"</span> <span class="token1">}</span><span class="token1">,</span> <span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"three"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"3"</span> <span class="token1">}</span> <span class="token1">]</span> ``` ``` 通常我們改變某個message會這么寫 ``` <pre class="calibre13">``` <span class="token2">this</span><span class="token1">.</span>items<span class="token1">[</span><span class="token5">0</span><span class="token1">]</span><span class="token1">.</span>message<span class="token">=</span><span class="token4">'one1'</span><span class="token1">;</span> <span class="token6">//這么寫一般是可以更新視圖的 我只是給舉this.$set()用法的例子 </span> ``` ``` 使用this.$set()時 ``` <pre class="calibre13">``` <span class="token2">this</span><span class="token1">.</span>$<span class="token2">set</span><span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>items<span class="token1">[</span><span class="token5">0</span><span class="token1">]</span><span class="token1">,</span><span class="token4">'message'</span><span class="token1">,</span><span class="token4">'one1'</span><span class="token1">)</span><span class="token1">;</span><span class="token6">//改成數字類型就不用了加引號</span> ``` ``` 有的時候我們可能一次改多個 ``` <pre class="calibre13">``` <span class="token2">this</span><span class="token1">.</span>items<span class="token1">[</span><span class="token5">0</span><span class="token1">]</span><span class="token">=</span><span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"one3"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"13"</span> <span class="token1">}</span><span class="token1">;</span> ``` ``` 使用this.$set()時, 格式this.$set( target, key, value ) ``` <pre class="calibre13">``` <span class="token2">this</span><span class="token1">.</span>$<span class="token2">set</span><span class="token1">(</span> <span class="token2">this</span><span class="token1">.</span>items<span class="token1">,</span> <span class="token5">0</span><span class="token1">,</span> <span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"one3"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"13"</span> <span class="token1">}</span><span class="token1">)</span> ``` ``` 給大家復現一種不渲染的例子：當前我們數組內有三條對象，那么我想加一條，并且我就不用類似push的東西，還要能渲染到視圖 普通寫法 不渲染 ``` <pre class="calibre13">``` <span class="token2">this</span><span class="token1">.</span>items<span class="token1">[</span><span class="token5">3</span><span class="token1">]</span><span class="token">=</span><span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"four"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"4"</span> <span class="token1">}</span><span class="token1">;</span><span class="token6">//數據已經被改變 但是視圖層沒渲染，我們看不到</span> ``` ``` 使用this.$set()時, 格式this.$set( target, key, value ) ``` <pre class="calibre14">``` <span class="token2">this</span><span class="token1">.</span>$<span class="token2">set</span><span class="token1">(</span> <span class="token2">this</span><span class="token1">.</span>items<span class="token1">,</span> <span class="token5">3</span><span class="token1">,</span> <span class="token1">{</span> message<span class="token1">:</span> <span class="token4">"four"</span><span class="token1">,</span> id<span class="token1">:</span> <span class="token4">"4"</span> <span class="token1">}</span><span class="token1">)</span><span class="token6">//這樣就可以渲染到視圖層了</span> ``` ```