Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。
如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。
<script src="vue.js"></script> <div id="app"> <input type="text" v-model="childrens.name" /> <input type="text" v-model="lastName" /> </div> <script type="text/javascript"> var vm = new Vue( { el: '#app', data: { childrens: { name: '小强', age: 20, sex: '男' }, tdArray:["1","2"], lastName:"张三" }, watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//对象内部的属性监听，也叫深度监听 }, 'childrens.name':function(val,oldval){ console.log(val+"aaa") },//键路径必须加上引号 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model绑定数据时使用的数据变化监测 } ); vm.$watch("lastName",function(val,oldval){ console.log(val) })//主动调用$watch方法来进行数据监测 </script> </body>
1. <script src="vue.js"></script> 2. 3. <!DOCTYPE html> 4. <html lang="en"> 5. <head> 6. <meta charset="UTF-8"> 7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8. <title>Document</title> 9. </head> 10. <body> 11. <div id="app"> 12. <input type="text" v-model="inputMsg"/> 13. {{msg}} 14. </div> 15. <script> 16. new Vue({ 17. el: '#app', 18. data: { 19. inputMsg: '', 20. msg: '' 21. }, 22. computed: { 23. // msg() { // 这样通过计算属性得到的值是有缓存的 24. // return this.inputMsg; 25. // } 26. }, 27. watch: { // 值发生变化时执行回调函数,同时系统会把旧值和新值自动传过来 28. inputMsg(val,oldVal) { 29. console.log('old:' + oldVal,' new val:' + val); 30. this.msg = this.inputMsg 31. } 32. }, 33. methods: { 34. 35. } 36. }); 37. </script> 38. </body> 39. </html>
