Vue 生命週期鉤子

HammerZe發表於2022-04-14

Vue 生命週期鉤子

Vue實戰-購物車案例

每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。

通俗的理解，Vue物件管理一個標籤，把資料渲染到指定的位置，就好比你是這條街的城管就管這條街，後期的元件也是如此，物件管理某一個html片段；

生命週期鉤子函式

建立前後，渲染前後，更新前後，銷燬前後共八個

鉤子函式	描述
beforeCreate	建立Vue例項之前呼叫
created	建立Vue例項成功後呼叫（可以在此處傳送非同步請求後端資料）
beforeMount	渲染DOM之前呼叫，虛擬DOM掛載前
mounted	渲染DOM之後呼叫，虛擬DOM掛載後，看到頁面
beforeUpdate	重新渲染之前呼叫（資料更新等操作時，控制DOM重新渲染）
updated	重新渲染完成之後呼叫
beforeDestroy	銷燬之前呼叫
destroyed	銷燬之後呼叫

比如 created 鉤子可以用來在一個例項被建立之後執行程式碼：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 例項
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的鉤子，在例項生命週期的不同階段被呼叫，如 mounted、updated 和 destroyed。生命週期鉤子的 this 上下文指向呼叫它的 Vue 例項。

不要在選項 property 或回撥上使用箭頭函式，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函式並沒有 this，this 會作為變數一直向上級詞法作用域查詢，直至找到為止，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

PS：

created建立出例項，才能傳送請求從後端獲取資料
mounted可以設定定時任務，延遲任務···
beforeDestroy設定取消定時任務···

生命週期圖示

Vue 例項生命週期

測試程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></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: "HammerZe",
                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>

前後端互動

這裡介紹三種前後端互動的方式：

jquery的ajax方法傳送請求(基本不用了)
js官方提供的fetch方法(原來XMLHttpRequest)（官方的，用的也少）
axios第三方，做ajax請求（推薦）

PS：凌亂的知識點

# ajax:非同步的xml請求，前後端互動就是xml格式，隨著json格式發展，目前都是使用json格式
# jquery的ajax方法   $.ajax()  方法---》只是方法名正好叫ajax
# js原生可以寫ajax請求，非常麻煩，考慮相容性---》jquery

案例一：三種方式的使用

後端

from flask import Flask,make_response

app = Flask(__name__)
@app.route('/')
def index():

    obj = make_response('Hello Vue!')
    # 處理跨域
    obj.headers['Access-Control-Allow-Origin'] = '*'
    return obj

if __name__ == '__main__':
    app.run()

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
  <p style="font-size: 48px;align-content: center"> 從後端拿到的資料--->{{text}}</p>
</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>

第一種

第二種

第三種

總結

使用第二種需要轉json格式
後端修改，前端獲取也修改
第三張資料取值，注意在data.data裡

案例二：展示電影資料

後端

from flask import Flask,make_response,jsonify

app=Flask(__name__)
@app.route('/films')
def films():
    import json
    with open('./movie.json','r',encoding='utf-8') as f:
        res=json.load(f)
    obj = make_response(jsonify(res))
    obj.headers['Access-Control-Allow-Origin']='*'
    return obj

if __name__ == '__main__':
    app.run()

前端

<!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>

</head>
<body>
<div id="app">
    <ul>
        <li v-for="film in films_list">
            <p>電影名字是：{{film.name}}</p>
            <img :src="film.poster" alt="" width="100px" height="150px">
            <p>電影介紹：{{film.synopsis}}</p>
        </li>
    </ul>

</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            films_list:[]
        },
        created() {
            axios.get('http://127.0.0.1:5000/films').then(res => {
                console.log(res.data)
                this.films_list=res.data.data.films
            })

        }
    })
</script>
</html>

movie資料

