# 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> ``` ```