# 1.beforeCreate、Created、beforeMount、mounted
# App
vue | // App.vue |
| <template> |
| <div> |
| <home></home> |
| </div> |
| </template> |
| |
| <script> |
| import Home from "./Home.vue"; |
| |
| export default { |
| components: { |
| Home, |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
# Home
vue | <template> |
| <div> |
| <h2 ref="title">{{ message }}</h2> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| message: "Hello Home", |
| }; |
| }, |
| beforeCreate() { |
| console.log("home beforeCreate"); |
| }, |
| created() { |
| console.log("home created"); |
| }, |
| beforeMount() { |
| console.log("home beforeMount"); |
| }, |
| mounted() { |
| console.log("home mounted"); |
| }, |
| beforeUnmount() { |
| console.log("home beforeUnmount"); |
| }, |
| unmounted() { |
| console.log("home unmounted"); |
| }, |
| beforeUpdate() { |
| console.log(this.$refs.title.innerHTML); |
| console.log("home beforeUpdate"); |
| }, |
| updated() { |
| console.log(this.$refs.title.innerHTML); |
| console.log("home updated"); |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
参考结果:
# 2.beforeUpdate、updated
# App
vue | // App.vue |
| <template> |
| <div> |
| <home></home> |
| </div> |
| </template> |
| |
| <script> |
| import Home from "./Home.vue"; |
| |
| export default { |
| components: { |
| Home, |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
# Home
vue | <template> |
| <div> |
| <h2 ref="title">message:{{ message }}</h2> |
| <button @click="changeMessage">修改message</button> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| message: "Hello Home", |
| }; |
| }, |
| methods: { |
| changeMessage() { |
| this.message = "你好啊, 李银河"; |
| }, |
| }, |
| beforeCreate() { |
| console.log("home beforeCreate"); |
| }, |
| created() { |
| console.log("home created"); |
| }, |
| beforeMount() { |
| console.log("home beforeMount"); |
| }, |
| mounted() { |
| console.log("home mounted"); |
| console.log("------------"); |
| }, |
| beforeUnmount() { |
| console.log("home beforeUnmount"); |
| }, |
| unmounted() { |
| console.log("home unmounted"); |
| }, |
| beforeUpdate() { |
| console.log(this.$refs.title.innerHTML); |
| console.log("home beforeUpdate"); |
| }, |
| updated() { |
| console.log(this.$refs.title.innerHTML); |
| console.log("home updated"); |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
参考结果:
# 2.beforeUnmount、unmounted
# App
vue | // App.vue |
| <template> |
| <div> |
| <button @click="isShow = !isShow">切换</button> |
| <template v-if="isShow"> |
| <home></home> |
| </template> |
| </div> |
| </template> |
| |
| <script> |
| import Home from "./Home.vue"; |
| |
| export default { |
| components: { |
| Home, |
| }, |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
# Home
vue | // Home.vue |
| <template> |
| <div> |
| <h2 ref="title">message:{{ message }}</h2> |
| <button @click="changeMessage">修改message</button> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| message: "Hello Home", |
| }; |
| }, |
| methods: { |
| changeMessage() { |
| this.message = "你好啊, 李银河"; |
| }, |
| }, |
| beforeCreate() { |
| console.log("home beforeCreate"); |
| }, |
| created() { |
| console.log("home created"); |
| }, |
| beforeMount() { |
| console.log("home beforeMount"); |
| }, |
| mounted() { |
| console.log("home mounted"); |
| console.log("------------"); |
| }, |
| beforeUnmount() { |
| console.log("home beforeUnmount"); |
| }, |
| unmounted() { |
| console.log("home unmounted"); |
| }, |
| beforeUpdate() { |
| console.log(this.$refs.title.innerHTML); |
| console.log("home beforeUpdate"); |
| }, |
| updated() { |
| console.log(this.$refs.title.innerHTML); |
| console.log("home updated"); |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
参考结果:
# 3. 总结
- 页面渲染默认会执行 beforeCreate -> created -> beforeMount -> mounted
- 数据更新会执行 beforeUpdate -> updated
- 数据卸载会执行 beforeUnmount -> unmounted
- beforeUpdate : 数据还未更新执行的回调函数
- updated:数据已经更新完执行的回调函数
- 注意 beforeUnmount 与 unmounted 在 keep-alive 不会生效,这时就会用到 onActivated 和 deactivated 了!
- 用 coderwhy 老师上课资料展示: