Vue 侦听器

最新推荐文章于 2024-07-24 12:45:17 发布

原创最新推荐文章于 2024-07-24 12:45:17 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍Vue中的watch特性，如何使用watch监听数据更新，包括普通变量和对象数据的监听，并通过实例演示了其语法和应用场景。

Vue中提供了一种特定功能，可以监听一个受控制的变量（data选项中声明的变量）内部的数据是否发生更新，一旦发生更新就**可以被监听（自动执行）**并执行一些后续的操作！

基本语法：

const app = new Vue({
    ....
    watch: {
    	被监听的变量: function(oldVal, newVal) {
    		当变量中的数据一旦发生改变，自动执行的函数
		}
	}
})

代码操作：

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
  <div id="app">
    <p>普通变量：{{ message }}</p>
    <p>对象数据：{{ loginForm.username }}</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "变量数据",
        loginForm: {
          username: 'damu'
        }
      },
      watch: {
        // 普通变量，简介语法声明的监听器
        message: (newVal, oldVal) => {
          console.log(newVal, oldVal,  "监听器生效")
        },
        // 对象数据，完整语法，声明的深度监听器
        loginForm: {
          handler(newVal, oldVal){
            console.log(newVal.username, oldVal.username, "对象监听器生效")
          },
          deep: true  // 开启深度监听，可以监听对象内部的数据是否发生变化
        }
      }
    })
  </script>
</body>
</html>