arr() {
console.log(“methods 中的钩子函数”);
},
},
components: { },
beforeCreate() {
console.log(“页面a----” + “beforeCreate”, this.num);
//创建前的阶段 此时data中的数据未 定义不能访问data中的数据
},
created() {
console.log(“页面a----” + “created”, this.num);
// 创建后 最早可以访问data 和 methods中数据的钩子
this.$nextTick(()=>{
console.log(this.$refs.button); // 这两种方式都可以拿到dom
})
setTimeout(() => {
console.log(this.$refs.button);
});
},
beforeMount() {
// 挂载前 指令已经解析完毕内存中已经生产dom树 但是还没有渲染到本地
console.log(“页面a----” + “beforeMount”, this.num);
},
mounted() {
// 最早可以操作 dom 的钩子
console.log(“页面a----” + “mounted”, this.num);
},
beforeUpdate() {
console.log(“页面a----” + “beforeUpdate”, this.num);
},
updated() {
console.log(“页面a----” + “updated”, this.num);
},
beforeDestroy() {
console.log(“页面a----” + “beforeDestroy”, this.num);
},
destroyed() {
console.log(“页面a----” + “destroyed”, this.num);
},
};
可以根据打印的顺序看到,在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this. n e x t T i c k ( ) 可以等待 d o m 生成以后再来获取 d o m 对象,而通过 t h i s . nextTick()可以等待dom生成以后再来获取dom对象,而通过this. nextTick()可以等待dom生成以后再来获取dom对象,而通过this.nextTick()获取到的值为dom更新之后的值
2、this.$nextTick()在下次 DOM 更新循环之后执行的延迟回调。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
{{ value }}
<button type=“danger” @click=“get”>点击