{
  "status": 0,
  "data": {
    "films": [
      {
        "filmId": 5931,
        "name": "致我的陌生戀人",
        "poster": "https://pic.maizuo.com/usr/movie/923ddd6da070a705d533b48c9eb9996d.jpg",
        "actors": [
          {
            "name": "雨果·熱蘭",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e96d642a2c613bb38010394e77770a9d.jpg"
          },
          {
            "name": "弗朗索瓦·西維爾",
            "role": "Raphaël Ramisse / Zoltan",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/9f20b16cbf161f28ad90e21dcd57abd2.jpg"
          },
          {
            "name": "約瑟芬·約比",
            "role": "Olivia Marigny / Shadow",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/b0b7ee851580bce62c00985cf1a1c061.jpg"
          },
          {
            "name": "本傑明·拉維赫尼",
            "role": "Félix / Gumpar",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/21ced090240371f98b1d92a842a2398a.jpg"
          },
          {
            "name": "卡米爾·勒魯什",
            "role": "Mélanie",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/f0a2cbd274934de44bc02568c751ea19.jpg"
          }
        ],
        "director": "雨果·熱蘭",
        "category": "喜劇|愛情",
        "synopsis": "穿過千千萬萬時間線，跨越漫長歲月去尋找曾經的愛人。只是平行時空，重新認識，她還會愛上他嗎？一次激烈的爭吵，一場意外的時空旅行，拉斐爾（弗朗索瓦·西維爾 飾）從一名成功的暢銷書作家，變成平庸的中學語文老師；妻子奧莉薇亞（約瑟芬·約比  飾）從家庭主婦成為了星光熠熠的著名鋼琴家。再相遇，身份顛倒，不再是夫妻，平行時空又一次浪漫邂逅，拉斐爾能否守住最初的愛情？",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "法國",
        "language": "",
        "videoId": "",
        "premiereAt": 1649894400,
        "timeType": 3,
        "runtime": 118,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5920,
        "name": "邊緣行者",
        "poster": "https://pic.maizuo.com/usr/movie/afdef208d7b72a950b164c007e8a0837.jpg",
        "actors": [
          {
            "name": "譚耀文",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/9bb5e7a0d1ae00cb64370802c0ca812c.jpg"
          },
          {
            "name": "黃明升",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/a1b031211683411b6aea7288cdaa0233.jpg"
          },
          {
            "name": "任賢齊",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/42ff2bb4fc35cfc4c569cce29b1dc574.jpg"
          },
          {
            "name": "任達華",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/56087e1d22305c93dc9c30441f0b60e0.jpg"
          },
          {
            "name": "方中信",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/cdd4b9595ba13f68a1d145902c811bbf.jpg"
          }
        ],
        "director": "黃明升",
        "category": "犯罪|動作",
        "synopsis": "1997年迴歸前夕，多方勢力矛盾激化，暴力事件頻發。鉅變當前，黑幫龍頭林耀昌（任達華 飾）對親信阿駱（任賢齊 飾）委以幫派重任。多重身份的阿駱在黑白邊緣行走，一場除暴行動正悄然掀開反殺的序幕。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中國香港,中國大陸",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 113,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5926,
        "name": "迷失1231",
        "poster": "https://pic.maizuo.com/usr/movie/506cd1a0e038e6bb3a749d49a75a7c95.jpg",
        "actors": [
          {
            "name": "徐曉陸",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/9c42c60f4faacc50222e9b3f53107571.jpg"
          },
          {
            "name": "孫飛翔",
            "role": "杜揚羽",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/4fcc3790a4c01ec9e907ef53d2ef40d2.jpg"
          },
          {
            "name": "申容澤",
            "role": "法朋順",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/2edaa1e730f9cc5a806536e306919295.jpg"
          },
          {
            "name": "郭蓉",
            "role": "柏小慧",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/67eeaa6708d3c4455a2eefa37e904728.jpg"
          },
          {
            "name": "管金麟",
            "role": "冷凌",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/f4f9155d0ab1e1c495ef6163bef08f74.jpg"
          }
        ],
        "director": "徐曉陸",
        "category": "驚悚|恐怖",
        "synopsis": "怪面魅影在幽暗午夜神祕遊蕩，黑衣飄搖，詭笑驚悚，不斷侵擾尾隨青年男主。或在廢棄倉庫，或在深悠長廊，一次次揮舞利斧，用索命代價帶走無盡恐懼。更為弔詭的是，男主人公卻深陷在同一個殘酷的日子不能自拔，一次次逃亡，一次次被殺，恐懼不斷升級，迷失在奇異時空，逃無可逃……當終極真相震撼揭幕，真正的恐懼才伴隨著巨大痛苦徹底爆發！本片在青春時尚的快節奏敘事中，盡展密集嚇點，又發人深省，是恐怖片迷必看佳作。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中國大陸",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 89,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5928,
        "name": "人間世",
        "poster": "https://pic.maizuo.com/usr/movie/27406332a32ebef989f179ff5d109676.jpg",
        "actors": [
          {
            "name": "陶濤",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/0489f46c74aaab491eda50abd5611698.png"
          },
          {
            "name": "張琪",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/15758f0a8aaa7424bd9d7a33479ffa7d.jpg"
          },
          {
            "name": "秦博",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/c33bb8e7f4395b74fe9cdab7e4acf640.jpg"
          },
          {
            "name": "範士廣",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/4f52c439d48cb25ef659659b5e93f6ed.png"
          }
        ],
        "director": "陶濤|張琪|秦博|範士廣",
        "category": "紀錄片",
        "synopsis": "電影《人間世》由陶濤、張琪、秦博、範士廣四位導演共同執導，陶濤，張琪聯合監製，秦博、範士廣任總策劃。影片選取兩位身患絕症的病人，將目光聚焦於她們的家庭，記錄下她們人生最後的時光，書寫了一首關乎愛的生命詩篇。電影《人間世》是一部不同於電視版的大銀幕作品，秉承對生命的敬畏，以全新的主題立意，構建不一樣的敘事視角與故事結構，將電影蒙太奇手法創造性融入真實感人的紀錄影像，向電影中這些真實，可愛並飛揚著生命力量的人物致以最大的敬意。人間世，愛是感同身受的勇氣，觸手可及！",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中國大陸",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 90,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5932,
        "name": "么妹住在十三寨",
        "poster": "https://pic.maizuo.com/usr/movie/0ea0373776ca18fae9f1f70a856384a7.jpg",
        "actors": [
          {
            "name": "餘鐵",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/0c51f7259fcbd8bffb4873f58b86a83f.jpg"
          },
          {
            "name": "廖夢妍",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/de93f62cf7cf8ee2da96da57a1912c75.jpg"
          },
          {
            "name": "劉天寶",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/804bb3db37f7158f7f00c2cc0c133007.jpg"
          },
          {
            "name": "覃誠芳",
            "role": "冉芳",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/17e0648cdc8a31dac93222494be73618.png"
          },
          {
            "name": "陳炫羽",
            "role": "衛小勇",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/909d88d0b952b489d9921d92343c522e.png"
          }
        ],
        "director": "餘鐵",
        "category": "劇情|歌舞",
        "synopsis": "本片充分表現了男女主角在振興鄉村的大背景下，實現自已的人生理想作出的努力。曲折跌宕的情節，浪漫而幽默的語言，武陵山雄奇壯觀的美景，豐富多彩的土家文化，一首首美麗動人的歌曲都將給您帶來美的享受，這是一個把都市的繁華喧鬧與山鄉寧靜之美相結合而展現的當今現代都市與民族山鄉融合並進的故事。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中國大陸",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 104,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5933,
        "name": "誤殺瞞天記",
        "poster": "https://pic.maizuo.com/usr/movie/de2be5cf14be8687cf26e5cfebcec04e.jpg",
        "actors": [
          {
            "name": "尼西卡特·卡馬特",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/5b80929a74bb703550815c91adba3f0f.jpg"
          },
          {
            "name": "阿賈耶·德烏幹",
            "role": "Vijay Salgaonkar",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/20a357055dafe5d11605ded8dff4f8b6.png"
          },
          {
            "name": "塔布",
            "role": "Meera Deshmukh",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/86be9d9cd4bc5280998142c7d1935ad7.jpg"
          },
          {
            "name": "施芮婭·薩蘭",
            "role": "Nandini Salgaonkar",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e9eff8814241cf00a750cc2d1f2aae1f.jpg"
          },
          {
            "name": "拉賈特·卡普爾",
            "role": "Mahesh Deshmukh",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/67cb7c8a3512298a893360a985b0569d.jpg"
          }
        ],
        "director": "尼西卡特·卡馬特",
        "category": "懸疑|犯罪",
        "synopsis": "男主人公維傑經營著一家網路公司，有著幸福的家庭。某天，大女兒安玖不堪男孩薩姆騷擾而錯手將其殺死。這場黑夜裡的誤殺，打破了維傑一家人安寧的生活。為了捍衛女兒和家庭，只有小學文憑的維傑，開始了一些列瞞天過海的計劃。該片是電影《誤殺》的印度原版，因其縝密的懸疑推理和精巧的反轉敘事被奉為懸疑犯罪片經典，並被多國翻拍。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "印度",
        "language": "",
        "videoId": "",
        "premiereAt": 1649980800,
        "timeType": 3,
        "runtime": 143,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5904,
        "name": "珠峰隊長",
        "poster": "https://pic.maizuo.com/usr/movie/e50ab3429a7a99964bd0307103241b3f.jpg",
        "actors": [
          {
            "name": "蘇拉王平",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/05be45da838f393a34ed61a92821187d.jpg"
          },
          {
            "name": "崔舟萍",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e6c97b4b19e0a43359968c51af9716f6.jpg"
          },
          {
            "name": "小溪",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/965e2b23b595d7716edf8709bf74a60f.jpg"
          },
          {
            "name": "劉萍",
            "role": "演員",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/fd01a35554cdee9a66bc9c213cb7908c.jpg"
          },
          {
            "name": "吳曦",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e2ff16e4fe08b281c109c59c21d4909e.jpg"
          }
        ],
        "director": "吳曦",
        "category": "紀錄片",
        "synopsis": "每天生活兩點一線的白領、賣掉自家小店的店主、揹負沉重KPI的銷售、在成功與失敗間掙扎的創業者……8個普通人，帶著各自的故事與夢想，在民間專業高山向導、隊長蘇拉王平的帶領下，踏上了憧憬已久的珠峰之旅，也許，也是一次死亡之旅。他們在尼泊爾的珠峰南坡集結出發，穿越裂縫深不見底的恐怖冰川，攀上高達千米的藍色冰壁，爬過山體岩石斷面的“黃帶”，朝著世界之巔一步步靠近。這支起初被外國隊伍“看扁”的中國民間登山隊，面對“視窗期”極短的惡劣天氣和可能發生的衝頂“大堵車”，能否成為2019年全球第一支登頂珠峰的團隊？本片是中國首部沉浸式體驗攀登珠峰全程的電影，也是華語電影史上“最高難度”的紀錄片——創下在8470米以上最高海拔完成無人機起飛航拍的新紀錄。觀眾將跟隨鏡頭“空降”珠峰攀登現場，與這群不甘平凡的普通人一起，為心中的熱愛瘋狂一次。",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中國大陸",
        "language": "",
        "videoId": "",
        "premiereAt": 1652400000,
        "timeType": 3,
        "runtime": 83,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 5916,
        "name": "新灰姑娘2",
        "poster": "https://pic.maizuo.com/usr/movie/41a23e0bc5896e78777a0d3247308f32.jpg",
        "actors": [
          {
            "name": "愛麗絲·布萊哈特",
            "role": "導演",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/6d43b3ebf40eea8b0e7a9f667a73409c.jpg"
          },
          {
            "name": "蔣麗",
            "role": "艾 拉",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/4ae6fd3988f8cd011366bf91bea793db.jpg"
          },
          {
            "name": "邵敏佳",
            "role": "莉 莉",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e5b7ed0517bd8d673b87d8958bf8bfcb.jpg"
          },
          {
            "name": "趙路",
            "role": "痩鼠曼尼",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/09439815e94d6c5577a68fb4b0924acd.jpg"
          },
          {
            "name": "王和逸",
            "role": "胖鼠沃爾特",
            "avatarAddress": "https://pic.maizuo.com/usr/movie/e934ea82b775ea976b67bdfecf4ff80d.jpg"
          }
        ],
        "director": "愛麗絲·布萊哈特",
        "category": "動畫",
        "synopsis": "為了幫助王子艾利克斯解開魔咒，灰姑娘艾拉帶著魔法師莉莉，以及沃爾特和曼尼兩隻老鼠朋友再度出發尋找生命寶石，但朋友莉莉卻在冒險中為了保護艾拉而犧牲，拿回生命寶石的艾拉麵臨著一個選擇，究竟是幫助王子，還是救回朋友？",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "中國大陸",
        "language": "",
        "videoId": "",
        "premiereAt": 1654041600,
        "timeType": 3,
        "runtime": 90,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      },
      {
        "filmId": 3451,
        "name": "阿凡達2",
        "poster": "https://pic.maizuo.com/usr/movie/c5da4eddf824824c21f42aebd4f4120f.jpg",
        "actors": [
          {
            "name": "薩姆·沃辛頓",
            "role": "傑克·薩利",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/df050071a829cb47d7612e1e4c3f8b37.jpg"
          },
          {
            "name": "佐伊·索爾達娜",
            "role": "奈蒂莉",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/a457d0e419128720688a6d11712db4b4.jpg"
          },
          {
            "name": "西格妮·韋弗",
            "role": "格蕾絲·奧格斯",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/2ebc1d29d21743c960de288930921814.jpg"
          },
          {
            "name": "史蒂芬·朗",
            "role": "邁爾斯·誇奇上校",
            "avatarAddress": "https://pic.maizuo.com/usr/100003451/368a975d10ee8e0bf30b5d5906fb6527.jpg"
          }
        ],
        "director": "詹姆斯·卡梅隆",
        "category": "動作|科幻|奇幻|冒險",
        "synopsis": "《阿凡達2》的劇情承接自第一部的5年之後。曾經的地球殘疾軍人傑克·薩利，如今已經是潘多拉星球納美族一方部族的族長，並且與愛妻娜塔莉共同育有一對可愛的兒女，日子過得平淡而充實。然而某天，有個部族的兄弟在海岸附近巡邏時遭到利器割喉身亡。通過現場勘查，以及作為前海軍陸戰隊員的敏銳直覺，傑克判斷已經有人類的阿凡達混入了部落……",
        "filmType": {
          "name": "2D",
          "value": 1
        },
        "nation": "美國",
        "language": "英語",
        "videoId": "",
        "premiereAt": 1671321600,
        "timeType": 3,
        "runtime": 90,
        "item": {
          "name": "2D",
          "type": 1
        },
        "isPresale": false,
        "isSale": false
      }
    ],
    "total": 9
  },
  "msg": "ok"
}

