Vue基础（watch 侦听属性）

最新推荐文章于 2024-04-28 01:22:19 发布

weixin_45368324

最新推荐文章于 2024-04-28 01:22:19 发布

阅读量357

点赞数

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

本文链接：https://blog.csdn.net/weixin_45368324/article/details/105878259

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

watch 侦听属性

有的时候，我们需要的派生数据是通过异步的方式处理的，这个时候，计算属性就不太好用了（不能处理异步）。我们可以使用另外一个选项：watch

• watch : 侦听属性；监听的是data的属性，当属性发生改变以后，会做的一些事情

• 里面传一个函数，第一个参数是最新的值，第二个参数是修改前的值

• 深度监听：如果监听了对象，当这个对象中的属性名对应的键值对发生改变以后，并不会触发监听的这个对象的函数；因为这个引用数据类型的地址没发生改变；

这个时候需要把watch监听的方法改成对象的写法，

	handler相当于函数，
    deep:true，是对这个person对象中的每一个属性进行监听，
    immediate:true,可以让函数立即执行一次；当其中一个属性发生改变，也会触发handler这个函数；

• 监听对象的时候写在handler方法的参数只写一个就可以，这个参数代表改变之后的值

• 如果想监听对象里的一个属性值可以写成’对象.属性名’ ，这个时候写在handler方法的参数就得写两个，
第一个参数是最新的值，第二个参是修改前的值

• 另一种添加监视的方法:vm.$watch(“XX”,function(value){})
https://cn.vuejs.org/v2/api/#vm-watch

延迟输入用watch

多层监听

对于多层数据的监听，可以使用字符串+点语法
在这里插入图片描述

深度监听

默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model='obj.name'>
        {{obj.name}}
    </div>
    <script>

        let vm = new Vue({
            el: '#app',
            data: {
                val: 'yy',
                obj: {
                    name: 'yy'
                }
            },
            //watch监控的属性是data中的属性
            watch: {
                //val是被监控的属性 可以写成一个函数的形式
                // 只要被监控的属性发生改变就会触发这个函数
                // 默认第一次不会执行
                /*                 val(newVal, oldVal) {
                                    // 每一次执行默认传两个值 新值 和 旧值
                                    // console.log(1);
                                    console.log(newVal, oldVal);
                                } */
               // 对象写法：
                val: {
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);

                    },
                    // 第一次执行一下 只传一个参数 就是当前值
                    /* immediate() {
                        return true
                    } */
                    immediate: true
                },
                obj: {
                    // 默认监控对象的时候里面的属性发生改变是监控不到的因为监控的是对象的地址值

                    //如果想监控到属性的改变就加一个属性deep:true深度监控
                    //但是要注意handler传的新值和旧值内存里面都是改变后的值
                    handler(newVal, oldVal) {
                        // console.log(newVal, oldVal)
                        console.log(arguments);                        
                        // console.log(555);
                        
                    },
                    deep: true
                }
            }
        })
    </script>
</body>

</html>

computed 不支持promise

在这里插入图片描述

weixin_45368324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（watch 侦听属性）

watch有的时候，我们需要的派生数据是通过异步的方式处理的，这个时候，计算属性就不太好用了（不能处理异步）。我们可以使用另外一个选项：watch延迟输入用watch多层监听对于多层数据的监听，可以使用字符串+点语法深度监听默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听<!DOCTYPE html><html lang="en"...
复制链接

扫一扫