关于Vue的监听:watch
watch是对单个属性的监听
对于基本数据类型的监听 简单监视
对于复杂数据类型的监听 深度监视
下面的代码,有一个简单监视 和 一个深度监视
<body> <div id="app"> <input type="text" v-model=‘msg‘ /><br><br> <button @click="stus[0].name=‘rose‘">改变</button> <h2>{{stus[0].name}}</h2> <h1>{{message}}</h1> </div> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data() { return { msg: ‘‘, stus: [{ name: ‘jack‘ }], message: ‘‘ } }, watch: { msg: function (newV, oldV) {//简单监视 console.log(newV, oldV); if (newV === ‘abcdefg‘) { console.log(‘这是通过监听器,watch监听到的‘) } }, stus: { deep: true,//深度监视 handler: function (newV, oldV) { console.log(newV[0].name) this.message = newV[0].name } } } }) </script> </body>
原文：https://www.cnblogs.com/a973692898/p/12685209.html