vue中计算属性，方法，侦听器
Posted xuyxbiubiu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中计算属性，方法，侦听器相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性，方法，侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <!--{{fullName()}}--> {{fullName}} {{age}} </div> <script> var vm = new Vue({ el: "#app", data: { FirstName: ‘alex‘, lastName: ‘Xu‘, fullName: "alex Xu", age: 25 }, //侦听器 有缓存机制 watch: { FirstName: function () { console.log(‘计算一次‘); this.fullName = this.FirstName + ‘ ‘ + this.lastName; }, lastName: function () { console.log(‘计算一次‘); this.fullName = this.FirstName + ‘ ‘ + this.lastName; } }, //方法 内部没有缓存机制 methods: { fullName: function () { console.log("计算一次"); return this.FirstName + " " + this.lastName } }, // 计算属性 用于缓存的 优先选择 computed: { fullName: function () { console.log(‘计算一次‘); //如果仅修改年龄 fullName 是不需要重新渲染的 return this.FirstName + " " + this.lastName } } }) </script> </body> </html> <!-- 如果一个效果 计算属性 方法 和侦听器都可以实现 优先选择计算属性 -->
以上是关于vue中计算属性，方法，侦听器的主要内容，如果未能解决你的问题，请参考以下文章
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段