Vue简单介绍计算属性和侦听器的区别？

Vue计算属性的主要目的是计算一个新的值，而监听器的主要目的是观察一些数据的变化并做出相应的调整。下面web建站小编给大家简单介绍一下计算属性和侦听器的区别？

Vue计算属性：

1、基于它们的反应依赖关系进行缓存，并且仅当相关的反应依赖关系改变时才重新计算。
2、计算属性是一种属性，必须有返回值。
3、用法：Computed:{ somecouteproperty(){ } }

示列如下：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p> 
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Vue侦听器：

1、观察数据变化的更通用的方法。
2、它是一个方法，不需要返回值。
3、用法：watch: {someProperty() {}}

示列如下：

<div id="app">
  <p>{{ message }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

Vue中的计算属性和方法有什么区别？

标签： Vue侦听器, Vue计算属性

上面是“Vue简单介绍计算属性和侦听器的区别？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4971.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！