watch侦听属性

最新推荐文章于 2024-05-14 11:19:39 发布

丹&d

最新推荐文章于 2024-05-14 11:19:39 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：服务器前端运维

本文链接：https://blog.youkuaiyun.com/sdrfsef/article/details/124829265

本文详细介绍了Vue中watch的用法，包括如何监听属性变化、监听数组和对象的注意事项，以及如何开启深度监听和立即触发监听器。重点讨论了在数组变更和对象深层次数据改变时，如何正确设置和使用watch。

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

1.了解侦听属性

watch侦听属性：可以监听到数据是否发生改变,监听到之后可以进行一些操作,虽然大多数功能计算属性都可以实现,但是像Ajax等异步请求或开销较大的操作，这个方式是最有用的。

监听器的函数里边能够收到两个参数: 更改后的数据和更改前的数据

<div id="app">
    <button @click="value='更改后的数据' ">点击更改数据</button>
    <h1>{{value}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            value:'原数据',
        },
       watch:{
            value(newVal,oldVal){
                this.value = '最终结果'
                console.log('监听到数据改变了',newVal,oldVal)
            }
       }
    })
  
</script>

2.监听(侦听)数组

当被侦听的是数组,我们需要注意,通过数组索引改变数组数据是侦听不到的

因为Vue实现数据双向绑定,底层是利用Object.definedProperty中的get函数和set函数,而数组中的每项数据,没有对应的getter和setter

所以,如果要侦听数组,则需要使用数组的push,pop,shift,unshift 等能够改变数组的方法或者利用Vue封装的 $set( ) 对数组进行更改

$set( ) 参数1: 侦听的数组 ; 参数2 :索引; 参数3:要更改的值

<div id="app">
    <button @click="updateArr ">点击更改数据</button>
    <h1>{{arr}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
           arr:[1,2,3,4],
        },
        methods:{
            updateArr(){
                this.$set(this.arr,0,8) // $set() 参数1: 数组 ;参数2 :索引; 参数3:要更改的值
                // this.arr.push(5) // 更改数组中的值不能通过下标改某一个值,可以使用push shift pop等或者$set()
            }
        },
       watch:{
           arr(){
                console.log('监听到数据改变了')
            }
       }
    })

</script>

3.监听(侦听)对象

vue的数据监视默认只能监视一层数据,比如对象，对象中的属性值改变，但是对象的首地址没有改变，watch认为数据没有改变，我们需要开启深度监控

watch简写形式,是一个函数,默认执行的是handler函数,默认只能监视一层数据;

如果需要开启深度监视,需要写完整写法,是一个对象,配置一个deep属性,值为true,

如果页面初次渲染就需要侦听到数据改变,则配置 immediate:true

<div id="app">
    <button @click="updateArr ">点击更改数据</button>
    <h1>{{arr}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: {
                name: '张三',
                age: 17
            }
        },
        methods: {
            updateArr() {
                this.arr.name = '李四'
            }
        },
        watch: {
            arr:{            // 简写形式是一个函数,默认执行的是handler函数,默认只能监听一层数据
               handler(){    // 如果需要监听对象中属性变化,需要开启深度监视,此时监听属性是一个对象,需要配置deep:true
                   console.log('监听到了')
               },
                deep:true // 开启深度监视
            }
        }
        // watch: {
        //     arr() {
        //         console.log('监听到数据改变了')
        //     }
        // }
    })

</script>

官网地址:计算属性和侦听器 — Vue.jshttps://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8