1。前言 本节介绍侦听器watch的使用方法。包括什么是侦听器，侦听器的特点，以及如何对不同类型的数据进行监听。其中重点掌握对不同类型的数据如何使用侦听器，了解它之后，才能在之后的日常开发中熟练运用。2。木子解释 Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。官方定义 侦听器watch是Vue提供的一种用来观察和响应Vue实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。3。使用侦听器 前面我们介绍了什么是侦听器watch，那么如何定义一个侦听器呢？ 侦听器watch实际是vue实例上的一个对象属性。当我们需要对vue实例上某个属性进行侦听时，我们以需要被侦听的属性名作为watch对象的键，以一个函数function作为该键的值。函数function接收两个参数：侦听数据变化之后的值newValue；侦听数据变化之前的值oldValue：varvmnewVue（｛el：app，data（）｛return｛count：0｝｝，watch：｛count：function（newVal，oldVal）｛具体处理逻辑｝，｝｝） 代码解释：第5行，我们在data中定义了Number类型的数据count。第812行，我们在侦听属性watch中定义了侦听器count。 在介绍完如何定义一个侦听器之后，让我们用几个实例来学习一下如何在项目中使用侦听器。3。1对字符串、布尔值、数字、数组类型的监听 假设当前项目中有以下需求，用户的购买商品页面：当用户每次修改要购买商品名称的时候，都需要清空购买数量。用户添加的数量在必须大于0，并且当首次出现数量大于10的时候弹出数量超额提示，下次超过不再提示。购物车数量发生变化时提示用户。 在我们写具体的代码逻辑之前，让我们先来分析一下如何使用侦听器watch来实现需求功能：对于需求1，我们需要对商品名称进行侦听，当它改变的时候将数量清零。对于需求2，我们需要对商品数量进行侦听，当商品数量首次超过10的时候，弹出对应提示；当商品数量小于0的时候，将数量改为0。对于需求3，对购物车数据进行侦听，每次操作购物车数据时提示用户。具体实现如下： 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodystylebackgroundcolor：ccc；商品名称：inputvmodelnamebuttonvon：clickcut减一个button购买数量｛｛count｝｝buttonvon：clickadd加一个buttonbuttonvon：clickaddCart加入购物车button｛｛item。name｝｝x｛｛item。count｝｝bodyhtml 运行案例可查看在线运行效果 代码解释：在html代码中，我们给出一个商品名称输入框以及添加数量和减少数量的两个按钮。 代码第49行，我们定义了四个数据，分别是：name商品的名称count商品的数量isMax是否首次超过数量10list购物车列表 代码第1024行，我们定义了三个方法，分别是：cut将数量count1add将数量count1addCart修改购物车数据 代码第2549行，我们定义了四个侦听器，分别是：name对数据name侦听，触发时将count变成0；并将isMax变成falsecount对数据count侦听，检测到count大于10时，将isMax变成true，检测到count小于0的时候将count修改为0。isMax对数据isMax侦听，触发时，判断变化后的值是否为true，当值为true时弹出提示消息list对数据list侦听，每次改变时弹出提示消息。3。2示例二：侦听对象某个属性的变化 上面在示例一中学习了对字符串、布尔值、数字、数组类型的侦听，那么如何对对象的某个属性进行侦听呢？ 我们对上述代码稍作修改： 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品名称：inputvmodelproduct。namebodyhtml 运行案例可查看在线运行效果 代码解释：第1113行，我们定义来侦听器product。我们的理想效果是：当在输入框中输入商品名称的时候，在控制台中会打印出最新的product值。 从效果图中我们可以看出，实际的执行效果和我们想象中并不一致。当在输入框中输入商品名称的时候，侦听器product并没有触发。这是为什么呢？我们先带着这个疑问看下下面这段的代码： 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品名称：inputvmodelproduct。namebodyhtml 运行案例可查看在线运行效果 代码解释：第1113行，我们定义了侦听器product，并在生命周期mounted函数中修改product的值。运行代码，我们惊奇地发现侦听器会在一开始的时候触发，输入框中输入的时候同样不会触发。 大部分同学看到这里应该已经猜到之前为什么修改name不会触发侦听器。因为product指向的是一个引用地址，在第一个例子中，我们只修改了product的name属性，而没有修改product的引用地址。而在第二个例子中，我们给product重新赋值，因此product的引用地址也发生了改变，所以可以成功触发侦听器。通过这个结论，如果只想监听product的name属性的变化，可以对代码进行如下修改： 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品名称：inputvmodelproduct。namebodyhtml 运行案例可查看在线运行效果 代码解释：第1012行，我们定义了侦听器product。name，对product的name属性进行监听。当name值发生变化的时候触发侦听器。4。侦听器的高级用法 在之前的例子中，我们都是给侦听器赋值一个函数，实际上它还可以用对象的形式来定义。4。1handler方法 我们给name绑定了一个handler方法，之前我们写的watch方法其实默认写的就是这个handler。当name发生改变时，handler方法就会执行。 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodystylebackgroundcolor：ccc；商品名称：inputvmodelnamebodyhtml 运行案例可查看在线运行效果 代码解释：第711行，我们定义了侦听器name。它是一个对象，当name发生变化的时候，会调用handler的方法4。2immediate属性 有时候你可能需要在侦听器最初绑定的时候就触发一次，这个时候我们就需要用到immediate属性。示例： 实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品名称：inputvmodelnamebodyhtml 运行案例可查看在线运行效果 代码解释：第13行，我们给侦听器name一个immediate属性，它的值为true。这个时候，当页面第一次渲染的时候就会触发侦听器的handler函数。4。3deep属性 在之前的3。2中我们学习了如何对对象的某个属性做侦听：通过指明对象的某个属性来。假如现在有以下代码： 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品名称：inputvmodelproduct。name商品数量：inputvmodelproduct。count商品标题：inputvmodelproduct。titlebodyhtml 运行案例可查看在线运行效果 代码解释：在watch属性中，我们写了三个侦听器，都是针对product的某个属性进行侦听的。那有没有什么更简单的方法可以实现当product里面任何属性发生变化的时候就执行侦听呢？这里就需要用到deep属性。deep属性代表是否深度监听，默认值是false。当设置为true时，会对对象里面的每个属性进行侦听。 示例： 实例演示！DOCTYPEhtmlhtmllangenstylebackgroundcolor：ccc；headmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody商品名称：inputvmodelproduct。name商品数量：inputvmodelproduct。count商品标题：inputvmodelproduct。titlebodyhtml 运行案例可查看在线运行效果 代码解释：第17行，我们加了一个属性deep，deep的意思就是深入观察，监听器会一层层地往下遍历，给对象的所有属性都加上这个监听器，修改对象里面任何一个属性都会触发这个监听器里的handler。5。小结 本节，我们带大家学习了侦听器watch在vue项目中的运用。主要知识点有以下几点：通过侦听器来监听数据的变化，进行相应的逻辑处理。如何监听对象类型数据的某个属性进行侦听。侦听器的高级用法，handler函数、立即触发immediate属性、深度监听deep属性。
燃油车再见！充电5分钟，续航200千米，广汽埃安AIONVP要问为什么不选择电动汽车，很多人的第一理由可能是使用起来没有燃油车方便，的确，燃油车3分钟左右就可以满血复活，但是电动汽车的充能时间一般都要1个小时以上，对于长途出行来说，更是……易平方韩兆阳重构聚变易聚屏构建5G智屏时代新场景在2021GFIC5G全球家庭互联网大会的家庭智屏论坛上，深圳市易平方网络科技有限公司总经理助理韩兆阳发表题为《重构聚变易聚屏构建5G智屏时代新场景》的精彩演讲。二十不惑……五菱NanoEV特别版天津车展上市，5。98万起，两座布局，继五菱宏光MINIEV热卖后，越来越多的厂商也瞄准了A0级的新能源汽车市场。五菱宏光MINIEV目前已经坐稳新能源销量榜榜首位置。在此前提下，五菱汽车也是正式在天津车展上市了其……智能时代，我们需要什么样的智能黑板？随着智能时代的到来，用智能重塑所有既有的产业，已经成为公认的最有想象空间超级大势。智能已经不再是营销的噱头以及极客们自娱自乐的玩具，它正越来越广泛的嵌入到每一个人的生活情境之中……笔记本选购方法，避免大家走弯路又快开学了，不少人也准备添购一台笔记本。对电脑不熟的人，想要选购一台性价比高的笔记本确实不容易，网上天花乱坠的宣传，实体店导购的推销，很容易让你选错，现在我告诉大家一个选……把宽带拉山里，大概10公里，怎么解决，求大神指点？从题主的描述来看，要把宽带拉到山里，大概10公里的距离，最靠谱的方案就是铺设光纤线路。由于距离是10公里，使用网线是不行的，因为网线的单段传输距离是100米，使用中继器后……中国互联网公司的新故事不是挣大钱商业回归到世俗的本意，体制突破的戏剧性下降。作者石灿编辑园长一hr7月21日，河南暴雨灾情，腾讯在自家公众号发文寻找一个建立腾讯文档的人。那个文档很特别，名为……Facebook拟在欧盟招聘1万人开发元宇宙三言财经10月18日消息，据新浪财经报道，Facebook表示，计划未来五年在欧盟创造1万个新的高技能工作岗位，以推动开发元宇宙。今年7月，Facebook首席执行官马克……Pico发布Neo3，2499的价格是否意味着国产VR品牌正2021年5月10日，国产VR一体机厂商Pico发布了全新一代产品PicoNeo3与商用版本PicoNeo3ProPicoNeo3ProEye。三款新品都使用了高通骁龙XR2芯……比鸿蒙还早的国产手机系统！马云巨资打造，为什么已经销声匿迹？别说这个叫阿里云的系统，即YunOS系统，当时在几款魅族的低端机上就使用过，我还给家里的老人买过，我也试用了的，很好用，真如他们所说的简洁、清爽。为什么说中YunOS系统……宁德时代拟合计140亿元与ATL共同出资设立电芯合资公司和电品玩4月28日讯，宁德时代今天发布公告，称与AmperexTechnologyLimited签署两份《合资合同》，拟共同出资设立两家合资公司，从事应用于家用储能、电动两轮车等领……有没有适合企业用的办公软件呢？给大家推荐一款企业用的文件管理办公软件文件管理工具：一粒云推荐理由：如何管理员工？如何管理客户资料？如何管理设备？花钱？太贵？IT部门开发？太累！一粒云是一个非常实……