vue 生命周期/数据/DOM/资源/组合/其他

生命周期图

        

 自己测试一下

        

        

看一下输出值

        

　　beforeCreate在实例初始化之后执行，此时的data数据还未装配，$el 还为undefined

　　created实例创建完毕后被调用，此时data和属性方法已经有了，但是没有挂载到页面上，$el 还为undefined

　　beforeMount在挂载之前被调用，$el 还为undefined

　　mounted挂载完毕，el被新创建的vm.$el替换，页面上渲染元素成功

　　beforeUpdate数据更新时调用，虚拟dom打补丁之前，数据是更新后的数据

　　updated数据更改导致虚拟dom重新渲染和打补丁，在这之后调用该方法

　　beforeDestroy实例销毁之前调用，data数据和上面的方法依旧存在，$el 还能获得到dom元素

　　destroyed实例销毁后，data数据和上面的方法依旧存在，$el 已经被删除了

数据

　　data Vue实例数据对象。Vue将会递归将data的属性转为getter/setter，从而让data的属性能够响应数据变化

　　props 可是数组或对象，用于接收父组件的数据

　　propsData 创建实例时传递的props，只能用于new创建的实例

　　computed 计算属性

　　methods 方法集合

　　watch 数据对象的观察

DOM

　　el Vue实例的挂载目标

　　template 字符串模板

　　render 字符串模板代替方案

　　renderError 当render出错时的方案

资源

　　directives Vue实例可用指令的集合

　　filters 过滤器的集合

　　components 子组件集合

组合

　　parent 父组件实例

　　mixins 混入实例的数组集合

　　extends  扩展文件组件

　　provide/inject 高阶插件/组件库提供用例

其他

　　name 作为组件时组件的名字

　　delimiters 默认值为{{ }} 可改变在html页面数据包含标示

　　functional 使组件无状态和无实例

　　model允许一个自定义组件在使用v-model时定制prop和event

　　inheritAttrs 默认行为将被干掉

　　comments 注释将被干掉

总结

　　beforecreate这可以加个loading事件

　　created在这做一些初始化结束loading

　　mounted调用接口那到数据配合其他钩子函数

　　beforeDestory清除计时器之类

　　data为页面响应式数据集合

　　props 用于父组件给子组件传递数据

　　computed用于计算属性

　　watch用于监听数据变化

　　模板的话平时常用template，也可以用类react的render

　　filters 是过滤器的集合

　　components 是实例子组件的集合

　　parent 是父组件

　　mixins 用于给实例混入一些属性

 

转载于:https://www.cnblogs.com/lichunjing/p/8808357.html