Vue 生命周期、axios 异步请求

梦里梦外; 2023-02-17 11:09 77阅读 0赞

### 目录 ###

*   *   *  Vue对象的生命周期
         *  axios 异步请求
         *  axios传到后端的参数全部为null的问题
         *  说明

### Vue对象的生命周期 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoeV8xODg4MzcwMTE2MQ_size_16_color_FFFFFF_t_70]  
红框中的是钩子函数，成对出现，一共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

<script src="js/vue.js"></script>
    
    
    <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) { 
    	//...
      }
    },

使用 ajax 时要注意 ajx 的异步特点，要操作响应数据应该放在ajax的回调函数中，而不是放在 ajax 之外。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoeV8xODg4MzcwMTE2MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200613145929456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoeV8xODg4MzcwMTE2MQ==,size_16,color_FFFFFF,t_70