vue的watch使用（如淘宝优惠券设置计算属性时候）

watch
比computed灵活
watch中可以执行任何逻辑
函数节流
Ajax异步数据
操作DOM

重点:依赖固定数据类型(响应式数据)

通过vm&＃xff08;Vue实例&＃xff09;对象的$watch()或watch配置来监视指定的属性
当属性变化时候&＃xff0c;回调函数自动调用,在函数内部进行计算

<template><div><label>姓:<input type&＃61;"text" placeholder&＃61;"firstName" v-model&＃61;"firstName"/></label><p></p><label>名:<input type&＃61;"text" placeholder&＃61;"lastName" v-model&＃61;"lastName"/></label><p>单向</p><label>姓名:<input type&＃61;"text" placeholder&＃61;"fullName" v-model&＃61;"fullName"/></label><p>双向</p><label>姓名:<input type&＃61;"text" placeholder&＃61;"fullName" v-model&＃61;"fullNameup"/></label><p>watch监视方法</p><label>姓名:<input type&＃61;"text" placeholder&＃61;"fullName" v-model&＃61;"fullnamewatch"/></label></div>
</template><script scoped>
export default {name: "Testtwo",data() {return {firstName: "",lastName: "",// watch监视的对象fullnamewatch: "",};},// computed默认去实现计算属性的get方法// 这里的computed内部的方法是以函数的形式去体现// 就是像写函数一样去写里面的方法// 配置计算属性
// computed: {
// // 这里先写成一个对象
// // this表示房当前的Tsettwo里面的data&＃xff0c;和python中的self属性一样
// fullName: {
// get() {
// return this.firstName &＃43; "." &＃43; this.lastName;
// },
// },
// fullNameup: {
// get() {
// // 当使用了该方法就打印一下这个(&＃96;调用了getter的方法&＃96;)
// console.log(&＃96;调用了getter的方法&＃96;);
// return this.firstName &＃43; "." &＃43; this.lastName;
// },
// set(value) {
// // 当使用了该方法就打印一下这个
// console.log(&＃96;调用了setter的方法&＃96;);
// // 使这个名字用点[.]分割开生成一个列表
// let names &＃61; value.split(".");
// // 打印出来这个names的列表
// console.log(names);
// // 使这个姓为第一个元素 名为第二个元素
// this.firstName &＃61; names[0];
// this.lastName &＃61; names[1];
// },
// },
// },// 配置watchwatch: {// 监视firstNamefirstName(value) {console.log(&＃96;watch监视到firstName发生改变:${value}&＃96;);// 监视到后作出的改变方法this.fullnamewatch &＃61; value &＃43; "." &＃43; this.lastName;},// 监视lastNamelastName(value) {console.log(&＃96;watch监视到lastName发生改变:${value}&＃96;);// 监视到后作出的改变方法this.fullnamewatch &＃61; this.firstName &＃43; "." &＃43; value;},},
};
</script><style scoped>
</style>


app设置

<template><div><Testtwo /></div>
</template><script>
import Testtwo from "./components/Testtwo";
export default {name: "App",components: {Testtwo,},
};
</script><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>


或者用下面这个没有注释之前的代码

<template><div><label>姓:<input type&＃61;"text" placeholder&＃61;"firstName" v-model&＃61;"firstName"/></label><p></p><label>名:<input type&＃61;"text" placeholder&＃61;"lastName" v-model&＃61;"lastName"/></label><p>单向</p><label>姓名:<input type&＃61;"text" placeholder&＃61;"fullName" v-model&＃61;"fullName"/></label><p>双向</p><label>姓名:<input type&＃61;"text" placeholder&＃61;"fullName" v-model&＃61;"fullNameup"/></label><p>watch监视方法</p><label>姓名:<input type&＃61;"text" placeholder&＃61;"fullName" v-model&＃61;"fullnamewatch"/></label></div>
</template><script scoped>
export default {name: "Testtwo",data() {return {firstName: "",lastName: "",// watch监视的对象fullnamewatch: "",};},// computed默认去实现计算属性的get方法// 这里的computed内部的方法是以函数的形式去体现// 就是像写函数一样去写里面的方法// 配置计算属性computed: {// 这里先写成一个对象// this表示房当前的Tsettwo里面的data&＃xff0c;和python中的self属性一样fullName: {get() {return this.firstName &＃43; "." &＃43; this.lastName;},},fullNameup: {get() {// 当使用了该方法就打印一下这个(&＃96;调用了getter的方法&＃96;)console.log(&＃96;调用了getter的方法&＃96;);return this.firstName &＃43; "." &＃43; this.lastName;},set(value) {// 当使用了该方法就打印一下这个console.log(&＃96;调用了setter的方法&＃96;);// 使这个名字用点[.]分割开生成一个列表let names &＃61; value.split(".");// 打印出来这个names的列表console.log(names);// 使这个姓为第一个元素 名为第二个元素this.firstName &＃61; names[0];this.lastName &＃61; names[1];},},},// 配置watchwatch: {// 监视firstNamefirstName(value) {console.log(&＃96;watch监视到firstName发生改变:${value}&＃96;);// 监视到后作出的改变方法this.fullnamewatch &＃61; value &＃43; "." &＃43; this.lastName;},// 监视lastNamelastName(value) {console.log(&＃96;watch监视到lastName发生改变:${value}&＃96;);// 监视到后作出的改变方法this.fullnamewatch &＃61; this.firstName &＃43; "." &＃43; value;},},
};
</script><style scoped>
</style>