vue生命週期鉤子函式與後端互動

阿新 • • 發佈：2022-04-13

vue生命週期鉤子函式

# new Vue這個物件---》管理一個標籤---》把資料，渲染到頁面上
# 元件---》物件管理某一個html片段
# 生命週期--》8個宣告週期鉤子函式---》執行到某個地方，就會執行某個函式
    鉤子函式                                描述
  beforeCreate    建立Vue例項之前呼叫，data空的
  created    建立Vue例項成功後呼叫 
  beforeMount    渲染DOM之前呼叫
  mounted    渲染DOM之後呼叫---》看到頁面了，插值已經進去了
  
  beforeUpdate    重新渲染之前呼叫（資料更新等操作時，控制DOM重新渲染）
  updated    重新渲染完成之後呼叫
  
  beforeDestroy    銷燬之前呼叫
  destroyed    銷燬之後呼叫
  
  
# 有用的：
    created：向後端發請求拿資料，傳送ajax請求
  mounted：定時任務，延遲任務  js中
  beforeDestroy：定時任務關閉，銷燬一些操作
  
# 定時器的開啟與關閉
 this.t = setInterval(() => {
                console.log('daada')
            }, 3000)
  
  
clearInterval(this.t)
this.t = null

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head> 

<body>
<div id="app">
    <button @click="handleC">點我顯示元件</button>
    <child v-if="is_show"></child>
    <hr>
</div>

</body>
<script>
    // 1 定義個元件---》生命週期
    Vue.component('child', {
        template: `
            <div>
                < 
h1>{{name}}</h1>
                <button @click="handleC">點我彈窗</button>
            </div>`,
        data() {
            return {
                name: "lqz",
                t:'',
            }
        },
        methods: {
            handleC() {
                this.name = "彭于晏"
                alert(this.name)
            }

        },
        // 生命週期鉤子函式8個
        beforeCreate() {
            console.log('當前狀態：beforeCreate')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        created() {
            // 向後端載入資料
            console.log('當前狀態：created')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },

        beforeMount() {
            console.log('當前狀態：beforeMount')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        mounted() {
            console.log('當前狀態：mounted')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀 態：', this.name)
            //用的最多，向後端載入資料，建立定時器等
            // setTimeout:延遲執行
            // setInterval：定時執行,每三秒鐘列印一下daada
            this.t = setInterval(() => {
                console.log('daada')
            }, 3000)

        },
        beforeUpdate() {
            console.log('當前狀態：beforeUpdate')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        updated() {
            console.log('當前狀態：updated')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        beforeDestroy() {
            console.log('當前狀態：beforeDestroy')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        destroyed() {
            console.log('當前狀態：destroyed')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
            //元件銷燬，清理定時器
              clearInterval(this.t)
              this.t = null
            //   console.log('destoryed')
        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            is_show: false
        },
        methods: {
            handleC() {
                this.is_show = !this.is_show

            }
        },


    })
</script>
</html>

與後端互動的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>-->
</head>
<body>
<div id="app">
    {{text}}
</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            text: '',
        },
        created() {
            // 方式一:
            //向後端發請求，拿資料，拿回來賦值給text
            // $.ajax({
            //     url:'http://127.0.0.1:5000/',
            //     type:'get',
            //     success:(data) =>{
            //         console.log(data)
            //         this.text=data
            //     }
            // })

            // 方式二：js原生的fetch
            // fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
            //     console.log(res)
            //     this.text=res.name
            //
            // })

            // 方式三 axios

            axios.get('http://127.0.0.1:5000').then(data => {
                console.log(data.data)
                this.text=data.data.name
            })


        }


    })
</script>
</html>