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数组、对象数组，可以取出某个对象的字段值