计算属性和侦听器都可以监听到data区数据的变化&＃xff0c;当数据变化时可以触发方法的调用&＃xff0c;从而在方法内部可以进行相应的逻辑处理。
计算属性的语法格式是&＃xff1a;computed: {}
侦听器的语法格式是&＃xff1a;watch: {}
一、计算属性
计算属性一般是为了简化模板中的内容&＃xff0c;让模板中内容尽可能简洁。如果我们将太多的逻辑写在模板中&＃xff0c;模板将会变得难以维护。
下面举一反例&＃xff0c;我们将字符串逆序的逻辑写在模板中。
{{ message.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;) }} div>div> let vm &＃61; new Vue({ el: &＃39;#app&＃39;, data: { message: &＃39;Hello World&＃39; } })script>
如果我们将字符串逆序的逻辑抽取到计算属性中&＃xff0c;模板会更清晰&＃xff0c;改造如下&＃xff1a;
{{ resMsg }} div>div> let vm &＃61; new Vue({ el: &＃39;#app&＃39;, data: { message: &＃39;Hello World&＃39; }, computed: { resMsg() { return this.message.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;) } } })script>
我们在computed中声明了一个计算属性resMsg&＃xff0c;通过这个属性来接收变量message逆序之后的值。
火眼金睛的你应该发现了resMsg更像一个方法&＃xff0c;而不像一个属性。这是因为计算属性的简写方式导致&＃xff0c;不是它的原始样子&＃xff0c;原始样子如下&＃xff1a;
computed: { resMsg: { get() { return this.message.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;) } } }
计算属性默认只有get方法&＃xff0c;当只有get方法时&＃xff0c;就可以进行简写。
当然&＃xff0c;如果有需要&＃xff0c;我们可以为计算属性提供它的set方法&＃xff0c;set方法在计算属性的值被修改时自动调用。这个特性一般在前后端交互时&＃xff0c;数据格式不一致时会用到。比如时间、金钱等等在前后端的格式就通常不一样。
我们以钱为例来说明一下set方法的应用场景。
通常情况下&＃xff0c;后端为了避开浮点数存储不精确的问题&＃xff0c;会以分为单位进行整数存储。然而&＃xff0c;前端在展示的时候&＃xff0c;通常是以元为单位&＃xff0c;这时两个单位就不一致&＃xff0c;它们相差100倍。
现在前端通过接口调用&＃xff0c;拿到的钱是100分&＃xff0c;赋值给cents变量&＃xff0c;该值要转化成元在页面上展示&＃xff0c;我们就可以声明一个yuan的计算属性去实现。当计算属性yuan被修改时&＃xff0c;对应的分又要赋值到cents变量上&＃xff0c;这时候set方法就派上用场了&＃xff0c;代码如下
分&＃xff1a;{{cents}}
元&＃xff1a;{{yuan}}
改变元&＃xff1a;
div> let vm &＃61; new Vue({ el: &＃39;#app&＃39;, data: { cents: 100 }, computed: { yuan: { get: function () { return this.cents / 100; }, set: function (newVal) { this.cents &＃61; newVal * 100 } } } })script>
我们就通过set方法自动被调用的特性&＃xff0c;在方法内部&＃xff0c;将元转变成分&＃xff0c;并赋值给cents变量。
通常情况下&＃xff0c;我们只会用到get方法&＃xff0c;所以简写形式居多&＃xff0c;但不要把它当做方法。它跟方法是不一样的&＃xff0c;方法的每次调用&＃xff0c;方法内部逻辑都会执行一遍。计算属性却不会&＃xff0c;它具备基于依赖的缓存能力。下面例子来证实这个现象。
{{reverseMsg}}div>
{{reverseMsg}}div>
{{reverseStr(msg)}}div>
{{reverseStr(msg)}}div>div> let vm &＃61; new Vue({ el: &＃39;#app&＃39;, data: { msg: &＃39;Hello&＃39; }, computed: { reverseMsg() { console.log(&＃39;computed&＃39;) return this.msg.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;) } }, methods: { reverseStr() { console.log(&＃39;method&＃39;) return this.msg.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;) } } })script>
上面代码中&＃xff0c;计算属性在模板中使用了两次&＃xff0c;方法调用也使用了两次&＃xff0c;我们查看打印发现
方法中的打印语句执行了两次&＃xff0c;而计算属性中的打印语句却只执行了一次。这就验证了&＃xff0c;计算属性的简写形式虽然长得跟方法一模一样&＃xff0c;但它确实不是方法。
二、侦听器
侦听器也可以监听到data中的数据变化&＃xff0c;当data中某个变量的数据发生变化时&＃xff0c;对应的侦听器方法就会被执行&＃xff0c;侦听器的方法名必须跟被侦听的变量名一样。
推荐阅读
-
本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ...
[详细]
蜡笔小新 2023-12-14 18:45:00
-
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
-
-
本文介绍了在wepy中运用小顺序页面受权的计划，包含了用户点击作废后的从新受权计划。 ...
[详细]
蜡笔小新 2023-12-12 11:09:24
-
本文讨论了编写可保护的代码的重要性，包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法，如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道，如不规范的命名、重复代码、过长的函数和参数列表等。最后，介绍了如何处理数据泥团和进行函数重构，以提高代码质量和可维护性。 ...
[详细]
蜡笔小新 2023-12-11 18:32:44
-
本文介绍了使用VueCLI进行多页分目录打包的步骤，包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ...
[详细]
蜡笔小新 2023-12-11 16:14:11
-
本文主要介绍了单页面应用（SPA）和多页面应用（MPA）的区别和适用场景。单页面应用只有一个主页面，所有内容都包含在主页面中，页面切换快但需要做相关的调优；多页面应用有多个独立的页面，每个页面都要加载相关资源，页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ...
[详细]
蜡笔小新 2023-12-10 19:31:50
-
本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ...
[详细]
蜡笔小新 2023-12-10 15:14:25
-
本文详细介绍了Vue3中setup函数的参数props和context的配置方法，包括props的接收和配置声明，以及未通过props进行接收配置时的输出值。同时还介绍了父组件传递给子组件的值和模板的相关内容。阅读本文后，读者将对Vue3中setup函数的参数props和context的配置有更深入的理解。 ...
[详细]
蜡笔小新 2023-12-10 07:33:22
-
本文介绍了如何通过优化Webpack的代码分割来减小打包后的文件大小。主要包括拆分业务逻辑代码和引入第三方包的代码、配置Webpack插件、异步代码的处理、代码分割重命名、配置vendors和cacheGroups等方面的内容。通过合理配置和优化，可以有效减小打包后的文件大小，提高应用的加载速度。 ...
[详细]
蜡笔小新 2023-12-09 08:10:47
-
目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
-
本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置，但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置，并列出了出现的错误信息。 ...
[详细]
蜡笔小新 2023-12-14 14:44:00
-
本文介绍了C#中生成随机数的三种方法，并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法，但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数，进一步突显了这个问题。文章指出，随机数生成在任何编程语言中都是必备的功能，但Random类生成的随机数并不可靠。最后，提出了需要寻找其他可靠的随机数生成方法的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:15:30
-
本文介绍了在使用vue和webpack进行异步组件按需加载时可能出现的报错问题，并提供了解决方法。同时还解答了关于局部注册组件和v-if指令的相关问题。 ...
[详细]
蜡笔小新 2023-12-12 19:55:06
-
本文介绍了使用Python代码从批量eml文件中提取附件的实现方法，包括获取eml附件信息、递归文件夹下所有文件、创建目的文件夹等步骤。通过该方法可以方便地提取eml文件中的附件，并保存到指定的文件夹中。 ...
[详细]
蜡笔小新 2023-12-09 07:17:30
-
第七课主要内容：多进程多线程FIFO,LIFO,优先队列线程局部变量进程与线程的选择线程池异步IO概念及twisted案例股票数据抓取 ...
[详细]
蜡笔小新 2023-10-17 20:16:36
-
mobiledu2502903113
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号