vue的神奇死循环

Question

<template>

<div id="testFirst">
    <h1>{{ msg }}</h1>
    <h1>{{ showDetail() }}</h1>
</div>

</template>

<script>

//import Vue from 'vue'

export default {

    name:'testFirst',
// }
// var vm=new Vue({
    //     el:"testFirst",
data () {
    return {
        msg: 'hello  i am  lishang',
        state:'is it 404 not found'
    }
},
methods:{
    showDetail:function () {
        return this.state=this.msg+this.state
    }
}

}

</script>

这是我错误部分的代码 错误显示为 You may have an infinite update loop in a component render function

当运行的时候 showDetail函数好像在无限次循环 ，当我改成
showDetail:function () {

        return this.state=this.msg+‘is  it 404 not found’  
        }
        就可以了

Answer 1

改成下面就可以了

return this.msg+this.state

原因的话<h1>{{ showDetail() }}</h1>和this.state形成了双向绑定，然后你在showDetailreturn的时候又对this.state进行了赋值操作，所以又会再次触发showDetail形成了死循环

Answer 2

这一点都不神奇，原因一楼解释了，但你第二个h1中的 为什么要放一个执行函数进去，正确的应该是

 <h1>{{ showDetail }}</h1>
<script>
    computed: {
        showDetail() {
            return this.msg+this.state;
        }
    }
</script>

Answer 3

不神奇，用计算属性就行了