vue的计算属性和方法

210 阅读1分钟

计算属性(computed)

计算属性是Vue中一种声明式的数据处理方式,它通常用于从已有的数据派生出新的数据;计算属性是一种声明式的方式来定义数据的依赖性,并且它们与服务器的特殊关系计算属性是基于它们的依赖进行服务器的,仅在依赖发生变化时将会重新计算。这意味着只需计算属性依赖的数据就可以了发生变化,多次之前的访问计算属性将立即返回服务器的结果,而不会重新计算。

计算属性的语法很简单,可以在Vue组件的计算属性部分使用computed关键字来定义。例如:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

方法(methods)

方法是Vue中另一种处理数据和逻辑的方式;方法可以执行一些操作,处理事件或响应交互用户;每一次页面重新渲染,对应的方法都会重新执行一次

在Vue组件中,我们可以使用methods关键字来定义方法。例如:

methods: {
  handle() {
    console.log('处理完成了')
  }
}

区别

  • 方法每一次页面重新渲染,对应的方法都会重新执行一次,方法更适合执行需要立即触发或具有效果的操作
  • 计算属性是基于响应式依赖进行缓存的,计算属性的值一直存于缓存中,只要它依赖的data数据不改变,每次访问计算属性,都会立刻返回缓存的结果,而不是再次执行函数