Vue第五讲

最新推荐文章于 2024-07-11 10:51:30 发布

莫奈的日出

最新推荐文章于 2024-07-11 10:51:30 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52993364/article/details/125547962

本文详细介绍了Vue.js中的数据侦听器（watch）功能，包括如何监听单个属性变化、整个对象的深度监听，以及如何设置在数据初次渲染时就触发侦听器。示例代码展示了在按钮点击事件中更新数据并触发相应的方法，从而在控制台打印变化前后的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

侦听器

Vue中提供了watch属性，用来侦听 data 或 computed 中数据的变化。一旦侦听到数据发生了变化，就会执行对应的侦听方法。

示例：

<!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>
</head>
<body>
    <div id="app">
        <button @click="currentPage++">下一页</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                currentPage:1,
            }
        },
        // 侦听器（侦听属性）
        watch:{
            currentPage(newValue,oldValue){
                //当currentPage发生改变，该函数会被调用
                console.log(newValue,oldValue);
            }
        }
    })
</script>
</html>

侦听引用数据类型

<!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>
</head>
<body>
    <div id="app">
        <button @click="pageData.currentPage++">下一页</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                currentPage:1,
                pageData:{
                    currentPage:1,
                    pageSize:5
                }
            }
        },
        // 侦听器（侦听属性）
        watch:{
            // 1. 侦听器侦听引用数据的某一个类型
             'pageData.currentPage':function(newValue,oldValue){
                  //当currentPage发生变化时，该函数会被调用
                 console.log(newValue,oldValue);
             }
            // 2.侦听引用数据类型整体
            pageData:{
                handler:function(newValue,oldValue){
                    //当pageData中的任意属性发生变化时，该函数会被调用
                    console.log(newValue,oldValue);
                },
                // 深度侦听
                 deep:true
           }
        }
         
    })
</script>
</html>

数据首次渲染时的侦听

默认情况下，watch只有在数据发生改变时才会被侦听，但是，某些情况下，我们需要数据首次渲染时，也能够触发侦听函数。

<!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>
</head>
<body>
    <div id="app">
        <button @click="pageData.currentPage++">下一页</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                currentPage:1,
                pageData:{
                    currentPage:1,
                    pageSize:5
                }
            }
        },
        // 侦听器（侦听属性）
        watch:{
            pageData:{
                handler:function(newValue,oldValue){
                    console.log(newValue,oldValue);
                },
               //立即执行侦听
                immediate:true
            }
        }
         
    })
</script>
</html>