uTools-Manuals/docs/vue/实例方法-数据.html
2019-04-21 11:50:48 +08:00

87 lines
4.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<h2 id="实例方法-数据"><a href="#实例方法-数据" class="headerlink" title="实例方法 / 数据" data-scroll="">实例方法 / 数据</a></h2><h3 id="vm-watch"><a href="#vm-watch" class="headerlink" title="vm.$watch( expOrFn, callback, [options] )" data-scroll="">vm.$watch( expOrFn, callback, [options] )</a></h3><ul>
<li><p><strong>参数</strong></p>
<ul>
<li><code>{string | Function} expOrFn</code></li>
<li><code>{Function | Object} callback</code></li>
<li><code>{Object} [options]</code><ul>
<li><code>{boolean} deep</code></li>
<li><code>{boolean} immediate</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>返回值</strong><code>{Function} unwatch</code></p>
</li>
<li><p><strong>用法</strong></p>
<p>观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。</p>
<p class="tip">注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。</p>
</li>
<li><p><strong>示例</strong></p>
<pre><code class="hljs js"><span class="hljs-comment">// 键路径</span>
vm.$watch(<span class="hljs-string">'a.b.c'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">newVal, oldVal</span>) </span>{
<span class="hljs-comment">// 做点什么</span>
})
<span class="hljs-comment">// 函数</span>
vm.$watch(
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-comment">// 表达式 `this.a + this.b` 每次得出一个不同的结果时</span>
<span class="hljs-comment">// 处理函数都会被调用。</span>
<span class="hljs-comment">// 这就像监听一个未被定义的计算属性</span>
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.a + <span class="hljs-keyword">this</span>.b
},
<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">newVal, oldVal</span>) </span>{
<span class="hljs-comment">// 做点什么</span>
}
)</code></pre>
<p><code>vm.$watch</code> 返回一个取消观察函数,用来停止触发回调:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> unwatch = vm.$watch(<span class="hljs-string">'a'</span>, cb)
<span class="hljs-comment">// 之后取消观察</span>
unwatch()</code></pre>
</li>
<li><p><strong>选项deep</strong></p>
<p>为了发现对象内部值的变化,可以在选项参数中指定 <code>deep: true</code> 。注意监听数组的变动不需要这么做。</p>
<pre><code class="hljs js">vm.$watch(<span class="hljs-string">'someObject'</span>, callback, {
<span class="hljs-attr">deep</span>: <span class="hljs-literal">true</span>
})
vm.someObject.nestedValue = <span class="hljs-number">123</span>
<span class="hljs-comment">// callback is fired</span></code></pre>
</li>
<li><p><strong>选项immediate</strong></p>
<p>在选项参数中指定 <code>immediate: true</code> 将立即以表达式的当前值触发回调:</p>
<pre><code class="hljs js">vm.$watch(<span class="hljs-string">'a'</span>, callback, {
<span class="hljs-attr">immediate</span>: <span class="hljs-literal">true</span>
})
<span class="hljs-comment">// 立即以 `a` 的当前值触发回调</span></code></pre>
</li>
</ul>
<h3 id="vm-set"><a href="#vm-set" class="headerlink" title="vm.$set( target, key, value )" data-scroll="">vm.$set( target, key, value )</a></h3><ul>
<li><p><strong>参数</strong></p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key</code></li>
<li><code>{any} value</code></li>
</ul>
</li>
<li><p><strong>返回值</strong>:设置的值。</p>
</li>
<li><p><strong>用法</strong></p>
<p>这是全局 <code>Vue.set</code><strong>别名</strong></p>
</li>
<li><p><strong>参考</strong><a href="#Vue-set">Vue.set</a></p>
</li>
</ul>
<h3 id="vm-delete"><a href="#vm-delete" class="headerlink" title="vm.$delete( target, key )" data-scroll="">vm.$delete( target, key )</a></h3><ul>
<li><p><strong>参数</strong></p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key</code></li>
</ul>
</li>
<li><p><strong>用法</strong></p>
<p>这是全局 <code>Vue.delete</code><strong>别名</strong></p>
</li>
<li><p><strong>参考</strong><a href="#Vue-delete">Vue.delete</a></p>
</li>
</ul>