16-Vue之watch侦听器使用

爱学习de测试小白

已于 2022-11-27 14:42:34 修改

阅读量1.1k

点赞数

分类专栏： # Vue 文章标签： vue

于 2021-08-22 14:54:00 首次发布

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/119852582

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

基本使用

示例代码

基本使用

$route.path：获取当前路由，页面刷新不会触发
created：页面打开和刷新会执行

示例代码

<!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>watchs使用</title>
</head>
<body>

    <div id="app">

        <router-link to='/login'>登录</router-link>
        <router-link to='/registered'>注册</router-link>
        <router-view></router-view>
        <h3>{{mes}}</h3>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 1.导入路由文件 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


    <script>
        // 创建组件
        const login={
            template:"<p>登录</p>"

        }
        const registered={
            template:"<p>注册</p>"

        }

        // 路由与组件关联
        const router = new VueRouter({
            routes:[
            {path:'/login',component:login},
            {path:'/registered',component:registered}
            ]
        }
        )


        // 注册组件
        var vm = new Vue({
            el:'#app',
            data:{
                mes:"欢迎！！！"
            },
            methods:{

            },
            // 页面打开和刷新会执行
            created(){
              const path = this.$route.path;
              if(path==="/login"){
                    this.mes = "欢迎进入登录页面"
                }else if (path === "/registered"){
                    this.mes = "欢迎进入注册页面"
                }
              

            },
            router:router,
            // 监听vm实例所有属性变化   $route.path 获取当前路由，页面刷新不会触发
            watch:{
                '$route.path':function(newVal){
                    console.log(newVal)
                    if(newVal==="/login"){
                        this.mes = "欢迎进入登录页面"
                    }else if (newVal === "/registered"){
                        this.mes = "欢迎进入注册页面"
                    }

                }
            }
        })

    </script>
    
</body>
</html>

对象格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">
</div>

<!-- 官网提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '大海'
        },
        //所有的侦听器，都应该被定义到watch节点下
        watch: {
            username: {
                // 侦听器的处理函数
                handler(newVal, odlVal) {
                    console.log(newVal, odlVal)
                },
                // immediate 选项的默认值是 false
                // immediate 的作用是：进入页面控制侦听器是否自动触发一次！
                immediate: true
            }
        }
    })
</script>


</body>
</html>

深度侦听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">
</div>

<!-- 官网提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '大海'
        },
        //所有的侦听器，都应该被定义到watch节点下
        watch: {
            username: {
                // 侦听器的处理函数
                handler(newVal, odlVal) {
                    console.log(newVal, odlVal)
                },
                // immediate 选项的默认值是 false
                // immediate 的作用是：进入页面控制侦听器是否自动触发一次！
                immediate: true
            }
        }
    })
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="info.username">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            info: {
                username: '大海',
                address: {
                    city: '北京'
                }
            }

        },
        //所有的侦听器，都应该被定义到watch节点下
        watch: {
           
            // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
            'info.username'(newVal) {
                console.log(newVal)
            }
        }
    })
</script>


</body>
</html>