生命周期 のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• +Vue+生命周期 へ行く。
  • 1 (2022-05-11 (水) 19:14:08)
  • 2 (2022-05-11 (水) 19:15:20)

Vue

※前提条件：本情報はVue 2.0を基づいて説明してる

钩子函数 †[edit]

钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

示例 †[edit]

#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">{{ item }}</li>
   </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中的变量值
   console.log(this.msg);
 },

 methods: {
   add() {
     this.arr.push(Math.floor(Math.random() * 10));
   },
 },
 // data和methods之后执行
 created() {
   console.log("create函数执行了");
   // 此时可以获取到data中的变量值
   console.log(this.msg);

   this.timer = setInterval(() => {
     console.log("哈哈哈哈！");
   }, 1000);
 },

 /**
  * 2、挂载
  */
 //真实DOM挂载之前
 // 使用场景：预处理data，不会触发update钩子函数
 beforeMount() {
   console.log("beforeMount函数执行了----此时获取不到真实DOM");
   console.log(document.getElementById("myMsg"));

   // 重新改变data中的值
   this.msg = "hello,world";
 },

 //真实DOM挂载之后
 // 此处可以获取到真实的DOM
 mounted() {
   console.log("beforeMount函数执行了----此时可以获取到真实DOM");
   console.log(document.getElementById("myMsg"));
 },

 /**
  * 3、更新
  */
 //更新之前
 beforeUpdate() {
   console.log("beforeUpdate函数执行了-----此时获取不到更新的真实DOM");
   console.log(document.querySelectorAll("#myArr>li"));
 },

 // 更新之后
 // 场景：获取更新真实DOM之后
 updated() {
   console.log("update函数执行了-----此时可以获取到更新的真实DOM");
   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>

}}

コメント：

お名前:

(画像の文字列を入力して下さい)