Vue报错：Uncaught RangeError: Maximum call stack size exceeded

在用到Vue写组件相关代码时，报错：Maximum call stack size exceeded，大致意思是最大调用堆栈大小溢出。

于是我各种博客搜罗解决办法，发现出现这个的原因有几种，根本原因还是与内存挂钩，就是使用不合理的标识符名或者递归调用不合理等。

下面列举我的低级错误：

<div id="app">
    <cpn1></cpn1>
</div>
Vue.component('cpn1',{
        template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容呵呵呵</p>
                <cpn1></cpn1>
            </div>`
    })

我的错误就是在创建组件里，反复调用组件cpn1，导致内存溢出。害。直接复制代码还是要谨慎呐。。。
删掉创建组件里的<cpn1></cpn1>就OK了。
以下是正确代码：

<div id="app">
    <cpn1></cpn1>
</div>
Vue.component('cpn1',{
        template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容呵呵呵</p>
            </div>`
    })