网站首页 > 博客文章 正文
生命周期
学过的方法
创建阶段的四个钩子函数
运行阶段的两个钩子函数
销毁阶段的四个钩子函数
生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
学过的方法
el: 这个vue实例控制的标签；
data:实例全局数据；
methods: 实例全局方法；
directives: 自定义标签指令；
components: 自定义组件template
filters:自定义过滤器；
beforeCreate:vue实例创建之前；
created: 实例创建完成之后；
beforeMount:从内存挂载到页面之前；
mounted: 挂载完成之后；
beforeUpdate:数据更新之前；
updated:更新完成之后；
beforeDestroy: 实例销毁之前；
destroyed: 实例销毁之后；
创建阶段的四个钩子函数
beforeCreate：这个函数执行的时候，表示刚初始化了一个空的实例对象，这时候只有一些默认的生命周期和默认的事件，其他的东西未创建，还有此时我们的data和mothods是没有初始化的；
created：这个函数执行的时候我们的data和mothods已经初始化好了；
beforeMount：这个函数执行的时候，说明模版已经在内存中编译好了，但是没有挂在到页面中去，页面展示的还是旧的数据；
mounted：这一步，将内存中编译好的模版替换到页面中去，此时的页面就是新数据了，整个Vue实例已经初始化完毕，此时组件已经退出创建阶段，进入运行阶段；
// 测试数据
<body>
<div id="app">
<button>cce</button>
<input type="text" name="cce" :id="'cce'" v-model="msg"/>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el: "#app",
data:{
msg:"cce"
},
beforeCreate(){
console.log(`这是beforeCreate函数,此时打印data里面的msg数据为:${this.msg}`)
},
created(){
console.log(`这是created函数,此时打印data里面的msg数据为:${this.msg}`)
},
beforeMount(){
console.log(`这是beforeMount函数,此时打印id为cce的标签为:${document.getElementById('cce')}`)
},
mounted(){
console.log(`这是mounted函数,此时打印id为cce的标签为:${document.getElementById('cce')}`)
}
});
</script>
// 结果如下
// 这是beforeCreate函数,此时打印data里面的msg数据为:undefined
// index.html?__hbt=1563344941616:28 这是created函数,此时打印data里面的msg数据为:cce
// index.html?__hbt=1563344941616:31 这是beforeMount函数,此时打印id为cce的标签为:null
// index.html?__hbt=1563344941616:34 这是mounted函数,此时打印id为cce的标签为:[object HTMLInputElement]
如果要拿到data数据那么最早可以在created里面，如果要操作DOM元素那么最早可以在mounted里面；
运行阶段的两个钩子函数
beforeUpdate：当这个函数执行的时候，data里面的数据是最新的，但是页面上面的内容还是旧的，会将数据在内存中更新内存中的DOM数，但是没有更新到页面；
updated：当这个函数执行的时候，data里面和页面里面的数据都是最新的，内存中最新的DOM树更新到页面了；
// beforeUpdate
<body>
<div id="app">
<button>cce</button>
<input type="text" name="cce" v-model="msg"/>
<p :id="'cce'">{{ msg }}</p>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el: "#app",
data:{
msg:"cce"
},
beforeUpdate(){
console.log(`这是beforeUpdate函数,在数据修改的时候页面上的数据是:${document.getElementById('cce').innerText}`);
console.log(`这是beforeUpdate函数,在数据修改的时候data上的数据是:${this.msg}`);
}
});
</script>
// 这是beforeUpdate函数,在数据修改的时候页面上的数据是:cce
// index.html?__hbt=1563346251778:27 这是beforeUpdate函数,在数据修改的时候data上的数据是:ccea
// update
<body>
<div id="app">
<button>cce</button>
<input type="text" name="cce" v-model="msg"/>
<p :id="'cce'">{{ msg }}</p>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el: "#app",
data:{
msg:"cce"
},
update(){
console.log(`这是update函数,在数据修改的时候页面上的数据是:${document.getElementById('cce').innerText}`);
console.log(`这是update函数,在数据修改的时候data上的数据是:${this.msg}`);
}
});
</script>
// 这是beforeUpdate函数,在数据修改的时候页面上的数据是:ccea
// 这是beforeUpdate函数,在数据修改的时候data上的数据是:ccea
销毁阶段的四个钩子函数
beforeDestroy：当这个函数执行的时候，就已经从运行阶段进入到销毁阶段，实例身上所有的data和所有的motheds以及过滤器、指令等都处于可用状态；
destroyed：当这个函数执行的时候，这个组件已经被完全销毁了；
猜你喜欢
- 2024-10-09 「前端Vue学习系列」三、Vue进阶篇
- 2024-10-09 面试官:你对vue生命周期的理解?（简述vue生命周期）
- 2024-10-09 vue的生命周期(概览)（vue生命周期的四个阶段）
- 2024-10-09 Vue如何创建自定义指令?（vuecli新增自定义指令）
- 2024-10-09 Vue-生命周期总结（vue中的生命周期）
- 2024-10-09 vue的生命周期（vue 的生命周期）
- 2024-10-09 vue3讲解setup，ref，reactive和watch语法
- 2024-10-09 vue基础知识（vue要掌握哪些知识?）
- 2024-10-09 Vue3学习手册（vue3 从入门到实战）
- 2024-10-09 Vue.js生命周期的详细介绍（vue.js生命周期面试题）
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论，来添加一个吧(●'◡'●)