原生与Vue的钩子函数

最新推荐文章于 2025-03-29 15:30:00 发布

Yang Qi(Warm 白羊)

最新推荐文章于 2025-03-29 15:30:00 发布

阅读量257

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45974687/article/details/108020878

版权

本文探讨了JavaScript中的钩子函数，包括回调函数的概念及其应用。接着介绍了jQuery动画钩子，以及window对象资源加载完毕时的钩子。进一步讲解了Vue自定义指令和生命周期钩子，阐述了在不同阶段如何进行自定义逻辑处理。例如，Vue实例创建后的初始化操作，以及组件创建完成但未开始渲染时的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. js中钩子函数

相当于回调函数

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

2. jQuery的动画钩子函数

        让开发者在动画执行完毕之后  执行自定义逻辑

  $("#one").animate({}, function() {})

3. window对象的资源加载完毕的钩子函数

让开发者在页面资源加载完毕之后执行的自定义逻辑

   window.onload = function() {}

4. Vue 自定义指令的钩子函数

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

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

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


    Vue.directive("" , {
        
    })

5. Vue 的生命周期钩子

html :

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

Script :

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

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

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

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

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

后台效果 ：
在这里插入图片描述

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

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

组件等化在到 vue对象上面去

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

在这里插入图片描述