Vue 生命週期、axios 異步請求

 

Vue對象的生命週期

紅框中的是鉤子函數，成對出現，一共4對8個。

組件也是一個Vue實例，也有這些生命週期，並不是要顯式new Vue()纔算Vue對象。
 

Vue.component('Test',{
    template:`
        <div>
            <p>{{msg}},我是test組件</p>
            <button @click='msg+=" chy"'>更新數據</button> 
        </div>
    `,
    data(){
        return{
            msg:'hello'
        }
    },
    
    
    // 數據掛載: 執行data()函數，初始化變量。這個過程會觸發數據掛載事件，會依次調用2個鉤子函數
    
    // 組件創建前，數據尚未掛載
    beforeCreate(){
        console.log('組件創建前',this.msg);  //this.msg是undefined
    },
    // 組件創建後，數據已掛載
    created(){
        console.log('組件創建後',this.msg);  //this.msg的值是"hello"
    },


	// dom掛載：把模板作爲innerHTML掛載到容器元素中。會觸發dom掛載事件，依次調用2個鉤子函數

    // dom掛載前
    beforeMount() {
        console.log('dom掛載前',document.getElementById("app").innerHTML);  //此時組件的dom尚未掛載，innerHTML爲空
    },
    // dom掛載後
    mounted() {
        console.log('dom掛載後',document.getElementById("app").innerHTML);  //此時組件的dom已掛載，innerHTML有值
    },

    
    // 掛載完畢後，修改data中的變量時會觸發數據更新事件，依次調用2個鉤子函數

    // 數據更新前，數據指的是內存中的變量，
    beforeUpdate() {
        console.log('數據更新前',document.body.innerHTML);
    },
    // 數據更新後
    updated() {
        console.log('數據更新後',document.body.innerHTML);  //如果打印的是this.msg，數據要已發生更新才能界定更新前後，此時數據已變了，更新前後打印出來的this.msg是一樣的
    },
    
    
    // 觸發組件銷燬事件時，會依次調用2個鉤子函數

    // 組件銷燬前
    beforeDestroy() {
        console.log('組件銷燬前');
    },
    // 組件銷燬後
    destroyed() {
        console.log('組件銷燬後');
    },
    
});

 

性能調優

頻繁創建組件會拉低性能，可以把組件放在<keep-alive>中，不使用組件時會緩存組件（停用組件），不銷燬；要使用組件時自動激活組件。

<keep-alive>
	<test></test> 
</keep-alive>

 
使用<keep-alive>後會增加1對（2個）生命週期方法

// 組件已被激活
activated() {
    console.log('組件激活')
},
// 組件已停用
deactivated() {
    console.log('組件停用');
},

 

axios 異步請求

#下載axios
npm install axios

<!-- 引入vue.js -->
<script src="js/vue.js"></script>

<!-- 引入axios.js。上線時都換爲min版 -->
<script src="js/axios.js"></script>

// 寫法一
axios({
    method:'post',
    url:'/login',
    data:{  //傳給後臺的數據
        username: 'chy',
        password: 'abcd'
    }
}).then(function (response) {  // 處理後臺返回得到數據
    console.log(response.data);  //response是整個響應，.data部分纔是後臺返回的數據
}).catch(function (error) {  //發生錯誤時的處理
    console.log(error);
});


// 寫法二
axios.post('/login', {  //get、post可選，用對象方式{ }傳遞數據，如果不傳遞數據，可省略{ }。get方式也可以把參數拼接在url中
    username: 'chy',   //通常是獲取表單數據，$('#xxx').val
    password: 'abcd'
}).then(function (response) {
    console.log(response.data); 
}).catch(function (error) {  
    console.log(error);
});

如果不需要後臺返回數據，可以不要then，catch也不是必需的。

可以用resultType指定期待返回的數據類型，會自動識別返回的數據類型，可以指定但沒必要。
 

如果跨域，url要寫全 host|ip:port/xxx，還要做一些跨域配置。
 

如果要使用事件監聽+函數，把axios寫在函數中

• 事件監聽用js、jq、vue的都行
• 函數用js的寫法或寫在Vue對象的methods中都行，注意：這2種的函數寫法是不同的

 

//使用後臺返回的數據
console.log(response.data);  //返回字符串，直接用即可
console.log(response.data.username);  //返回對象、map，可以取出字段值
console.log(response.data[0]);  //返回數組，可以取出指定位置的元素
console.log(response.data[0].username);  //如果後臺返回的是json數組、對象數組，可以取出某個對象的字段值