VUe 方法加载顺序

 //在实例初始化之后、创建之前执行
beforeCreate(){
        
         console.log("我最先加载");
    }

//实例创建后执行
created(){
        console.log("其次是我");
      
    },

//在挂载开始之前调用
beforeMounted(){
        console.log("轮到我了");
}

//挂载前加载过滤器
filters: {
        console.log("接着是我");
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

//用来监控自己定义的变量 该变量不在data里面声明,直接在computed里面定义
computed:{
        console.log("接着是我");
}



directives-bind //只调用一次,在指令第一次绑定到元素时调用

directives-inserted //被绑定元素插入父节点时调用

activated //keek-alive组件被激活时调用,则在keep-alive包裹的嵌套的子组件中触发


//挂载完成后调用
 mounted(){
        console.log("我最后");
    },

{undefined{}} //mustache表达式渲染页面






v-mode   input时:

watch //首先先监听到了改变事件

filters //过滤器没有添加在该input元素上,但是也被调用了

beforeUpdate //数据更新时调用,发生在虚拟dom打补丁前

directived-update //指令所在的组件的vNode更新时调用,但可能发生在其子vNode更新前

directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用

updated //组件dom已经更新



组件销毁时,顺序:

beforeDestroy //实例销毁之前调用

directives-unbind //指令与元素解绑时调用,只调用一次

deactivated //keep-alive组件停用时调用

destroyed //实例销毁之后调用


上一篇:Vue 2.x源码分析图谱


下一篇:自定义指令 (pc端拖拽+表单自动获焦)