vue 侦听器计算属性 axios_js脚本监听vue axios-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35112578/article/details/126925049

本文探讨Vue中函数和对象侦听器的优缺点，包括immediate选项与deep属性的使用。同时，介绍了计算属性在代码复用和响应式更新上的优势。最后，详细阐述了Axios库的运用，包括发起GET和POST请求的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数侦听器

缺点：

无法在刚进入页面时，自动触发立即执行

如果侦听的是一个对象，对象属性发生变化，不会触发侦听器

对象侦听器

好处：

可以通过immediate选项让侦听器自动触发

如果侦听的是一个对象，对象属性发生变化，可以通过deep来侦听

计算属性

计算属性定义时需要定义成方法，调用时作为属性来调用

好处：可以实现代码的复用

当计算属性依赖的数据源变化，计算属性的结果也会变化

axios

函数侦听器

缺点：

无法在刚进入页面时，自动触发立即执行
如果侦听的是一个对象，对象属性发生变化，不会触发侦听器

对象侦听器

好处：

可以通过immediate选项让侦听器自动触发
如果侦听的是一个对象，对象属性发生变化，可以通过deep来侦听

计算属性

计算属性定义时需要定义成方法，调用时作为属性来调用
好处：可以实现代码的复用
当计算属性依赖的数据源变化，计算属性的结果也会变化

axios：一个专注于网络请求的库

发起GET请求

axios({
        methods:"GET",
        url:'http://www.liulongbin.top:3006/api/getbooks',
        // URL中的查询参数,用于GET方法传参
        params:{
            id:1
        },
        // 请求体参数，用于POST方法传参
        data:{}
     }).then(function(res){
        console.log(res.data.data);
     })

发起POST请求

//  发起POST请求
                   btnPost.addEventListener("click", async function(){

                   let res= await axios({
                        methods: "POST",
                        url: 'http://www.liulongbin.top:3006/api/post',

                        // 请求体参数，用于POST方法传参
                        data: {
                            username:"刘德华",
                            age:18
                        }
                    })
                        console.log(res.data);

                   })

直接发起get和post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios直接发起get和post请求</title>
    <script src="./axios.js"></script>
</head>
<body>
     <button id="btnPost">发起POST请求</button>
    <button id="btnGet">发起GET请求</button>
    <script>
        let btnGet=document.querySelector('#btnGet')
        let btnPost=document.querySelector('#btnPost')

         btnGet.addEventListener('click', async function(){
         let {data:res}=  await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
            params:{id:1}
         })
         console.log(res.data);
        }) 


               
                //  发起POST请求
                   btnPost.addEventListener("click", async function(){
                 let {data:res}= await axios.post('http://www.liulongbin.top:3006/api/post',{username:"刘德华",age:18})
                 console.log(res);
                   

                   })
    </script>
</body>
</html>