Vue之监听方法案例详解

vue中的监听方法

watch

注意

名字 你想监听哪个属性，就要和他起一样的名字

1.作用

用来监听vue实例中的数据变化
可以随时修改状态的变化

2.触发条件

当你监听的属性发生变化时，会自动调用对应的监听方法

3.使用场景

用于异步处理，开销比较大的运算

4.示例

	 watch:{
             name(newvalue,oldvalue){
                  //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
                    // this.age
                    // console.log('name属性发生变化了')
                    console.log(newvalue,oldvalue)
                }

5.监听对象时

<script>
export default {
    data() {
        return {
            obj: {
                name: "张三",
                age: 20,
                children: [
                    {
                        name: "李四",
                        age: 27
                    },
                    {
                        name: "王五",
                        age: 23
                    }
                ]
            }
        };
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {

            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
};
</script>

监听对象的时候，需要加deep:true，这样才能深入底层去实时监听，如果没有加的话，对象是监听不到变化的。

immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听

deep:true；

是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。

到此这篇关于Vue之监听方法案例详解的文章就介绍到这了,更多相关Vue之监听方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何理解Vue中computed和watch的区别

    如何理解Vue中computed和watch的区别

    概述 我们在 Vue 项目中多多少少都会有用到 computed 和 watch,这两个看似都能实现对数据的监听,但还是有区别.所以以下通过一个小栗子来理解一下这两者的区别. computed 计算属性 计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值,这个新值只会根据已知值的变化而变化,简言之:这个属性依赖其他属性,由其他属性计算而来的. <p>姓名:{{ fullName }}</p> ... ... data: { firstNam

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • Vue3中watchEffect的用途浅析

    前言 vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项.他可以实现在一个属性变更的时候,去执行我们想要的行为.比如: 当ID改变的时候,从数据库里面获取新的数据. 当属性变换的时候执行一个动画. 当搜索条件变更的时候,更新查询到的数据. 但是 vue3 除了 watch api, 还新增了一个 watchEffect 的 api, 我们来看看他的用法.

  • vue watch监控对象的简单方法示例

    watch的作用:监听vue实例上数据的变动 示例: queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch data() { return { winChip

  • vue Watch和Computed的使用总结

    01. 监听器watch (1)作用 watch:用于监听data中的数据变化,只在被监听的属性值发生变化时执行 export default { data() { return { number: 1 } }, watch:{ // 普通监听方法,这里表示监听data中的 number属性 // 第一个参数表示改变后的新值,第二个参数表示改变前的旧值 number(newVal,oldVal){ console.log(newVal); console.log(oldVal); } } } (

  • vue监听路由变化时watch方法会执行多次的原因及解决

    目录 需求描述: 需求解析: 解决需求 问题解决 本人前端菜鸟一名,一直致力于不间断的生产管理后台的bug,并以此自勉自励.近几天接到一个需求,网上也搜了很多例子,但是没有从根本上解决.在这里记录一下我自己的解决的过程,这也是第一次在掘金发言,求轻虐. 需求描述: 有A.B两个页面,需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询,然后显示在B页面 需求解析: 如果是你,你拿到这个需求,应该很容易想到在B页面对路由变化做watch,然后获取参数执行查询数据的方法完事. 解

  • vue项目watch内的函数重复触发问题的解决

    问题描述: 有两个页面A和B,每个页面里都有一个getList()方法.这个两个方法都需要传一个相同的参数C,参数C的选择过程又比较麻烦.为了避免在切换A.B两个界面重复选择参数C的问题,我将参数C存入vuex中,然后在两个页面里都使用watch监听参数C来执行getList()方法.然后发现一个问题,从A页面进入B页面后,在B页面重新选择参数C,A页面的getList()方法竟然也会被执行,反之亦然,从B页面到A页面后,在A页面改变参数C也会执行B页面的getList()方法. 后来发现是使用

  • Vue3中watch的用法与最佳实践指南

    Vue3中watch的用法与最佳实践指南

    目录 前言

  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') c

  • Android TextWatcher内容监听死循环案例详解

    Android TextWatcher内容监听死循环 TextWatcher如何避免在afterTextChanged中调用setText后导致死循环,今天在用TextView时,添加了addTextChangedListener方法监听内容改变,在afterTextChanged方法中又执行了setText方法,结果造成afterTextChanged方法再次调用,然后setText,因此造成了死循环的问题.列出此问题,以备后忘. 先贴Google文档原文说明: /** * This meth

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • vue之监听器的使用案例详解

    vue之监听器的使用案例详解

    第一种,用jquery的ajax发请求  用户注册时,判断用户名不能重复,可以用到监听器.监听器,用watch,需要监听哪个值的变化,就把这个值,放在watch里面.  拿到新值,调用接口,去请求后端,判断用户名是否已存在.  此时,遇到的问题,用户刷新页面的时候,并不会触发监听器,只是在username值发生变化的时候,才会触发监听器,改进方法:将方法格式的侦听器改成对象格式的侦听器. 优先推荐方法格式的监听器(最简单),如果刷新进来就需要执行一次,就定义成对象的监听器.  当一个对象有多个属

  • Vue.js之$emit用法案例详解

    Vue.js之$emit用法案例详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn:  例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&

  • Spring事件监听机制观察者模式详解

    目录 前言 观察者模式 观察者的角色定义 Java中的事件机制 Spring中的事件机制 Spring事件监听案例 小结 前言 Spring中提供了一套默认的事件监听机制,在容器初始化时便使用了这套机制.同时,Spring也提供了事件监听机制的接口扩展能力,开发者基于此可快速实现自定义的事件监听功能. Spring的事件监听机制是在JDK事件监听的基础上进行的扩展,也是在典型观察者模式上的进一步抽象和改进.所以,结合Spring的事件监听机制与观察者模式来学习,可以达到理论与实践的完美融合. 本

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • vue el-date-picker动态限制时间范围案例详解

    vue el-date-picker动态限制时间范围案例详解

    分为两种情况 1.开始时间和结束时间同一个框(限制只能本月) 2.开始时间和结束时间分开两个框(限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)  情况1 //情况1 原创版权声明:本文为weixin_40998880原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. //本文链接:https://blog.csdn.net/weixin_40998880/article/details/106272897 //html <el-date-picke

  • Android 滑动监听的实例详解

    Android 滑动监听的实例详解

    Android 滑动监听的实例详解 摘要: ScollBy,ScollTo是对内容的移动,view.ScollyBy是对view的内容的移动 view,ScollTo是对内容的移动(移动到指定位置),view.ScollyBy是对view的内容的移动(移动距离) 在次activity中,当手指点击TextView ,此时是ViewGroup 响应还是TextView响应呢? 代码实践: 在activity中重写onTouchEvent(): public boolean onTouchEvent

随机推荐