Javascript 组件渲染函数中的无限更新循环

我试图了解vue组件是如何工作的。最后一个目标是在单击“我的开始”时向只读文本区域添加一行！按钮目前，我的代码如下：

// Register components
Vue.component('chatarea', {
  delimiters: ['${', '}'],
  props: ['msg'],
  template: '<textarea readonly="" rows="20">${msg}</textarea>',
})


// Create a root instance
var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
      messages: [
        'Hello from Vue!',
        'Other line...'
      ],
  },
  methods: {
    get_msg: function () {
      return this.messages.reverse().join('\n');
    }
  }
})

然而，我得到以下警告：

[Vue warn]：组件渲染函数中可能存在无限更新循环

我知道我做错了什么。。。下面是

您的模板调用get\u msg，它重新计算反向消息数组，从而导致模板重新呈现并调用get\u msg，等等

相反，请使用计算出的

computed:{
  reversedMessages(){
      return this.messages.slice().reverse().join('\n');
  }
},

并将模板更改为

<chatarea :msg="reversedMessages"></chatarea>

.

这是不正确的，因为会反转在位数组，从而修改组件状态，而计算属性不应这样做。在反转阵列之前，应首先克隆阵列：返回this.messages.slice.reverse.join'\n'。

<chatarea :msg="reversedMessages"></chatarea>