vue computed 与 methods动态计算写法

最新推荐文章于 2024-08-19 10:12:25 发布

weixin_34378767

最新推荐文章于 2024-08-19 10:12:25 发布

阅读量2.1k

点赞数

文章标签： javascript 前端 ViewUI

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

版权

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}`
    }
  }
})

复制代码