uTools-Manuals/docs/vue/实例方法-数据.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>