开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情
1. props
进阶图用到 props 主要是用来接收父组件传递而来的主面板数据，例如 hasScale 用于在父组件调用面板组件时，传递一个 Boolean 值告诉面板组件是否支持缩放。而 progressData 则是用来接收渲染面板的数据，要注意的是，父组件中的传递名称应该和子组件中的 props 中定义的名称一致。如下是关于 props 在进阶图中的应用
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。支持配置属性 type：数据类型，default 设置默认值，required 是否必须，validator 自定义验证函数。
props: {
// 是否支持缩放
hasScale: {
type: Boolean,
default: false
},
// 类型：只读（detail）或 编辑（默认）
type: {
type: String,
default: ''
},
// 主面板数据
progressData: {
type: Array,
default: function () {
return []
}
}
}
2. $emit
$emit 用于向上派发事件并传递参数，通常配合 props 使用，以达到父子组件通信的目的。进阶图中是于父组件派发change事件，传递参数 111。注意父组件在接收事件时应保持名称一致。
change (newVal, oldVal) {
// 派发事件
this.$emit('change', 111)
}
<-- 接收 change 事件 -->
<test @change="change"></test>
3. ref
ref 在 Vue 中用于绑定组件，可以通过 this.refs[绑定名称]或this.refs[绑定名称] 或 this.refs[绑定名称]或this.refs.绑定名称 来获取组件实例对象，这有时非常有用。例如，当我们想要在一个组件中调用其子组件的某个方法或属性时，可通过这种方式调用。
<test ref="test"></test>
4. watch
watch 是 vue 中被常用的 api 之一，用于监听数据，可以监听 data 中的数据，也可以监听 props 中的数据。
watch 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。
watch: {
'testList': {
deep: true,
handler (newVal, oldVal) {
this.$emit('change', 111)
}
},
},
5. computed
computed 是计算属性，对于任何复杂逻辑，你都应当使用计算属性，这就是它的应用场景，虽然通过 methods 或 watch 也能完成，但是 computed 在处理复杂逻辑时更有优势：计算属性是基于它们的响应式依赖进行缓存的。
6. created
created 声明周期钩子函数之一，如果你想尽早获取接口数据，那么在这里做很合适。
在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理， 意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
7. mounted
mounted 是一个 vue 生命周期钩子函数，此时 dom 这时 el 被新创建的 vm.$el 替换了，我们可以在 mounted 中进行 dom 操作， 这也是最早可以较好进行 dom 操作的钩子函数。
注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，
