精华内容
参与话题
问答
  • 使用vue框架,需要在合适的时机做合适的事情,了解了vue对象的生命周期和钩子函数,才能知道,哪些事情应该咋哪个函数里做。 一、vue的生命周期的理解 生命周期 用人举例说明: 生命周期就是一个人的一生,此处...

    官方图(官方的图大家总是理解不了):

            使用vue框架,需要在合适的时机做合适的事情,了解了vue对象的生命周期和钩子函数,才能知道,哪些事情应该咋哪个函数里做。

    一、vue的生命周期的理解

    1. 生命周期

    用人举例说明:

    生命周期就是一个人的一生,此处我需要说的没有人情一点(哈哈)。

    从人的出生,到成长,到工作,到死亡,就是人的一生,也叫一个人的生命周期。

         2. 对象的生命周期

    在程序开发中,是要使用对象的。那么,对象的生命周期就是:从对象的创建,到使用对象,到对象的消亡就是对象的生命周期。

    用人和对象进行类比(此处没有人性):

    程序中的对象

    人出生

    New对象

    人工作(ps:要人的目的就是为了工作,如果一个人不工作,不为国家做贡献,那就不是合格的人,活着没有意义)

    使用对象的方法和属性(ps:new的对象的目的就是为了用它,用对象主要就是使用对象的方法和属性)

    人死亡(ps:人没有用了,那就“去死吧”)

    对象使用完就该消亡了(过河拆桥,不用了,那就不要了。)

     

    3. Vue的生命周期

    Vue实例,vue组件实例就是vue对象,也是对象。所以,vue的生命周期和对象的生命周期是同样的道理

     

    二、vue生命周期经历的阶段

     

    生命周期是有不同的阶段的,就像人一样,有幼儿期,童年期,少年期,青年期,中年期,老年期。每个阶段应该做不同的事情,但是每个人做的事情又不尽相同。

    Vue对象的生命周期也分不同的阶段,不同的阶段也可以做不同的事情,但是不同的vue(组件)对象在不同的阶段做的事情也不尽相同,所以,每个vue组件的代码不相同。

    Vue生命周期经历哪些阶段:

    1. 总体来说:初始化、运行中、销毁
    2. 详细来说:开始创建、初始化数据、编译模板、挂载Dom、渲染更新渲染、销毁等一系列过程

     

    三、生命周期经历的阶段和钩子函数

     

    1. 实例化vue(组件)对象:new Vue()
    2. 初始化事件和生命周期 init events init cycle
    3. beforeCreate函数:

    在实例初始化之后,数据观测 (data observer) event/watcher 事件配置之前被调用。

    即此时vue(组件)对象被创建了,但是vue对象的属性还没有绑定,如data属性,computed属性还没有绑定,即没有值。

    此时还没有数据和真实DOM

    即:属性还没有赋值,也没有动态创建template属性对应的HTML元素(二阶段的createUI函数还没有执行)

         4. 挂载数据(属性赋值)

    包括 属性和computed的运算,

          5. Created函数:

    vue对象的属性有值了,但是DOM还没有生成,$el属性还不存在。

    此时有数据了,但是还没有真实的DOM

           即:datacomputed都执行了。属性已经赋值,但没有动态创建template属性对应的HTML元素,所以,此时如果更改数据不会触发updated函数

           如果:数据的初始值就来自于后端,可以发送ajax,或者fetch请求获取数据,但是,此时不会触发updated函数

        6. 检查

           1)检查是否有el属性
    检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定调用vm.$mount()

    完成了全局变量$el的绑定。

            2)检查是否有template属性

    检查配置中的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个#app DOM对象,包括<div id=”app” ></div>标签)都作为被填充对象替换掉填充区域

    即:如果vue对象中有 template属性,那么,template后面的HTML会替换$el对应的内容。如果有render属性,那么render就会替换template

    即:优先关系时: render  >  template > el

    beforeMount函数:

    模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数

    此时 this.$el有值,但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换

    8.模板编译:用vue对象的数据(属性)替换模板中的内容

    9. Mounted函数:

    模板编译完成,数据挂载完毕

    即:此时已经把数据挂载到了页面上,所以,页面上能够看到正确的数据了。

    一般来说,我们在此处发送异步请求(ajaxfetchaxios等),获取服务器上的数据,显示在DOM里。

    10. beforeUpdate函数:

    组件更新之前执行的函数,只有数据更新后,才能调用(触发)beforeUpdate,注意:此数据一定是在模板上出现的数据,否则,不会,也没有必要触发组件更新(因为数据不出现在模板里,就没有必要再次渲染)

    数据更新了,但是,vue(组件)对象对应的dom中的内部(innerHTML)没有变,所以叫作组件更新前

    11. updated函数:

    组件更新之后执行的函数

    vue(组件)对象对应的dom中的内部(innerHTML)改变了,所以,叫作组件更新之后

    12.  activated函数:keep-alive组件激活时调用

    13.  deactivated函数:keep-alive组件停用时调用

    14.  beforeDestroyvue(组件)对象销毁之前

    15.  destroyedvue组件销毁后

    四、测试代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue生命周期学习</title>
      </head>
    <body>
      <div id="app">
        <h1>{{message}}</h1>
        <h1>count:{{count}}</h1>
      </div>
      <input id="btn01" type="button" value="测试" />
    </body>
    <script type="text/javascript" src="js/vue.min.js" ></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: 'Vue的生命周期',
          age:2
        },
        computed:{
        	count:function(){
        		return this.age+1;
        	}
        },
    //  template:"<p>vue对象中的template的内容</p>",
    //  render: function(createElement) {
    //      return createElement('h1', 'this is createElement')
    //  },
        beforeCreate: function() {
          console.group('------beforeCreate创建前状态------');
          console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
          console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
         console.log("%c%s", "color:red","count   : " + this.count); //undefined 
          console.log("%c%s", "color:red","message: " + this.message) 
        },
        created: function() {
          console.group('------created创建完毕状态------');
          console.log("%c%s", "color:red","el     : " + this.$el); //undefined
          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
          console.log("%c%s", "color:red","count   : " + this.count); //undefined 
          console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        //完成了el的绑定
        beforeMount: function() {
           console.group('------beforeMount挂载前状态------');
           console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
           console.log(this.$el.innerHTML);    
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function() {
          console.group('------mounted 挂载结束状态------');
          console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
          console.log(this.$el);    
          console.log(this.$el.innerHTML);    
          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
          console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
          console.group('beforeUpdate 更新前状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el.innerHTML);
          console.log("%c%s", "color:red","data   : " + this.$data.message); 
          console.log("%c%s", "color:red","message: " + this.message); 
        }
        ,
        updated: function () {
          console.group('updated 更新完成状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el.innerHTML);   
          console.log("%c%s", "color:red","data   : " + this.$data); 
          console.log("%c%s", "color:red","message: " + this.message); 
        },
    //  beforeDestroy: function () {
    //    console.group('beforeDestroy 销毁前状态===============》');
    //    console.log("%c%s", "color:red","el     : " + this.$el);
    //    console.log(this.$el);    
    //    console.log("%c%s", "color:red","data   : " + this.$data); 
    //    console.log("%c%s", "color:red","message: " + this.message); 
    //  },
    //  destroyed: function () {
    //    console.group('destroyed 销毁完成状态===============》');
    //    console.log("%c%s", "color:red","el     : " + this.$el);
    //    console.log(this.$el);  
    //    console.log("%c%s", "color:red","data   : " + this.$data); 
    //    console.log("%c%s", "color:red","message: " + this.message)
    //  }
      });
      
      document.getElementById("btn01").onclick = function(){
      		vm.message="改了";
      }
    

    五、模拟vue的构造函数(部分代码)

    myVue.js

    class MyVue{
    	constructor(obj){
    		//默认值
    		let defaultObj={
    		  data: null,
    		  computed:null,
    		  watch:null,
    		  beforeCreate:function(){
    			
    		  },
    		  created:function(){
    			
    		  },
    		  beforeMount:function(){
    			
    		  },
    		  mounted:function(){
    			
    		  }
    		}
    		for(let key in defaultObj){
    			obj[key]?this[key]=obj[key]:this[key]=defaultObj[key];
    		}
    		
    		//对象创建完毕已经有this了。
    		this.beforeCreate();	
    		//挂载数据:
    		//1)、把传入的data属性的值赋给this
    		if(obj.data){
    			for(let key in this.data){
    				this[key] = obj.data[key];
    			}	
    			this.$data = obj.data;//设置全局变量
    		}
    		//2)、计算属性		
    		if(obj.computed){
    			for(let key in obj.computed){
    				this[key] = obj.computed[key].call(this);
    			}
    		}		
    		//created函数
    		this.created();
    		//检查是否有el属性
    		if(obj.el){
    			this.el = $(obj.el);
    			this.$el = $(obj.el);//设置全局变量
    		}
    		//检查是否有template属性
    		if(this.template){
    			//this.template = obj.template;
    //			动态创建template 里所有的html元素
    		}
    		//beforeMonute
    		this.beforeMount();
    		//用vue对象的数据(属性)替换模板中的内容
    		//1)、替换data中的数据
    		let html = this.el.innerHTML;				
    		for(let key in this.data){
    			//用属性值替换,属性名(页面上用双花括号包起来的)
    			html=html.replace(new RegExp("{{"+key+"}}","g"),this[key]);
    		}	
    		//2)、替换computed中的数据				
    		for(let key in this.computed){
    			//用属性值替换,属性名(页面上用双花括号包起来的)
    			html=html.replace(new RegExp("{{"+key+"}}","g"),this[key]);
    		}	
    		this.el.innerHTML = html;
    		
    		//mounted函数:
    		this.mounted();
    	}
    	
    	addWatch(){
    		
    	}
    	
    	//数据双向绑定
    	
    	//
    }
    
    function $(str){//#box .cls  p
    	if(str.charAt(0)=="#"){
    		return document.getElementById(str.substring(1));
    	}else if(str.charAt(0)=="."){
    		return document.getElementsByClassName(str.substring(1));
    	}else{
    		return document.getElementsByTagName(str);
    	}
    }
    

    html代码:

    <body>

      <div id="app">

        <h1>{{message}}</h1>

        <h1>count:{{count}}</h1>

      </div>

    </body>

    <script type="text/javascript" src="js/myvue.js" ></script>

    <script>

      var vm = new MyVue({

        el: '#app',

        data: {

          message: 'Vue的生命周期',

          age:1

        },

        computed:{

            count:function(){

               return this.age+1;

            }

        },

        beforeCreate: function() {

          console.group('------beforeCreate创建前状态------');

          console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined

          console.log("%c%s", "color:red","data   : " + this.$data); //undefined

          console.log("%c%s", "color:red","message: " + this.message)

        },

        created: function() {

          console.group('------created创建完毕状态------');

          console.log("%c%s", "color:red","el     : " + this.$el); //undefined

          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化

          console.log("%c%s", "color:red","message: " + this.message); //已被初始化

        },

        //完成了el的绑定

        beforeMount: function() {

           console.group('------beforeMount挂载前状态------');

           console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化

           console.log(this.$el);

           console.log(this.$el.innerHTML);   

           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 

           console.log("%c%s", "color:red","message: " + this.message); //已被初始化 

        },

        mounted: function() {

          console.group('------mounted 挂载结束状态------');

          console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化

          console.log(this.$el);   

          console.log(this.$el.innerHTML);   

          console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化

          console.log("%c%s", "color:red","message: " + this.message); //已被初始化

        }   

      })

    展开全文
  • vue钩子函数

    2018-05-09 14:52:51
    1在最近的一个项目中,需要对input的readonly进行操作,翻遍了vue文档不知道如何下手,最后把目标锁定在指令上 一,指令的写法 directives: {  ronly: { componentUpdated: function (el,binding) { ...

    1在最近的一个项目中,需要对input的readonly进行操作,翻遍了vue文档不知道如何下手,最后把目标锁定在指令上

            一,指令的写法

                        directives: {
                      ronly: {
                       componentUpdated: function (el,binding) {
                         if(binding.arg=='编辑'){
                              el.setAttribute('readonly','readonly')
                         }else{
                              el.removeAttribute('readonly')
                            }
                       }
                     }

                    }

            二,钩子函数   

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用。


            三,钩子函数参数

                    

    • el:指令所绑定的元素,可以用来直接操作 DOM 。
    • binding:一个对象,包含以下属性:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
      • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
      • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
      • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
    • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

    效果:

            

            这个时候是禁用的

            

            这个时候就可用编辑文本框了

    展开全文
  • vue生命周期钩子函数详解

    万次阅读 多人点赞 2018-07-26 11:12:03
    钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件 created vue实例的数据对象data有了,$el还没有 结束...

    先放一张官网生命周期图:
    vue生命周期图
    vue有8种生命周期函数:

    钩子函数 触发的行为 在此阶段可以做的事情
    beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件
    created vue实例的数据对象data有了,$el还没有 结束loading、请求数据为mounted渲染做准备
    beforeMount vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。 ..
    mounted vue实例挂载完成,data.filter成功渲染 配合路由钩子使用
    beforeUpdate data更新时触发
    updated data更新时触发 数据更新时,做一些处理(此处也可以用watch进行观测)
    beforeDestroy 组件销毁时触发
    destroyed 组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 组件销毁时进行提示

    测试代码:
    组件模板自己试着写就好,此处贴js代码
    (省略部分代码)

    export default {
      data () {
        return {
          todos: [],
          allCounts: 0,
          filter: 'all',
          id: 0,
          states: ['all', 'active', 'completed']
        }
      },
      beforeCreate () {
        console.log('==============' + 'beforeCreated' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      created () {
        console.log('==============' + 'created' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      beforeMount () {
        console.log('==============' + 'beforeMount' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      mounted () {
        console.log('==============' + 'mounted' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      beforeUpdate () {
        console.log('==============' + 'beforeUpdate' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      updated () {
        console.log('==============' + 'updated' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      beforeDestroy () {
        console.log('==============' + 'beforeDestroy' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      },
      destroyed () {
        console.log('==============' + 'destroyed' + '===================')
        console.log(this.$el)
        console.log(this.$data)
        console.log(this.filter)
      }
     }

    效果:
    刷新vue项目时
    改变data中的filter时

    至于destroyed就不好演示了。
    destroyed钩子函数有一点一定要特别注意:在执行destroy方法后,对data的改变不会再触发周期函数,此时的vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。所以对于实时显示的通知型组件,在他destroyed之前,我们必须手动removeChild()删除该节点;否则,DOM节点还是存在,影响浏览器性能。

    还有一点需要补充:
    组件套用时生命周期:
    父组件:tabs
    子组件:tab、tab-container
    我的应用场景是:

    <tabs>
      <tab />
      <tab />
      <tab />
      <tab-container />
    </tabs>
    /*tabs的打印代码*/
      beforeMount () {
        console.log('============Tabs befortemounted==============')
      },
      mounted () {
        console.log('============Tabs mounted==============')
      },
      created () {
        console.log('============Tabs created==============')
      }
    
    /*tab的打印代码*/
      beforeMount () {
        console.log('----------------tab beforemounted-------------')
      },
      mounted () {
        this.$parent.panes.push(this)
        console.log('----------------tab mounted-------------')
      },
      created () {
        console.log('----------------tab created-------------')
      }
    
    /*tab-container的打印代码*/
      beforeMount () {
        console.log('!!!!!!!!!!!!!!!!tab container beforemounted!!!!!!!!!!!!!!!!!')
      },
      mounted () {
        console.log('!!!!!!!!!!!!!tab container mounted!!!!!!!!!!!!!!!!!')
      },
      created () {
        console.log('!!!!!!!!!!!!!!!!!!!!!tab container created!!!!!!!!!!!!!!!!!!!!!!!')
      }

    浏览器结果:
    组件钩子函数打印
    结论:先执行父组件的created和beforeMounted函数;再按子组件的使用顺序,执行子组件的created和beforeMounted函数;依旧按照子组件的执行顺序执行mounted函数,最后是父组件的mounted函数;
    也就是说父组件准备要挂载还没挂载的时候,子组件先完成挂载,最后父组件再挂载;所以在真正整个大组件挂载完成之前,内部的子组件和父组件之间的数据时可以流通的(好难表达。。。。)

    展开全文
  • Vue生命周期钩子函数简述

    千次阅读 多人点赞 2020-04-17 19:55:45
    生命周期的钩子函数 在生命周期不同的阶段中会自动执行的函数,就叫做生命周期的钩子函数 生命周期的三个大阶段及其钩子函数 初始化挂载阶段 beforeCreate created beforeMount mounted 更新阶段 beforeUpdate ...

    生命周期

    vue 实例或组件(组件本质上就是一个具有预定义选项的实例)创建到销毁的一系列过程,就叫做生命周期。

    生命周期的钩子函数

    在生命周期不同的阶段中会自动执行的函数,就叫做生命周期的钩子函数

    生命周期的三个大阶段及其钩子函数

    1. 初始化挂载阶段
      1. beforeCreate
      2. created
      3. beforeMount
      4. mounted
    2. 更新阶段
      1. beforeUpdate
      2. updated
    3. 销毁阶段
      1. beforeDestroy
      2. destroyed

    beforeCreate

    实例创建之前

    1. 一个生命周期过程中,只会触发一次
    2. 获取不到挂载点元素和data数据
    3. 一般没什么作用,但硬要去杠的话也是可以发送ajax的,因为 ajax 是异步的操作,异步完成的时候,生命周期进入了后续阶段(mounted 都完成了),所以在后续阶段中是可以去修改 data 中的数据的。

    created

    实例创建完成

    1. 一个生命周期过程中,只会触发一次
    2. 能获取到 data 选项中的数据了,能调用 methods 选项中函数了。
    3. 获取不到挂载点元素
    4. 一般在这里发送 ajax 请求获取页面一打开就需要的数据

    beforeMount

    实例挂载之前:相关的 render 函数首次被调用。

    挂载的意思是:vue 解析模板数据完成,并替换到真实的DOM上面。

    1. 一个生命周期过程中,只会触发一次
    2. 通过 vm.$el 获取不到真实的DOM
    3. 一般没什么作用,不用去操作它。

    mounted

    实例挂载完成

    1. 一个生命周期过程中,只会触发一次
    2. 能够获取到真实的DOM
    3. 初始化与DOM相关的操作可以放在这儿。比如 Swiper 的实例化。

    beforeUpdate

    实例更新之前

    1. 一个生命周期过程中,可能会触发多次
    2. 能得到数据更新之前的DOM,但是得不到数据更新之后的DOM
    3. 一般不要在这里去修改数据,也不要去发送异步请求 ,会进入死循环
    4. 一般没什么作用,不用去操作它。

    updated

    实例更新完成

    1. 一个生命周期过程中,可能会触发多次。
    2. 能得到数据更新之后的DOM。
    3. 一般不要在这里去修改数据,也不要去发送异步请求 ,会进入死循环
    4. 一般用于真实DOM更新之后的操作,比如 Swiper 的更新。

    beforeDestroy

    实例销毁之前

    1. 做一些销毁工作,比如 计时器的清除、全局事件绑定的销毁等工作。

    destroyed

    实例销毁完成

    1. 这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。
    2. 一般没什么作用,不用去操作它。
    展开全文
  • vue中的钩子函数

    2020-08-04 23:00:29
    钩子函数 定义 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数...
  • 生命周期 钩子函数 一个组件从创建到销毁的过程就是生命周期。 beforeCreate:创建前 1、当前vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading 2、在当前函数里面是访问不...
  • vue钩子函数

    2020-05-29 22:20:27
    vue钩子函数 虽然文档已经很详细啦,但是总结一下加深一下理解与记忆(以官方文档为参考整理的~) 1. 路由导航守卫 有时候,我们需要通过路由来进行一些操作: 比如最常见的登陆权限验证,如果用户权限足够则...
  • ![1、beforeCreate (使用频率低) ...* 且修改数据不会触发updated beforeUpdate钩子函数 * 可以在这个钩子函数里发请求,访问后端接口拿数据 * 判断是否存在el,是否存在template,如果二者都有,以t...
  • 点击上方蓝色字体关注我吧 一起学习,一起进步,做积极的人!前言Vue 实例在被创建时,会经过一系列的初始化过程,初始化过程中会运行一些函数,叫做生命周期钩子函数,通过运用钩子函数,...
  • vue钩子函数(软文)

    万次阅读 2017-06-21 15:52:16
    前言:钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会...一、vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了,总结一下,对官方文档的那张图简...
  • Vue 中的钩子函数

    千次阅读 2019-03-04 15:08:34
    Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选 项对象,它可以包含...需要注意的是含 this 的函数大多不要使用箭头函数,因为我们期望 this 指向 Vue 实例。 data V...
  • 对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽、捷报频传~ 但是在前几天...
  • Vue.js学习笔记(十)--------钩子函数

    千次阅读 2018-09-07 15:37:35
    钩子函数 定义   每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数...
  • vue 钩子函数

    2019-06-06 11:53:28
    created :是在页面渲染之前发生的 ,如果想要获取数据渲染到html之后元素的宽高 这些事拿不到的。 mounted:是在渲染data里面的数据到页面上之后 发生的 所以这时候去元素的具体信息是可以拿到的。 ...
  • VUE 钩子函数 参数

    2019-05-23 20:44:28
    一个指令定义对象可以提供如下几个钩子函数 (均为可选): ****bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 *****inserted:被绑定元素插入父节点时调用 (仅保证父节点存在...
  • vue钩子函数

    2018-07-20 12:21:50
    每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...vue 钩子函数 使用async await&lt;/title&gt; &lt;/head&gt; &lt;body&gt
  • vue 钩子函数图解

    千次阅读 2017-11-27 14:35:18
    vue生命周期函数图解
  • 示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 钩子函数 使用async await</title> </head> <body>...
  • vue钩子函数对路由进行权限跳转

    千次阅读 2018-08-10 10:55:23
    使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) =&gt; { const role = localStorage.getItem('ms_username'); if(!role &amp;&amp; to.path !== '/login'){ next('...

空空如也

1 2 3 4 5 ... 20
收藏数 25,354
精华内容 10,141
关键字:

vue钩子函数

vue 订阅