扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >vue对象的侦听属性怎么表示
  • 777

0
分享到

vue对象的侦听属性怎么表示

2023-07-04 19:07:09 777人浏览 泡泡鱼
摘要

这篇文章主要介绍“Vue对象的侦听属性怎么表示”，在日常操作中，相信很多人在vue对象的侦听属性怎么表示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue对象的侦听属性怎么表示”的疑惑有所帮助！接下来，请跟

这篇文章主要介绍“Vue对象的侦听属性怎么表示”，在日常操作中，相信很多人在vue对象的侦听属性怎么表示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue对象的侦听属性怎么表示”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

vue对象的侦听属性用“watch”表示。所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。vue中监听属性有两种写法：1、在“new Vue()”中传入watch配置；2、通过“vm.$watch”进行监听。

watch 侦听属性

所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。

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

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

监听属性有两种写法，如下：

  • new Vue()中传入watch配置。

  • 通过vm.$watch进行监听。

看个具体的例子。

  • 在new Vue()中传入watch配置。

<body>    <div id="root">        <div>今天天气很{{info}}</div><br/>        <button @click="changeWeather">切换天气</button>    </div>    <script>        Vue.config.productionTip = false;        new Vue({            el:"#root",            data:{                isHot:true            },            computed:{                info(){                    return this.isHot ? "炎热" : "凉爽";                }            },            methods:{                changeWeather(){                    this.isHot = !this.isHot;                }            },            watch:{                isHot:{                    immediate:true,                    handler(newValue,oldValue){                        console.log("监听isHot：","newValue="+newValue,"oldValue="+oldValue);                    }                }            }        })    </script></body>

如果watch isHot 时，只提供了回调函数handler，如下：

watch:{    isHot:{        handler(newValue,oldValue){            console.log("isHot:newValue="+newValue,"oldValue="+oldValue);        }    }}

则可以简写成如下形式：

watch:{    isHot(newValue,oldValue){        console.log("isHot:newValue="+newValue,"oldValue="+oldValue);    }}

  • 通过vm.$watch进行监听。

<body>    <div id="root">        <div>今天天气很{{info}}</div><br/>        <button @click="changeWeather">切换天气</button>    </div>    <script>        Vue.config.productionTip = false;        const vm = new Vue({            el:"#root",            data:{                isHot:true            },            computed:{                info(){                    return this.isHot ? "炎热" : "凉爽";                }            },            methods:{                changeWeather(){                    this.isHot = !this.isHot;                }            }        })        vm.$watch("isHot",{            immediate:true,            handler(newValue,oldValue){                console.log("监听isHot：","newValue="+newValue,"oldValue="+oldValue);            }        })    </script></body>

如果watch isHot时，只提供了handler，如下：

vm.$watch("isHot",{    handler(newValue,oldValue){        console.log("isHot:newValue="+newValue,"oldValue="+oldValue);    }})

则可以简写成以下形式：

vm.$watch("isHot",function(newValue,oldValue){    console.log("isHot:newValue="+newValue,"oldValue="+oldValue);})

打开浏览器，测试下。
vue对象的侦听属性怎么表示

深度监听

<body>    <div id="root">        <div>a的值是{{numbers.a}}</div>        <button @click="numbers.a++">点我加1</button>    </div>    <script>        Vue.config.productionTip = false;        new Vue({            el:"#root",            data:{                numbers:{                    a:1,                    b:1                }            },            watch:{                "numbers.a":{                    handler(newValue,oldValue){                        console.log("a:","newValue="+newValue,"oldValue="+oldValue);                    }                },                "numbers":{                    deep:true,                    handler(newValue,oldValue){                        console.log("numbers发生了变化！");                    }                }            }        })    </script></body>

监听多级结构的某个属性，如numbers.a，当numbers对象的a属性发生变化时，Vue将侦听到，并执行回调handler。
监听多级结构的所有属性（深度监听），如"numbers":{deep:true}，当numbers对象的任一属性发生变化，Vue也能侦听到，并执行回到handler。

