mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-11 17:24:03 +08:00
87 lines
4.6 KiB
HTML
87 lines
4.6 KiB
HTML
<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>
|