Vue—watch的简单用法
Posted zengbisheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue—watch的简单用法相关的知识，希望对你有一定的参考价值。
1.简单介绍
在vue中，使用watch来监听数据的变化。在改变的时候会有一个初始值，对初始值进行改变的时候，会把初始值记录下来，但同时也更新当前值。
举一个简单的例子（米与厘米的单位换算，在按下enter键的时候，alert我们换算的值）
<body> <div id="app"> 米：<input type="text" v-model="mi" @keyup.enter="btn">= 厘米：<span>{{limi}}</span> </div> </body> <script> let myapp = new Vue({ el:"#app", data:{ mi:"", limi:"" }, methods:{ btn:function(){ this.limi = this.mi*100; } } }) // watch 监听数据.因为在按下enter键的时候才使用监听，所以我们对换算后的厘米进行监听 myapp.$watch(‘limi‘,function(){ alert(myapp.mi+‘米‘+‘=‘+myapp.limi+‘厘米‘) }) </script>
2.handler方法和immediate属性
使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
<div id="root"> <input type="" name="" id="" value="" v-model="cityName"/> </div>
var myapp =new Vue({ el: ‘#root‘, data: { cityName: ‘成都‘ }, watch: { cityName: { handler(newName, oldName) { alert(newName) },
immediate: true
}
}
})
以上是关于Vue—watch的简单用法的主要内容，如果未能解决你的问题，请参考以下文章
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段