监听属性和计算属性

使用监听属性实现

<body>    <div id="root">        姓：<input type="text" v-model="firstName" /><br/><br/>        名：<input type="text" v-model="lastName" /><br/><br/>        全名：<span>{{fullName}}</span>    </div>    <script>        new Vue({            el:"#root",            data:{                firstName:"张",                lastName:"三",                fullName:"张-三"            },            watch:{                firstName(val){                    this.fullName = val + this.lastName;                },                lastName(val){                    this.fullName = this.firstName + "-" + val;                }            }        })    </script></body>

使用计算属性实现

<body>    <div id="root">        姓：<input type="text" v-model="firstName" /><br/><br/>        名：<input type="text" v-model="lastName" /><br/><br/>        全名：<span>{{fullName}}</span>    </div>    <script>        new Vue({            el:"#root",            data:{                firstName:"张",                lastName:"三"            },            computed:{                fullName(){                    return this.firstName+"-"+this.lastName;                }            }        })    </script></body>

可以看到：计算属性能够完成的，监听属性一定能够完成。
但，监听属性能够完成的，计算属性不一定能够完成，比如当数据变化时执行异步操作。看个具体的例子：当firstName变化时，等1秒后，fullName才变化。

<body>    <div id="root">        姓：<input type="text" v-model="firstName" /><br/><br/>        名：<input type="text" v-model="lastName" /><br/><br/>        全名：<span>{{fullName}}</span>    </div>    <script>        new Vue({            el:"#root",            data:{                firstName:"张",                lastName:"三",                fullName:"张-三"            },            watch:{                firstName(val){                    setTimeout(() => {                        this.fullName = val + "-" + this.lastName;                    },1000);                },                lastName(val){                    this.fullName = this.firstName + "-" + val;                }            }        })    </script></body>

【vue】方法、计算属性、数据监听也对计算属性和监听属性做过对比。虽然计算属性在大多数情况下更合适，但当需要在数据变化时执行异步操作时，监听属性更有用。

另外，再次建议：

  • 由Vue管理的函数，最好写成普通函数，这样函数中的this指向才是Vue实例。

  • 不被Vue管理的函数，如定时器函数、ajax回调函数、promise函数，最好写成箭头函数。因为箭头函数没有自己的this。

到此，关于“vue对象的侦听属性怎么表示”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: vue对象的侦听属性怎么表示

