Vue生命周期中的组件化你知道吗

引出生命周期

Vue生命周期中的组件化你知道吗_第1张图片

此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change。

Vue生命周期中的组件化你知道吗_第2张图片

销毁流程

解绑(自定义)事件监听器

Vue生命周期中的组件化你知道吗_第3张图片

生命周期

Vue生命周期中的组件化你知道吗_第4张图片

生命周期总结

Vue生命周期中的组件化你知道吗_第5张图片

 

hello,{{name}}

组件化 

template:

整个root容器当作模板

Vue生命周期中的组件化你知道吗_第6张图片

Vue生命周期中的组件化你知道吗_第7张图片

Vue生命周期中的组件化你知道吗_第8张图片

会直接替换掉root,把template当作模板进行解析。 

Vue生命周期中的组件化你知道吗_第9张图片

Vue生命周期中的组件化你知道吗_第10张图片

Vue生命周期中的组件化你知道吗_第11张图片

Vue生命周期中的组件化你知道吗_第12张图片

Vue生命周期中的组件化你知道吗_第13张图片

 

Vue生命周期中的组件化你知道吗_第14张图片

 非单文件组件

data需要用函数式写法

Vue生命周期中的组件化你知道吗_第15张图片

Vue生命周期中的组件化你知道吗_第16张图片

Vue生命周期中的组件化你知道吗_第17张图片

{{msg}}


 组件的几个注意点 

Vue生命周期中的组件化你知道吗_第18张图片

 组件的嵌套 

Vue生命周期中的组件化你知道吗_第19张图片

Vue生命周期中的组件化你知道吗_第20张图片




    
    
    
    
    Document


    

 VueComponent

每次调用extend,都返回了一个VueComponent

Vue生命周期中的组件化你知道吗_第21张图片

Vue生命周期中的组件化你知道吗_第22张图片

Vue生命周期中的组件化你知道吗_第23张图片




    
    
    
    
    Document


    

 Vue实例与组件实例

Vue生命周期中的组件化你知道吗_第24张图片

Vue生命周期中的组件化你知道吗_第25张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!  

你可能感兴趣的:(Vue生命周期中的组件化你知道吗)