vue computed 与 methods动态计算写法

最新推荐文章于 2025-07-06 22:47:46 发布

weixin_34378767

最新推荐文章于 2025-07-06 22:47:46 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5cd965a5e51d456e660d4597

本文详细解析了Vue框架中Computed属性的工作原理，阐述了当依赖数据变化时Computed属性如何自动更新，而其他无关数据变动时则保持缓存，以此达到性能优化的目的。通过对比methods中的函数调用，Computed属性能更高效地响应数据变化。

computed 所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存；当改变其他数据时，computed 属性并不会重新计算，从而提升性能。

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{name}}</span>
      <span>Name: {{getName()}}</span>
    </div>
  `,
  data: {
    firstName: 'Lucky',
    lastName: 'Mask'
  },
  computed: {
    name () {
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

复制代码