Vue的钩子函数

钩子函数类似于回调函数

回调函数 : 让开发者在特定的时候 执行自定义逻辑

vue自定义指令的钩子函数

bind ：
        让开发者在将自定义指令绑定到dom元素上时  执行自定义逻辑

    inserted ：
        让开发者在元素插入dom树的时候  执行自定义逻辑

    update ：
        让开发者在元素状态发生改变的时候  执行自定义逻辑


    Vue.directive("" , {
        
    })  

vue 的生命周期钩子

html :

    <div id="app">
        <h2>{{message}}</h2>
        <input type="text" v-model="message">
    </div>

js:

const app = new Vue({
        el : "#app",
        data : {
            message : "你好吗?"
	    },

生命周期钩子

beforeCreate

vue的实例化对象刚刚创建完毕 但是数据 以及方法都还没有设置到这个vue实例上 所以访问不到

 beforeCreate() {
            console.log("beforeCreate");
            console.log(this.message);
    
        },

reated

vue实例创建完毕 并且 传入的参数 数据 都已经设置到vue上通常用来做初始化操作

created() {
            console.log("created");
            console.log(this.message);
             
         },

打印结果：

beforeMount

各种数据 组件都已经创建完成 但是还没有开始任何操作 所以获取到的是原始的dom元素,没有个vue对象参数任何关联

 beforeMount() {
            console.log("挂载前");
            console.log(this.$el);
            console.log(this.$data);
                
        },

mounted

组件等数据都加载到 vue对象上面去

mounted() {
            console.log("挂载后");
            console.log(this.$el);
            console.log(this.$data);        
        },