vue中的监听事件（watch）

最新推荐文章于 2025-04-23 14:27:57 发布

原创最新推荐文章于 2025-04-23 14:27:57 发布 · 2w 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍Vue.js中的watch特性，用于监听data中的数据变化，并在变化时执行特定函数。通过示例展示如何设置watch，当data中的某个属性值改变时，触发对应的函数进行处理，实现数据响应和更新。

使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理

html:
在html里写下那个事件会让触发methods让data发生变化

 <input type="text" v-model="firstname" @keyup="getFullname">+

data:
这里是data里面的值

  data: {
            firstname: "",
            lastname: "",
            fullname: ""
        },

methods:
这里是让data数据改变的方法

 getFullname: function () {
//                this.fullname = this.firstname+this.lastname;
            }

watch:

关键：data名：函数（这样的格式）

‘firstname’: function(newVal,oldVal){
console.log(newVal + “–” + oldval)
}

watch: {
            //使用这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理
            'firstname': function (newVal,oldVal) {

                console.log((newVal + "--" + oldVal));
            },
            'lastname': function (newVal,oldVal) {
                console.log((newVal + "--" + oldVal));
            }
}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名称案例</title>
    <script src="../js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <input type="text" v-model="firstname" @keyup="getFullname">+
    <input type="text" v-model="lastname" @keyup="getFullname">=
    <input type="text" v-model="fullname">

</div>

<script>

    var vm = new Vue({

        el: "#app",
        data: {
            firstname: "",
            lastname: "",
            fullname: ""
        },
        methods: {
            getFullname: function () {
//                this.fullname = this.firstname+this.lastname;
            }
        },
        watch: {
            //使用这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理
            'firstname': function (newVal,oldVal) {

                console.log((newVal + "--" + oldVal));
            },
            'lastname': function (newVal,oldVal) {
                console.log((newVal + "--" + oldVal));
            }
        }
    })
</script>
</body>
</html>

更加全面的：

<template>
  <div>
    <h1>监听器</h1>
    <b>直接监听data里面的值(不是对象类型)</b>
    <br />
    <input type="text" name id v-model="value01" />
    写入的是：{{value}}
    <br />通过watch来直接监测value01，如果value01的值变化，value的值也会跟着一起变化。
    <hr />
    <b>直接监听data里面的值(对象类型)</b>
    <br />
    <el-input v-model="demo.name"></el-input>
    写入的是：{{value}}
    <br />如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。
    <hr />
    <b>直接监听data里面的值(对象类型)</b>
    <br />
    <el-input v-model="demo.name"></el-input>
    写入的是：{{value}}
    <br />
    也可以使用引号把对象完整的包起来来做
  </div>
</template>

<script>
export default {
  data() {
    return {
      value01: "a",
      value02: "b",
      value: "",
      demo: {
        name: "",
      },
    };
  },
  computed: {
    newName() {
      return this.demo.name;
    },
  },
  watch: {
    value01: function (value) {
      console.log("直接监听");
      console.log(value);
      this.value = value;
    },
    // newName(val) {
    //   console.log('通过监听方法监听对象')
    //   this.value = val;
    // },
    "demo.name": function (value) {
      console.log("通过监听对象路径监听对象");
      this.value = value;
    },
    //深度监听对象的属性deep:true
    childrens: {
      handler: function (val, oldval) {
        console.log(val.name);
      },
      deep: true, //对象内部的属性监听，也叫深度监听
    },
  },
};
</script>