Vue 钩子函数

2024-01-05 19:21:28

1. VUE生命周期

2. 测试代码

data(){

return {

userID:1

}

beforeCreate(){

console.log("execute beforeCreate");

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

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

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

// var userID =1;

// this.$store.dispatch("userModules/getuserInfo",{userID});

created(){

console.log("execute created");

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

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

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

beforeMount(){

console.group(‘beforeMount 挂载前状态===============》‘);

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","userID: " + this.userID);

mounted(){

console.group(‘mounted 挂载结束状态===============》‘);

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","userID: " + this.userID);

beforeUpdate(){

alert("更新前状态");

console.group(‘beforeUpdate 更新前状态===============》‘);

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","userID: " + this.userID);

alert("更新前状态2");

updated: function () {

console.group(‘updated 更新完成状态===============》‘);

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","userID: " + this.userID);

}

3. 代码结果

execute beforeCreate login.vue:37

el : undefined login.vue:38

data : undefined login.vue:39

userID: undefined login.vue:40

结论1: beforeCreate执行的时候，组建实例刚创建完成，data属性，el属性等还未初始化

execute created login.vue:45

el : undefined login.vue:46

data : [object Object] login.vue:47

userID: 1 login.vue:48

结论2: Create执行的时候，data属性初始化完成，el属性等还未初始化

beforeMount 挂载前状态===============》 login.vue:52

el : undefined login.vue:53

undefined login.vue:54

data : [object Object] login.vue:55

userID: 1 login.vue:56

结论3: 挂载开始之前调用beforeMount，render函数首次被调用

mounted 挂载结束状态===============》 login.vue:59

el : [object HTMLDivElement] login.vue:60

data : [object Object] login.vue:62

userID: 1

结论4: 挂载完毕，执行mounted，dom节点渲染到文档内，此时，对dom的一些操作才起作用

beforeUpdate，数据更新时，DOM打补丁之前调用，适合DOM更新之前访问现有的dom

updated，由于数据的更改，导致DOM重新打补丁，这之后，调用这个函数

Vue 钩子函数

码农公寓

beforeUpdate，数据更新时，DOM打补丁之前调用，适合DOM更新之前访问现有的dom

updated，由于数据的更改，导致DOM重新打补丁，这之后，调用这个函数

相关文章