API
具体详情进：Vue API
常用的如：
`// console.log(vm.$root);`
`vm.$root``//实例对象`
`vm.$el``//根元素（真实的DOM元素）`
`// console.log(vm.$el);`
`vm.$el.innerHTML``//得到根元素（真实的DOM元素）中的内容`
`// console.log(vm.$el.innerHTML);`
`vm.$data``//实例下的data对象`
`// console.log(vm.$data);`
`vm.$options``//实例下的挂载项`
`// console.log(vm.$options);`
`vm.$props``//组件之间通信的数据`
`// console.log(vm.$props);`
`vm.$parent``//在组件中，指父元素`
`// console.log(vm.$parent);`
`vm.$children``//在组件中，指子代元素`
`// console.log(vm.$children);`
`vm.$attrs``//用来获取父组件传递过来的所有属性`
`// console.log(vm.$attrs);`
`vm.$listeners``//用来获取父组件传递过来的所有方法`
`// console.log(vm.$listeners);`
`vm.$slots``//组件中的插槽`
`// console.log(vm.$slots);`
`vm.$scopedSlots``//用来访问作用域插槽`
`// console.log(vm.$scopedSlots);`
`vm.$refs``//用来定位DOM元素（使用ref进行追踪）`
`// console.log(vm.$refs);`
`vm.$watch``//用于监听数据（在vue文件中使用后会自动销毁）`
`// console.log(vm.$watch);`
`vm.$emit``//用于派发事件（常用于数据通信）`
`// console.log(vm.$emit);`
`vm.$on``//用于监听事件的派发`
`// console.log(vm.$on);`
`vm.$once``//只监听事件一次（之后不监听）`
`// console.log(vm.$once);`
生命周期
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例被创建之初 |
| created | 组件实例已经完全创建 |
| beforeMount | 组件挂载之前 |
| mounted | 组件挂载到实例上去之后 |
| beforeUpdate | 组件数据发生变化，更新之前 |
| updated | 组件数据更新之后 |
| beforeDestroy | 组件实例销毁之前 |
| destroyed | 组件实例销毁之后 |
| activated | keep-alive 缓存的组件激活时 |
| deactivated | keep-alive 缓存的组件停用时调用 |
| errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
Vue生命周期流程图
钩子函数
总共有11个
-
beforeCreate created[可以获取数据及方法]
-
beforeMount mounted[可以获取到真实的DOM]
-
beforeUpdate updated[数据更新执行]
-
beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]
-
当keep-alive 缓存组件才会有的生命周期的钩子函数
- activated deactivated
-
errorCaptured 当子孙组件出错时，会调用这个钩子函数
ps：文末附上汇总文章链接《一名【合格】前端工程师的自检清单【自检ing】》
