8.Vue2.x 数据监视

8.Vue2.x 数据监视—watch

文章目录

- 姓名案例watch实现

姓名案例watch实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>姓名案例—watch实现</title><script type="text/javascript" src="../js/vue.js"></script><title>Document</title></head><body><!--监视属性watch:1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.属性必须存在，才能进行监视3.监视的两种写法：1. new Vue时传入watch配置2. 通过vm.$watch监视computed和watch之间的区别：1.只要computed能完成的功能，watch都可以完成2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作备注：1.所有内vue所调用(管理)的函数，都不要写箭头函数2.所有不是被vue所调用(管理)的函数，都要写成箭头函数 --- 例如：定时器的回调、ajax的回调函数3.watch就是Vue给我们提供的一个监测数据改变的手段，至于数据发生改变后，要做什么，得看具体业务逻辑例如:需要新的值、旧的值做比较，决定接下来要干什么不要值，只要数据改变了，就要发送请求等等--><div id="root">姓：<input type="text" v-model="firstName" /> <br /><br />名：<input type="text" v-model="lastName" /> <br /><br /><span>全名:{{fullName}}</span></div><script>const vm = new Vue({el: "#root",data: {firstName: "张",lastName: "三",fullName: "",},watch: {/*1.watch中的firstName什么时候调用？data中的firstName被改变时调用2.watch中的firstName的this是谁？---vm*/// 监测姓---精简写法// firstName(newValue, oldValue) {//   console.log("firstName被别人改了", newValue, oldValue);//   this.fullName = newValue + "-" + this.lastName;// },// 监测姓---完整写法（写为对象）// firstName: {//   immediate: true, // immediate其值是true或false；确认是否以当前的初始值执行handler的函数//   handler(newValue, oldValue) {//     this.fullName = newValue + "-" + this.lastName;//   },// },// 监测名lastName(newValue, oldValue) {console.log("firstName被别人改了", newValue, oldValue);console.log(vm);this.fullName = this.firstName + "-" + newValue;},},});// 常用的是上面watch这种写法vm.$watch("firstName", {immediate: true, // 若immediate为true则handlerhandler(newValue, oldValue) {// this.fullName = newValue + "-" + this.lastName;// 等1s全名才出来// 此处定时器的回调一定要写箭头函数，否则拿不到fullNamesetTimeout(() => {this.fullName = newValue + "-" + this.lastName;}, 1000);},});</script></body>
</html>