说明
vue中组件是用来 复用 的，为了防止
data复用，将其定义为函数。vue组件中的data数据都应该是 相互隔离，互不影响的。组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。
将组件中的
data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。将组件的
date写成{}对象形式，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成 一个变了全都会变 的结果。
摘自：
https://blog.csdn.net/qq_42072086/article/details/108060494
例子
<div id="app">
3. 使用组件，类似自定义一个标签
<com-student></com-student>
<com-student></com-student>
<com-student></com-student>
</div>
<script>
// 1. 使用 {} 对象的方式创建
let student = {
template : `<div>
<div class="s1">姓名：{{name}}</div>
<div>年龄：<input type="text" v-model="age"></div>
<div>身高：{{height}}</div>
<input type="button" @click="addAge" value="年龄加1">
</div>`,
// 组件中，data 必须是一个函数，该函数有一个返回值，类型是 {} 对象，每次创建一个新对象，互相之间不干扰
data: function(){
return {
name:"李雷",
age:20,
height:1.82
}
},
methods:{
addAge(){
this.age = this.age + 1
}
}
}
// vue实例
var app = new Vue({
el: '#app', //el是element缩写
components:{ // 注册局部组件，只能在当前 vue实例中使用
// key是组件名，供使用的
// value是组件对象
"com-student":student
}
})
</script>
如下图，点击 按钮，年龄互相之间不干扰：
