Vue中computed与method的区别
computed调用是属性调用,不需要加括号,
methods是函数调用
<div id="app"> <input type="text"v-model.number="a"> <input type="text"v-model.number="b"> <p v-cloak>结果:{{handle()}}</p> <p v-cloak>结果:{{handleCom}}</p> </div>
<script src="vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ a:"", b:"", sum:"", }, methods:{ handle(){ return this.a+this.b; } }, computed:{ handleCom(){ return this.a+this.b; } } }) </script>
如果handle()不加括号,
<p v-cloak>结果:{{handle()}}</p>
会在浏览器中打印
function () { [native code] }
如果handleCom加括号,则会报错
TypeError: handleCom is not a function"
区别二:
computed是 当下次所依赖的函数没有发生改变时,再次调用时,会从缓存中读取数据
methods是
<script> var vm = new Vue({ el:"#app", data:{ a:"", b:"", sum:"", }, methods:{ handle(){ console.log("handle()被调用了") return this.a+this.b; } }, computed:{ handleCom(){ console.log("handleCom被调用了") return this.a+this.b; } } }) </script>
handle()只要光标移入console.log()就会被执行
handleCom()输入框中值发生改变,才会执行
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库