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>
    <test></test> 
</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(resp => { 
    console.log(resp.data);  //resp是整个响应，.data部分才是后台返回的数据
}).catch(err => { 
    console.log(err);
});
//get的第二个参数是config， axios的请求配置，请求参数只是其中的一项，放在config的params属性中进行传递
axios.get("/login", { params: { username: 'chy', password: 'abcd'}})
    .then(resp => { 
      console.log(resp.data);
    });
    .catch(err => { 
      console.log(err);
    });
//post的第二个参数是data，用对象 {} 传递参数，不需要传递数据的可以缺省data
axios.post('/login', { username: 'chy', password: 'abcd'})
    .then(resp => { 
      console.log(resp.data);
    })
    .catch(err => { 
      console.log(err);
    });

如果不需要后台返回数据，可以不要then，catch也不是必需的。

可以用resultType指定期待返回的数据类型，会自动识别返回的数据类型，可以指定但没必要。

//使用后台返回的数据
console.log(resp.data);  //返回字符串，直接用即可
console.log(resp.data.username);  //返回对象、map，可以取出字段值
console.log(resp.data[0]);  //返回数组，可以取出指定位置的元素
console.log(resp.data[0].username);  //如果后台返回的是json数组、对象数组，可以取出某个对象的字段值

axios传到后端的参数全部为null的问题

先排查是否是请求方式的原因，比如后端controller用RequestMapping标注（支持多种请求方式），用 @RequestBody 接收参数(请求体)，但前端使用get方式发起请求。

如果不是请求方式的原因，可参考以下2种解决方案

1、URLSearchParams或FormData

let params = new URLSearchParams();
//let params = new FormData()
params.append('username', 'chy');
params.append('password', 'abcd');
this.$axios.post('/xxx', params)
    .then(resp => { 
      console.log(resp);
    })
    .catch(err => { 
      console.log(err);
    });

2、使用qs

//在main.js中导入qs，并挂载到Vue原型上
//如果报错qs没有定义，需要自行npm install安装qs
import qs from 'qs'
Vue.prototype.$qs=qs
//this.$qs.stringify(整个参数对象) 序列化整个参数对象为字符串进行传输
this.$axios.post('/xxx', this.$qs.stringify(this.params))
    .then(resp => { 
      console.log(resp.data);
    })
    .catch(err => { 
      console.log(err);
    });

说明

//初始化时从后端加载数据一般是放在 created() 中
created() { 
  this.$axios.post('/tag/getAll', { })
      .then(resp => { 
          //把响应数据赋给 this.tagList
        this.tagList = resp.data;
      })
      .catch(err => { 
        console.log(err)
      });
  //操作this.tagList，ajax是异步的，此时往往还没返回数据，所以操作的还是之前的值
  for (let tag in this.tagList) { 
    //...
  }
},