(十二)、数据监视_watch
1.数据监视总结
数据监视属性watch: 1.当监视的属性变化时，回调函数自动调用，进行相关操作 2.属性必须存在，才能进行监视 3.监视的两种方法 (1).new Vue时，出啊如watch配置 (2).通过v,.$watch监视 computed和watch之间的区别 1.只要是computed能完成的功能，watch都可以完成 2.watch能完成的功能，computed不一定能完成， 例如: watch可以进行异步操作,比如简单的姓更改之后，全名过一会再改变，使用了异步 备注: 1.所有被vue所调用(管理)的函数，都不要写箭头函数 列如: watch中的函数，computed中的函数 2.所有不是被Vue所调用的函数，都要写成箭头函数 列如: 定时器的问题，ajax回调
2.数据监视的第一种写法 (精简版)
在此案列中: 我们对数据实现姓名案列，通过监视进行实现姓名案列
- 监视的是已经存在data的元素
- 当监视的属性发生变化的时候，会自动调用方法
- 有两个参数: 第一个是更改后的值，后一个是更改前的值
- watch里面的this是vm
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 全名:<input type="text" v-model="fullName"><br><br> </div> <script> var vm = new Vue({ el: '#root', data: { // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastName firstName: '李', lastName: '明', fullName: '李-明' // -----太低级了 }, watch: { // 我们监视的对象必须是已经拥有的属性，否则我们将监视不到数据的存在 /* ** 1.firstName 社么时候调用? data中的firstName被改变的时候会调用。会传递进来一个改变后的值和改变前的值 **2.watch里面的this是vm, 千万别用箭头函数 ()=>{} */ // 监测姓: -----精简写法 firstName(newValue, oldValue) { // console.log('firstName 被监视到了.由原来的 ' + oldValue + ' 修改成了 ' + newValue) this.fullName = newValue + '-' + this.lastName; }, lastName(newValue, oldValue) { this.fullName = this.firstName + '-' + newValue; }, fullName(newValue, oldValue) { var arr = newValue.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } } }); </script> </body> </html>
3.数据监视的第二种写法 (完整版)
- 实际内涵着handler();这个方法。
- 里面存在着一个immediat: true; 假设为true ,那么handel立即调用
- 这里我们就可以在 fullName 初始值为 ’ ’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 全名:<input type="text" v-model="fullName"><br><br> </div> <script> var vm = new Vue({ el: '#root', data: { // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastName firstName: '李', lastName: '明', fullName: '' }, watch: { // 我们监视的对象必须是已经拥有的属性，否则我们 // 检测姓的完整写法 firstName:{ immediate: true, // 若immediate为true则handle会在初始化时就会调用一次，以后就看firstName的改变了 handler(newValue,oldValue){ this.fullName = newValue + '-' + this.lastName; }} }, lastName(newValue, oldValue) { this.fullName = this.firstName + '-' + newValue; }, fullName(newValue, oldValue) { var arr = newValue.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } } }); </script> </body> </html>
4.watch的第二种写法 （$watch）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 全名:<input type="text" v-model="fullName"><br><br> </div> <script> var vm = new Vue({ el: '#root', data: { // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastName firstName: '李', lastName: '明', // fullName: '李-明' -----太低级了 fullName: '' }, watch: { // 我们监视的对象必须是已经拥有的属性，否则我们将监视不到数据的存在/ lastName(newValue, oldValue) { this.fullName = this.firstName + '-' + newValue; }, fullName(newValue, oldValue) { var arr = newValue.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } } }); vm.$watch('firstName',{ immediate: true, // 若immediate为true则handle会在初始化时就会调用一次，以后就看firstName的改变了 handler(newValue,oldValue){ this.fullName = newValue + '-' + this.lastName; } }) </script> </body> </html>
5.computed计算属性与watch监视区别
computed和watch之间的区别 1.只要是computed能完成的功能，watch都可以完成 2.watch能完成的功能，computed不一定能完成， 例如: watch可 以进行异步操作,比如简单的姓更改之后，全名过一会再改变，使用了异步 备注: 1.所有被vue所调用(管理)的函数，都不要写箭头函数 列如: watch中的函数，computed中的函数 2.所有不是被Vue所调用的函数，都要写成箭头函数 列如: 定时器的问题，ajax回调
- 定时器要用箭头函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 全名:<input type="text" v-model="fullName"><br><br> </div> <script> var vm = new Vue({ el: '#root', data: { // 这里的this是指window,并且我们在这里不能调用上面的属性，即全名!== firstName + lastName firstName: '李', lastName: '明', // fullName: '李-明' -----太低级了 fullName: '' }, watch: { // 我们监视的对象必须是已经拥有的属性，否则我们将监视不到数据的存在 lastName(newValue, oldValue) { this.fullName = this.firstName + '-' + newValue; }, fullName(newValue, oldValue) { var arr = newValue.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } } }); vm.$watch('firstName',{ immediate: true, // 若immediate为true则handle会在初始化时就会调用一次，以后就看firstName的改变了 handler(newValue,oldValue){ setTimeout(()=>{ // 此处定时器的函数一定要用箭头函数，否则我们拿不到vm.因为箭头函数没有this,会自动去找临近的实列充当其this this.fullName = newValue + '-' + this.lastName; },1000); } }) </script> </body> </html>
