生命周期
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* 钩子函数 [#h319ed7c]
钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段...
|阶段|方法名|方法名|
|初始化|beforeCreate|created|
|挂载|beforeMount|mounted|
|更新|beforeUpdate|updated|
|销毁|beforeDestroy|destroyed|
** 初始化阶段 [#q2775286]
触发条件是自动的
*** beforeCreate [#ue638fcc]
- 组件即将创建，进行组件事件和生命周期的初始化
- 项目中一般不使用
- 有的开发者也会在这里进行数据请求
*** created [#x9a413cd]
- 组件创建完成
- 项目中：
-- 异步请求接口数据
-- 数据修改
*** beforeMount [#ic05b07c]
- 组件即将挂载
- 判断根实例组件是否有el选项，如果没有，那么手动挂载，判...
- 项目中：
-- 异步请求接口数据
-- 数据修改
*** mounted [#c9130908]
- 组件挂载结束
- 使用真实DOM替换VDOM
- 项目中
-- 异步请求接口数据
-- 数据修改
-- 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, ...
** 运行中阶段 [#fc042592]
触发条件是： 当data选项中的数据发生改变时
*** beforeUpdate [#b6611c04]
内部操作 ： vdom生成和diff的对比
*** updated [#o05cfd0f]
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库...
** 销毁阶段 [#p359afec]
*** beforeDestory [#kd51f621]
组件即将销毁，准备调用 $destroy() 方法
*** destoryed [#z223379c]
组件销毁结束
这两个钩子函数没有什么去别，功能很相似
* 示例 [#ydb3ee80]
#codeprettify{{
<template>
<div>
<h1>1、生命周期</h1>
<p>控制台打印结果：</p>
<p id="myMsg">\{\{ msg \}\}</p>
<ul id="myArr">
<li v-for="(item, index) in arr" :key="index">\{\{ ...
</ul>
<button @click="add">末尾加值</button>
</div>
</template>
<script>
export default {
// 数据对象
data() {
return {
msg: "你好世界！！",
arr: [1, 2, 3],
timer: "",
};
},
// new Vue()之后执行 vue内部给实例添加了一些属性和方法
// data和methods之前执行
beforeCreate() {
console.log("beforeCreate函数执行了");
// 此时获取不到data中的变量值
// DOM 取不到
console.log(this.msg);
},
methods: {
add() {
this.arr.push(Math.floor(Math.random() * 10));
},
},
// data和methods之后执行
created() {
console.log("create函数执行了");
// 此时可以获取到data中的变量值
// DOM 取不到
console.log(this.msg);
this.timer = setInterval(() => {
console.log("哈哈哈哈！");
}, 1000);
},
/**
* 2、挂载
*/
//真实DOM挂载之前
// 使用场景：预处理data，不会触发update钩子函数
beforeMount() {
// DOM 取不到
// data data选项中的数据获到了
console.log("beforeMount函数执行了----此时获取不到真...
console.log(document.getElementById("myMsg"));
// 重新改变data中的值
this.msg = "hello,world";
},
//真实DOM挂载之后
// 此处可以获取到真实的DOM
mounted() {
// data data选项中的数据获到了
console.log("beforeMount函数执行了----此时可以获取到...
console.log(document.getElementById("myMsg"));
},
/**
* 3、更新
*/
//更新之前
beforeUpdate() {
console.log("beforeUpdate函数执行了-----此时获取不到...
console.log(document.querySelectorAll("#myArr>li"));
},
// 更新之后
// 场景：获取更新真实DOM之后
updated() {
console.log("update函数执行了-----此时可以获取到更新...
console.log(document.querySelectorAll("#myArr>li"));
},
/**
* 4、销毁
*/
beforeDestroy() {
console.log("beforeDestroy函数执行了");
clearInterval(this.timer)
},
destroyed() {
console.log("destroyed函数执行了");
},
};
</script>
<style>
</style>
-------App.vue-----------------
<template>
<div>
<Life v-if="isShow"></Life>
<button @click="isShow = false">销毁组件</button>
</div>
</template>
<script>
import Life from "@/components/Life";
export default {
data() {
return {
isShow: true,
};
},
components: {
Life,
},
};
</script>
<style>
</style>
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* 钩子函数 [#h319ed7c]
钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段...
|阶段|方法名|方法名|
|初始化|beforeCreate|created|
|挂载|beforeMount|mounted|
|更新|beforeUpdate|updated|
|销毁|beforeDestroy|destroyed|
** 初始化阶段 [#q2775286]
触发条件是自动的
*** beforeCreate [#ue638fcc]
- 组件即将创建，进行组件事件和生命周期的初始化
- 项目中一般不使用
- 有的开发者也会在这里进行数据请求
*** created [#x9a413cd]
- 组件创建完成
- 项目中：
-- 异步请求接口数据
-- 数据修改
*** beforeMount [#ic05b07c]
- 组件即将挂载
- 判断根实例组件是否有el选项，如果没有，那么手动挂载，判...
- 项目中：
-- 异步请求接口数据
-- 数据修改
*** mounted [#c9130908]
- 组件挂载结束
- 使用真实DOM替换VDOM
- 项目中
-- 异步请求接口数据
-- 数据修改
-- 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, ...
** 运行中阶段 [#fc042592]
触发条件是： 当data选项中的数据发生改变时
*** beforeUpdate [#b6611c04]
内部操作 ： vdom生成和diff的对比
*** updated [#o05cfd0f]
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库...
** 销毁阶段 [#p359afec]
*** beforeDestory [#kd51f621]
组件即将销毁，准备调用 $destroy() 方法
*** destoryed [#z223379c]
组件销毁结束
这两个钩子函数没有什么去别，功能很相似
* 示例 [#ydb3ee80]
#codeprettify{{
<template>
<div>
<h1>1、生命周期</h1>
<p>控制台打印结果：</p>
<p id="myMsg">\{\{ msg \}\}</p>
<ul id="myArr">
<li v-for="(item, index) in arr" :key="index">\{\{ ...
</ul>
<button @click="add">末尾加值</button>
</div>
</template>
<script>
export default {
// 数据对象
data() {
return {
msg: "你好世界！！",
arr: [1, 2, 3],
timer: "",
};
},
// new Vue()之后执行 vue内部给实例添加了一些属性和方法
// data和methods之前执行
beforeCreate() {
console.log("beforeCreate函数执行了");
// 此时获取不到data中的变量值
// DOM 取不到
console.log(this.msg);
},
methods: {
add() {
this.arr.push(Math.floor(Math.random() * 10));
},
},
// data和methods之后执行
created() {
console.log("create函数执行了");
// 此时可以获取到data中的变量值
// DOM 取不到
console.log(this.msg);
this.timer = setInterval(() => {
console.log("哈哈哈哈！");
}, 1000);
},
/**
* 2、挂载
*/
//真实DOM挂载之前
// 使用场景：预处理data，不会触发update钩子函数
beforeMount() {
// DOM 取不到
// data data选项中的数据获到了
console.log("beforeMount函数执行了----此时获取不到真...
console.log(document.getElementById("myMsg"));
// 重新改变data中的值
this.msg = "hello,world";
},
//真实DOM挂载之后
// 此处可以获取到真实的DOM
mounted() {
// data data选项中的数据获到了
console.log("beforeMount函数执行了----此时可以获取到...
console.log(document.getElementById("myMsg"));
},
/**
* 3、更新
*/
//更新之前
beforeUpdate() {
console.log("beforeUpdate函数执行了-----此时获取不到...
console.log(document.querySelectorAll("#myArr>li"));
},
// 更新之后
// 场景：获取更新真实DOM之后
updated() {
console.log("update函数执行了-----此时可以获取到更新...
console.log(document.querySelectorAll("#myArr>li"));
},
/**
* 4、销毁
*/
beforeDestroy() {
console.log("beforeDestroy函数执行了");
clearInterval(this.timer)
},
destroyed() {
console.log("destroyed函数执行了");
},
};
</script>
<style>
</style>
-------App.vue-----------------
<template>
<div>
<Life v-if="isShow"></Life>
<button @click="isShow = false">销毁组件</button>
</div>
</template>
<script>
import Life from "@/components/Life";
export default {
data() {
return {
isShow: true,
};
},
components: {
Life,
},
};
</script>
<style>
</style>
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
