IT学习网是免费的终身在线学习平台,现在主要提供IT(互联网)方面的教程,博客等方面的内容
主页 > 前端 > > 正文

编程学习网Vue中watch高阶用法

来源:IT学习网整理 发布时间:2020-02-14 18:50 标签:用法高阶watch
浏览:
很多时候,我们监听一个属性,不会使用到改变前后的值,只是为了执行一些方法,这时可以使用字符串代替;总所周知,watch是在监听属性改变时才会触发,有些时候,我们希望在组件创建后watch能够立即执行一次编程学习网。"/>Vue中watch高阶用法

前端开发前端导航工具/手册更多栏目

折扣返利

网站投稿

书籍/周边

站内搜索

fly63前端网

提交

我要投稿

Vue中watch高阶用法

时间: 2019-08-08阅读: 525标签: 属性

1. 不依赖新旧值的watch

很多时候,我们监听一个属性,不会使用到改变前后的值,只是为了执行一些方法,这时可以使用字符串代替

data:{ name:'Joe' }, watch:{ name:'sayName' }, methods:{ sayName(){ console.log(this.name) } }


2.立即执行watch

总所周知,watch是在监听属性改变时才会触发,有些时候,我们希望在组件创建后watch能够立即执行一次。可能想到的的方法就是在create生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法

data:{ name:'Joe' }, watch:{ name:{ handler: 'sayName', immediate: true } }, methods:{ sayName(){ console.log(this.name) } }

上面我们给入一个对象

handelr: 触发监听执行的方法(需要用到改变前后的值时,可换成函数)
immediate: 监听开始之后被立即调用


3. 深度监听

在监听一个对象时,当对象内部的属性被改变时,无法触发watch,我们可以继续使用对象的方式为其设置深度监听

data:{ studen: { name:'Joe', skill:{ run:{ speed: '5m/s' } } } }, watch:{ studen:{ handler: 'sayName', deep: true } }, methods:{ sayName(){ console.log(this.studen) } }

设置deep为true后,无论嵌套多深,只要属性值被改变都会触发监听


4.监听执行多个方法

使用数组可以设置多项,形式包括字符串、函数、对象

data:{ name:'Joe' }, watch:{ name:[ 'sayName1', function(newVal, oldVal){ this.sayName2() }, { handler: 'sayName3', immaediate: true } ] }, methods:{ sayName1(){ console.log('sayName1==>', this.name) }, sayName2(){ console.log('sayName2==>', this.name) }, sayName3(){ console.log('sayName3==>', this.name) }, }



.two_ads{overflow: hidden;} .two_ads a{float: left;width: 49.443%;} .two_ads a:nth-child(2){float: right;} .two_ads img{display: block;margin: 5px 0;max-width: 100%;}

热门文章

  • C++构造函数初始化列表
    C++构造函数初始化列表

    C++构造函数初始化列表

    构造函数的一项重要功能是对成员变量进行初始化,为了达到这个目的,可以在构造函数的函数体中对成员变量一一赋值,还可以采用 初始化列表 。 C +...

  • 抢占超声医学影像产业学习it的网站C位
    抢占超声医学影像产业学习it的网站C位

    抢占超声医学影像产业学习it的网站C位

    随着全球AI人工智能技术的快速发展与应用 全球医疗领域的智能化 科技化成为大势所趋 据相关资料数据统计 2016年全...

  • “编程从娃娃抓起”:逃得过“奥数” 又
    “编程从娃娃抓起”:逃得过“奥数” 又

    “编程从娃娃抓起”:逃得过“奥数” 又

    您所在的位置: 杭州网 > 新闻中心 > 国内新闻 “编程从娃娃抓起”:逃得过“奥数” 又要被编程套住 2019-03-22 09:18:07;杭州网 新华网 少儿编程火了,打开手机...

  • coreldraw教程网Photoshop iPad完整版本正式上
    coreldraw教程网Photoshop iPad完整版本正式上

    coreldraw教程网Photoshop iPad完整版本正式上

    Photoshop iPad完整版本正式上架苹果App Store...

  • 51自学网ps视频教程走在时尚前端的猎豹
    51自学网ps视频教程走在时尚前端的猎豹

    51自学网ps视频教程走在时尚前端的猎豹

    当消费者发现汽车一味的“大”并不能完全解决出行需求,反而影响了在城市中穿梭的便捷性之后,更加贴合年轻人...

后端

更多 >
后端趣味编程unzip命令 传zip到linux并解压
后端计算机程序设计设置FTP传输软件xftp默认打
后端计算机编程语言有哪些Java实现Linux grep命
后端趣味编程linux安装mysql5.7
后端儿童编程学习linux入门系列8--shell编程入门

工具资源

更多 >