vue计算属性和监听事件
<h4>vue中watch的详细用法</h4>
<p>在vue中，使用watch来响应数据的变化。watch的用法大致有三种。</p>
<ol>
<li>下面代码是watch的一种简单的用法：</li>
</ol>
<pre><code class="language-javascript"><input type="text" v-model="cityName"/>
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) {
// ...
}
}
})</code></pre>
<p>2.直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。</p>
<h5>也可以在所监听的数据后面直接加字符串形式的方法名：也可以在所监听的数据后面直接加字符串形式的方法名：</h5>
<pre><code class="language-javascript">watch: {
cityName: 'nameChange' //字符串形式的方法名
}
} </code></pre>
<h4>3. immediate和handler</h4>
<p>这样使用watch时有一个特点，<strong>就是当值第一次绑定的时候，不会执行监听函数</strong>，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。</p>
<p>比如当父组件向子组件动态传值时，<strong>子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。</strong></p>
<pre><code class="language-javascript">new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
immediate: true
//值为true则表示在watch中声明的时候，就立即执行handler方法
//值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
}
}
})
</code></pre>
<h4>4. deep监听对象中的属性</h4>
<pre><code class="language-javascript"><input type="text" v-model="cityName.name"/>
new Vue({
el: '#root',
data: {
cityName: {id: 1, name: 'shanghai'}
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
})</code></pre>
<p>设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：</p>
<pre><code class="language-javascript">//上面优化的方案：直接监听对象中的属性
watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}</code></pre>
<p>这样只会给对象的某个特定的属性加监听器。</p>
<p>数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。</p>
<p>文章链接：<a href="https://www.cnblogs.com/yuwenjing0727/p/10757721.html#4263825">https://www.cnblogs.com/yuwenjing0727/p/10757721.html#4263825</a></p>