|
来 先掰扯一下:嘛是生命周期函数? 嘛又叫生命周期钩子?
容我大白话翻译一下: 生命周期说白了,粗暴的理解方式就是 一个组件 从 开始创建, 到最后销毁的全过程。
先贴上VUE所有的 生命周期【胖爷写了一大一小两个组件做测试 home 内包含组件 head 】
Home.vue- <template>
- <div id="home">
- <button @click="chan"> 点击切换触发生命周期 </button>
- <!-- 头部组件引入 -->
- 这是home组件 <span class="lmtest">测试值是否变色</span>
-
- <v-head v-if="b" ></v-head>
- </div>
- </template>
- <script>
- // 1.引入头部组件 【组件文件尽量放在 components/ 目录中,大写首字母的.vue文件 】
- // 2.注册组件 【 注意如果下面components内容为ES6 语法 则html 则写成对应的标签 】
- // 3.引入组件 【在页面中写入<v-head></v-head> 】
- import Head from "./Head.vue";
- export default {
- data() {
- return {
- b:true
- };
- },
- methods: {
- chan(){
- if(this.b){
- this.b = false
- }else{
- this.b = true
- }
- }
- },
- name: "app",
- components: { //这用于组件的注册,
- 'v-head':Head
- }
- ,beforeCreate(){
- alert('创建vue实例前')
- console.log('创建vue实例前',this)
- }
- ,created() {
- alert('创建vue实例后')
- console.log(this)
- }
- ,beforeMount(){
- alert('home挂载到demo前')
- }
- ,mounted(){
- alert('home挂载到demo后')
- }
- ,beforeUpdate(){
- alert('数据变化更新前')
- }
- ,updated(){
- alert('数据变化更新后')
- }
- ,beforeDestroy(){
- alert('Vue实例销毁前')
- }
- ,destroyed(){
- alert('VUE实例销毁后')
- }
- };
- </script>
- <style scoped>
- .lmtest {
- background: #000;
- color: #fff;
- }
- h2 {
- font: 10px;
- }
- </style>
复制代码
Head.vue- <template>
- <div id="head">
- <h2> 这是头部组件 </h2>
- </div>
- </template>
- <script>
- export default {
- beforeCreate(){
- alert('head----创建vue实例前')
- console.log('创建vue实例前',this)
- }
- ,created() {
- alert('head----创建vue实例后')
- console.log(this)
- }
- ,beforeMount() {
- alert("head----挂载到demo前");
- },
- mounted() {
- alert("head----挂载到demo后");
- }
- ,beforeDestroy(){
- alert('head----Vue实例销毁前')
- }
- ,destroyed(){
- alert('head----VUE实例销毁后')
- }
- };
- </script>
- <style>
- </style>
复制代码
在 每个阶段打印 this 都会得到不同的值:- vue对象初始化过程中,会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容;
- beforeCreate :数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象;
- created :数据已经绑定到了对象实例,但是还没有挂载对象;
- beforeMount: 模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的 $el属性,
- $el属性是一个HTMLElement对象,也就是这个阶段,vue实例通过原生的createElement等方法来创建这个html片段,准备
- 注入到我们vue实例指明的el属性所对应的挂载点;
- mounted:将$el的内容挂载到了el,相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom,上面我们
- 就会发现dom的元素和我们$el的元素是一致的。在此之后,我们能够用方法来获取到el元素下的dom对象,并进
- 行各种操作. [这个最重要]
- 当我们的data发生改变时,会调用beforeUpdate和updated方法
- beforeUpdate :数据更新到dom之前,我们可以看到$el对象已经修改,但是我们页面上dom的数据还没有发生改变
- updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径,将改变更新到dom上面,完成更新
- 实例的销毁
- beforeDestroy,destroed :实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数
- 据与view的绑定,即数据驱动
复制代码
参考文献:https://www.cnblogs.com/caizhenbo/p/6418291.html
|
|