Vue生命週期鉤子函式
2019-07-12
Vue函式
Vue生命週期鉤子簡介
2019-06-25
Vue
Vue 生命週期與鉤子函式
2019-08-03
Vue函式
Vue例項的生命週期鉤子
2020-11-06
Vue
vue生命週期鉤子，一張圖片
2017-07-28
Vue
vue[原始碼]生命週期鉤子的實現
2019-04-01
Vue原始碼
vue所有生命週期函式/鉤子函式理解
2018-12-16
Vue函式
Vue的鉤子函式[路由導航守衛、keep-alive、生命週期鉤子]
2018-07-23
Vue函式路由Keep-Alive
談談 React 新的生命週期鉤子
2019-03-03
React
Hive Query生命週期 —— 鉤子（Hook）函式篇
2021-01-18
HiveHook函式
對Angular中的生命週期鉤子的理解
2017-07-30
Angular
Angular2生命週期鉤子函式
2017-09-06
Angular函式
Vue父子元件生命週期執行順序及鉤子函式的個人理解
2018-08-11
Vue元件函式
vue - 生命週期
2019-01-10
Vue
vue生命週期
2024-04-23
Vue
vue 生命週期梳理
2018-10-27
Vue
理解VUE生命週期
2021-01-01
Vue
vue的生命週期
2017-10-10
Vue
vue 生命週期深入
2018-05-05
Vue
vue.js生命週期
2019-03-22
Vue.js
vue生命週期詳解
2021-09-07
Vue
vue生命週期總結
2018-08-22
Vue
實測Vue生命週期
2019-01-02
Vue
vue系列之生命週期
2018-11-08
Vue
vue系列生命週期（四）
2018-11-05
Vue
Vue父子元件生命週期
2020-09-19
Vue元件
學習vue生命週期
2018-03-27
Vue
vue生命週期探究（一）
2017-03-29
Vue
Vue生命週期的理解
2018-06-07
Vue
詳解vue生命週期
2017-09-27
Vue
淺談vue —— 生命週期
2018-05-08
Vue
圖解vue生命週期
2017-12-08
圖解Vue
React從入門到精通系列之(5)state管理和生命週期鉤子
2016-12-13
React
Vue原始碼探究-生命週期
2019-02-19
Vue原始碼
詳解Vue生命週期【上】
2019-05-13
Vue
Vue例項及生命週期
2018-11-16
Vue
vue2的生命週期
2018-09-25
Vue
Vue的生命週期的理解
2020-12-01
Vue

Vue 生命週期鉤子

Vue 生命週期鉤子

生命週期鉤子函式

生命週期圖示

測試程式碼

前後端互動

案例一：三種方式的使用

案例二：展示電影資料

相關文章