本文链接: https://lsjlt.com/news/347058.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue对象的侦听属性怎么表示
    这篇文章主要介绍“vue对象的侦听属性怎么表示”，在日常操作中，相信很多人在vue对象的侦听属性怎么表示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue对象的侦听属性怎么表示”的疑惑有所帮助！接下来，请跟...
    99+
    2023-07-04
  • vue 对象的侦听属性用什么表示
    本教程操作环境：windows7系统、vue3版，DELL G3电脑。watch 侦听属性所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。有的时候，我们需要的派生数据是通过异步的...
    99+
    2023-05-14
    侦听属性 Vue
  • Vuewatch侦听对象属性详解
    目录1. Vue watch 概述2. Vue 对象的监听方法1. Vue watch 概述 Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器。 方法格式的侦听器...
    99+
    2023-05-17
    Vue watch 侦听对象 Vue watch 侦听对象属性
  • Vue中计算属性和侦听器怎么使用
    本篇内容主要讲解“Vue中计算属性和侦听器怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中计算属性和侦听器怎么使用”吧!在Vue中通常我们会在模板绑定表达式，模板是用来描述视图结构...
    99+
    2023-06-03
  • 简单聊聊Vue中的计算属性和属性侦听
    目录1. 计算属性语法:  1.简写方式:语法:  2.完整写法: 2. 监视（侦听）属性 1. 监视属性watch：2. 深度监视3. 区别和原则总结1. 计算...
    99+
    2024-04-02
  • Vue中的watch侦听器、计算属性、Vue-cli和组件怎么使用
    这篇文章主要介绍了Vue中的watch侦听器、计算属性、Vue-cli和组件怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的watch侦听器、计算属性、Vue-cli和组件怎么使用文章都会有所收...
    99+
    2023-06-30
  • Vue计算属性与监视(侦听)属性的使用深度学习
    目录计算属性(computed)监视属性(watch)监视的两种方法immediate选项深度监视计算属性(computed) 计算属性指的是通过一系列运算之后，最终得到一个值。这个...
    99+
    2022-11-13
    vue计算属性和侦听属性 vue计算属性 vue监视属性
  • 聊聊Vue中的计算属性、方法与侦听器
    也就是说，当计算属性依赖的数据发生改变时，它会重新计算；若没有变化时，则不计算，会一直使用上一次计算的结果（这样也就提高了一些性能）。在我们的代码中，当 firstName 或 lastName 改变时，fullName 会重新计算，不变时...
    99+
    2023-05-14
    前端 JavaScript Vue.js
  • vue中watch监听对象中某个属性的方法
    目录immediate 和 handlerdeep 深度监听以currentParams为例，监听selOrgId属性immediate 和 handler watch 的用法有个特...
    99+
    2023-05-17
    vue watch监听对象属性 vue watch监听
  • Vue3中的计算属性及侦听器怎么使用
    计算属性我们知道，在模板中可以直接通过插值语法显示一些data中的数据，但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算，在...
    99+
    2023-05-14
    Vue3
  • 怎么使用Vue的watch侦听器
    小编给大家分享一下怎么使用Vue的watch侦听器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！侦听器watch 函数名就是要侦听的元素的名字传入的参数第一个是变化后的新值newval，第二个是变化前的旧值old...
    99+
    2023-06-22
  • Vue中的计算属性、方法与侦听器源码分析
    这篇“Vue中的计算属性、方法与侦听器源码分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的计算属性、方法与侦听器...
    99+
    2023-07-05
  • Vue3中怎么使用watch监听对象的属性值
    这篇文章主要介绍“Vue3中怎么使用watch监听对象的属性值”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue3中怎么使用watch监听对象的属性值”文章能帮助大家解决问题。Vue3 中使用 w...
    99+
    2023-07-04
  • vue对象添加属性(key:value)、显示和删除属性方式
    目录对象添加属性(key:value)、显示和删除属性效果图添加属性 删除属性不能检测到对象属性的添加或删除问题有三种解决方案 对象添加属性(key:value)...
    99+
    2024-04-02
  • Vue中的计算属性与监听属性怎么用
    今天小编给大家分享一下Vue中的计算属性与监听属性怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、为什么要使用计算属...
    99+
    2023-06-29
  • Vue路由对象属性.meta $route.matched的示例分析
    这篇文章主要介绍Vue路由对象属性.meta $route.matched的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！$route.fullPath1 路由是：/path...
    99+
    2024-04-02
  • JavaScript对象、对象属性、对象方法的示例分析
    这篇文章主要介绍JavaScript对象、对象属性、对象方法的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！JavaScript 变量是数据值的容器。 这段代码把一个单一值...
    99+
    2024-04-02
  • Vue监听属性和计算属性怎么使用
    这篇文章主要讲解了“Vue监听属性和计算属性怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue监听属性和计算属性怎么使用”吧！一、watch监听属性这个属性用来监视某个数据的变化，...
    99+
    2023-06-25
  • vue怎么使用watch监听属性
    这篇文章主要介绍了vue怎么使用watch监听属性的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么使用watch监听属性文章都会有所收获，下面我们一起来看看吧。基本用法Vue watch最重要的使用场景...
    99+
    2023-06-30
  • Vue之Vue.set动态新增对象属性的示例分析
    这篇文章给大家分享的是有关Vue之Vue.set动态新增对象属性的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。当我们给一个比如props中，或者data中被观测的对象添...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作