Vue中的watch笔记

最新推荐文章于 2023-04-28 11:45:53 发布

原创最新推荐文章于 2023-04-28 11:45:53 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue计算属性专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue中watch的基本概念和用法，包括简单的监听、immediate和deep选项。通过实例展示了如何监听属性变化，当属性值更新时，对应的回调函数会被调用，展示新旧值的变化。此外，探讨了immediate选项如何使得回调在初始渲染时立即执行，以及deep选项用于深度监听对象属性的变化。

Watch的简单理解

引用官方解释就是：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $w a t c h () ，遍历 w a t c h 对象的每一个 p r o p e r t y 。语法： v m .$ watch( expOrFn, callback, [options] )
参数：

{string | Function} expOrFn
{Function | Object} callback
{Object} [options]

{boolean} deep
{boolean} immediate

返回值：{Function} unwatch
这些都是一些官方给我们的解释跟一些用法
现在我们来简单看一下代码怎么实现

简单的监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
        <div id="app">
            <input type="text" v-model="num">
        </div>
</body>
<script>
        new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
            num(newVal, oldVal) {
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })
 
</script>
</html>

我们进行监听num属性的数据变化
只要num值发生改变那么num方法就会被触发
方法中第一个参数的值是新的值也就是更改变化后的值
第二个则是旧值，之前的值
当我在输入框中打印一个2
在这里插入图片描述
会出现旧值为空，新值为2
再输入框中再加一个3，则

会打印出旧值为2，新值为23

immediate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
        <div id="app">
            <input type="text" v-model="num">
        </div>
</body>
<script>
        new Vue({
        el: '#app',
        data: {
            num: 1
        },
        watch: {
            num: {
            	// 立即处理 进入页面就触发
                immediate: true,
                // 数据发生变化就会调用这个函数 
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                }
            }
        }

    })
 
</script>
</html>

immediate字面意思就是马上， immediate: true,就是页面加载立马执行
在这里插入图片描述
由于旧值是没有所以打印undefined

deep

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./base/vue.js"></script>
<body>
    <div id="app">
        <input type="button" value="更改名字" @click="change">
    </div>
</body>
<script>
   new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })

 
</script>
</html>

刚开始打印
在这里插入图片描述
点击之后打印

这部分引用了一些别人的例子