在vue.js 2中计算和挂载的主要区别是什么?

时间:2018-01-30 11:35:10

标签: vue.js vuejs2

当我添加 mounted() 而非 export default { components: { MainLayout }, mounted(){ var x = document.getElementById('homeTabPanes'); // x.style.background = "blue"; console.log("check the value of x", x); } } 时会抛出错误

CString

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

来自docs

  

..计算属性根据其依赖项进行缓存。计算属性仅在其某些依赖项发生更改时才会重新计算。

如果要缓存数据,另一方面使用Computed属性mounted是一个生命周期挂钩,一旦Vue实例 <,就会调用该方法在DOM上安装

答案 2 :(得分:0)

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

基本示例

NaN

看下面的js:

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

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

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('')
    }
  }
}) 

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