1.首先，我们将下面这个计数器抽取成一个组件。 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <cpn></cpn> <hr> <cpn></cpn> <hr> <cpn></cpn> <hr> </div> <template id="cpn"> <div id="app"> 当前数值：{{counter}} <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script src="./js/vue.js"></script> <script> Vue.component('cpn',{ template:'#cpn', data(){ return { counter:0 } }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } }) const vm = new Vue({ el:'#app' }) </script> </body> </html>浏览器页面： 这是我们所希望的效果，组件之间相互独立，互不影响。点击计数器一并不会导致计数器二、三跟着变化。 2.接下来演示跨组件变量污染的情况（将返回的对象定义在外部，data内不会每次返回一个新的对象了） 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <cpn></cpn> <hr> <cpn></cpn> <hr> <cpn></cpn> <hr> </div> <template id="cpn"> <div id="app"> 当前数值：{{counter}} <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script src="./js/vue.js"></script> <script> const obj = { counter:0 } Vue.component('cpn',{ template:'#cpn', data(){ return obj }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } }) const vm = new Vue({ el:'#app' }) </script> </body> </html>浏览器界面： 点击计数器一会导致计数器二、三跟着变化，这是我们在开发中不希望看到的。
