鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue的神奇死循環(huán)

vue的神奇死循環(huán)

<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>

這是我錯(cuò)誤部分的代碼 錯(cuò)誤顯示為 You may have an infinite update loop in a component render function

當(dāng)運(yùn)行的時(shí)候 showDetail函數(shù)好像在無限次循環(huán) ，當(dāng)我改成
showDetail:function () {

        return this.state=this.msg+‘is  it 404 not found’  
        }
        就可以了
回答
編輯回答
笑忘初

不神奇，用計(jì)算屬性就行了

2018年6月19日 14:55
編輯回答
薔薇花

改成下面就可以了

return this.msg+this.state

原因的話<h1>{{ showDetail() }}</h1>和this.state形成了雙向綁定，然后你在showDetailreturn的時(shí)候又對this.state進(jìn)行了賦值操作，所以又會再次觸發(fā)showDetail形成了死循環(huán)

2017年7月5日 10:41
編輯回答
念舊

這一點(diǎn)都不神奇，原因一樓解釋了，但你第二個(gè)h1中的 為什么要放一個(gè)執(zhí)行函數(shù)進(jìn)去，正確的應(yīng)該是

 <h1>{{ showDetail }}</h1>
<script>
    computed: {
        showDetail() {
            return this.msg+this.state;
        }
    }
</script>
2017年12月16日 08:36