【问题标题】：What is the main difference between computed and mounted in vue.js 2?vue.js 2中计算和安装的主要区别是什么？
【发布时间】：2018-01-30 11:35:09
【问题描述】：

当我添加时 computed() 而不是 mounted() 它会引发错误

export default {
  components: {
    MainLayout
  },
  mounted(){
    var x = document.getElementById('homeTabPanes');
    // x.style.background = "blue";
    console.log("check the value of x", x);
  }
}

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

computed 是一个包含返回数据的方法的对象，mounted 是在实例挂载后执行的生命钩子，查看文档的链接，它有很好的解释

【讨论】：

【解决方案2】：

来自docs

..computed 属性根据它们的依赖关系进行缓存。计算属性仅在其某些依赖项发生更改时才会重新评估。

如果你想缓存数据，则使用计算属性 mounted 是一个 生命周期 钩子，一个在 Vue 实例出现时立即调用的方法安装在 DOM 上。

【讨论】：

【解决方案3】：

模板内表达式非常方便，但它们用于简单的操作。在模板中放置过多的逻辑会使它们变得臃肿且难以维护。这就是为什么对于任何复杂的逻辑，都应该使用计算属性。

基本示例

<div id="reverseMessageContainer">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

看下面的js：

var vm = new Vue({
  el: '#reverseMessageContainer',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作属性 vm.reversedMessage: 的 getter 函数 您可以打开控制台并自己使用示例 vm。 vm.reversedMessage 的值始终依赖于 vm.message 的值。

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

为了更好地了解您可以访问 https://vuejs.org/v2/guide/computed.html

【讨论】：