VUE中watch用法

最新推荐文章于 2024-05-16 18:00:30 发布

hello_world!

最新推荐文章于 2024-05-16 18:00:30 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/djrm11/article/details/106195381

版权

前端专栏收录该内容

58 篇文章 47 订阅 ¥9.90 ¥99.00

订阅专栏

本文介绍了Vue中的watcher，用于监控Vue实例的变化。详细阐述了watch的用法，包括其在对象和数组变化时的响应，以及deep和immediate属性的影响。同时强调了在watch中不应使用箭头函数，以确保正确的上下文指向。

摘要由CSDN通过智能技术生成

一、 watch是什么？

监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。
简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

二、应用

**当watch检测对象/数组的情况

<template>
    <div>
        <p>a: {
  {a}}</p>
        <p>a: <input type="text" v-model="a"></p>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data(){
            return{
               a:'2'
            }
        },
        watch: {
            a: {
                handler(newVal, objVal) {
                        console.log(11);
                },
            }
        }
    }
</script>

控制台打印如

了解本专栏