VUE的侦听器watch

脚踏实地，坚持不懈!

已于 2022-09-01 22:10:57 修改

阅读量774

点赞数

文章标签： vue.js javascript 前端

于 2022-09-01 22:01:17 首次发布

本文链接：https://blog.csdn.net/weixin_43228946/article/details/126652032

版权

这是关于VUE的watch侦听器的学习笔记，这里面介绍了关于VUE的watch侦听器的一些使用方法和注意事项。
侦听属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视，否则就监听不了，在浏览器的控制台上就会报错
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch()
深度监听：
1.Vue中的watch默认不监测对象内部值的改变（一层），deep一般默认为false。
2.配置deep:true可以监测对象内部值改变（多层）。
3.当配置为deep:true,.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
4.使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
这两个的使用，我们要根据具体情况而定。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。
案例代码1：主要是介绍了watch的基本使用方法
案例代码2：主要介绍了深度侦听
案例代码3：主要是对比计算属性和侦听属性

案例代码1：

<!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>监视天气</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
        <div id="wd">
                  <h1>武汉的今日真的很{{weather}}</h1>
                  <button @click = "xiugai">切换按钮</button>
        </div> 
        <script>
                Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
                  const watchExampleVM = new Vue({
                                    el:"#wd",
                                    data:{
                                                      isWeather:true
                                    },
                                    computed:{
                                        weather(){
                                                return this.isWeather?'很热':'很冷';
                                        }
                                    },
                                    methods: {
                                        xiugai(){
                                                this.isWeather = !this.isWeather;
                                        }
                                    },
                                    watch:{
                                        //immediate:true, //初始化时让handler调用一下
                                        isWeather(newValue,oldValue){
                                                console.log("天气变化了"+newValue+","+oldValue);
                                        }
                                    }

                  });
        </script>         
</body>
</html>

案例代码2：

<!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>深度监视天气的变化</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>

<body>
                  <div id="root1">
                                    <h1>武汉的天气是真的{{weatherOfHotOrCold}}</h1>
                                    <button @click="weacherListener">点击按钮进行切换变器，并且监视天气的变化</button>
                                    <h1>我们在一个伟大的国家里，这个国家是{{country.Asia.CH}}</h1>
                                    <button @click="showGreatCountry">我爱中国</button>
                  </div>
                  <script>
                                    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
                                    const weatherVM = new Vue({
                                                      el: '#root1',
                                                      data: {
                                                                        isHotOrCold: true,
                                                                        country: {
                                                                                          Asia: {
                                                                                                            CH: 'China'
                                                                                          }
                                                                        }
                                                      },
                                                      computed: {
                                                                        weatherOfHotOrCold() {
                                                                                          return this.isHotOrCold ? '炎热' : '很冷';
                                                                        }
                                                      },
                                                      methods: {
                                                                        weacherListener() {
                                                                                          this.isHotOrCold = !this.isHotOrCold;
                                                                        },
                                                                        showGreatCountry() {
                                                                                          this.country.Asia.CH = '最大的国家---->中国';
                                                                        }
                                                      },
                                                      watch: {

                                                                        isHotOrCold: {
                                                                                          handler(newValue, oldValue) {
                                                                                                            console.log(newValue + "---" + oldValue);
                                                                                          }
                                                                        },
                                                                        country: {
                                                                                          deep: true,
                                                                                          handler() {
                                                                                                            alert(this.country.Asia.CH + "是世界上最伟大的国家");
                                                                                          }
                                                                        }
                                                      }
                                    })
                  </script>
</body>

</html>

案例代码3：

<!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>姓名案例的watch实现</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>

<body>
                  <div id="demo1">
                                    <h1>我们这里使用计算属性实现姓名案例</h1>
                                    姓氏:<input type="text" v-model="surname"></br>
                                    名字:<input type="text" v-model="name"></br>
                                    完整的名字:<span>{{fullName}}</span>
                                    <h1>我们这里使用watch侦听实现姓名案例,全名那里改变的事件比前面延迟一秒钟</h1>
                                    姓氏:<input type="text" v-model="watch_surname"></br>
                                    名字:<input type="text" v-model="watch_name"></br>
                                    完整的名字:<span>{{watch_fullName}}</span>
                  </div>
                  <script>
                                    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
                                    const vm = new Vue({
                                                      el: '#demo1',
                                                      data: {
                                                                        surname: '张',
                                                                        name: '三',
                                                                        watch_surname: '李',
                                                                        watch_name: '四',
                                                                        watch_fullName: '李-四'
                                                      },
                                                      computed: {
                                                                        fullName: {
                                                                                          get() {
                                                                                                            return this.surname + "-" + this.name;
                                                                                          }
                                                                        }
                                                      },
                                                      watch: {
                                                                        //正常完整的写法
                                                                        'watch_surname': {
                                                                                          handler(value1) {
                                                                                                            console.log(value1);
                                                                                                            this.watch_fullName = value1 + "-" + this.name;
                                                                                          }
                                                                        },
                                                                        'watch_name': {
                                                                                          handler(value2) {
                                                                                                            setTimeout(() => {
                                                                                                                              console.log(this);
                                                                                                                              this.watch_fullName = this.watch_surname + "-" + value2;
                                                                                                            }, 1000);
                                                                                          }
                                                                        }
                                                                        //简写形式
                                                                        /*watch_surname(val) {
                                                                                          setTimeout(() => {
                                                                                                            console.log(this)
                                                                                                            this.watch_fullName = val + '-' + this.watch_name;
                                                                                          }, 1000);
                                                                        },
                                                                        watch_name(val) {
                                                                                          this.watch_fullName = this.watch_surname + '-' + val
                                                                        }*/
                                                      }
                                    });
                                    //正常完整的写法
                                    /*vm.$watch('watch_surname', {
                                                      handler(value) {
                                                                        this.watch_fullName = value + "---" + this.watch_name;
                                                                        console.log(this.watch_fullName);
                                                      }
                                    })*/
                                    //简写形式
                                    /*vm.$watch('watch_name',function(value){
                                                      console.log(this);
                                                      this.watch_fullName = this.watch_surname + "---" + value;             
                                    })*/
                  </script>
</body>

</html>