计算属性与 axios

少年张狂

已于 2022-02-28 18:32:04 修改

阅读量499

点赞数

文章标签： vue.js javascript 前端

于 2021-08-15 21:31:09 首次发布

本文链接：https://blog.csdn.net/weixin_41909678/article/details/119713790

版权

结合 async 和 await 调用 axios

计算属性

概念

计算属性指通过一系列运算，最终得到一个属性值

这个动态计算出来的属性值可以被模板结构或 methods 方法使用

<body>
    <div id="app">
        <div>
            <span>R:</span>
            <input type="text" v-model.number='r'>
        </div>
        <div>
            <span>G:</span>
            <input type="text" v-model.number='g'>
        </div>
        <div>
            <span>B:</span>
            <input type="text" v-model.number='b'>
        </div>
        <hr>
        <!-- v-bind 中可以设置 js 表达式 -->
        <!-- js 中 {} 代表对象 -->
        <!-- :style 代表动态绑定一个样式对象，它的值是一个 { } 样式对象 -->
        <!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 -->
        <div class="box" :style="{ backgroundColor:`rgb(${r}, ${g}, ${b})` }">
            {{ `rgb(${r}, ${g}, ${b})` }}
        </div>
        <button @click='show'>按钮</button>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                // 红
                r: 0,
                // 绿
                g: 0,
                // 蓝
                b: 0,
            },
            methods: {
                show() {
                    console.log(`rgb(${this.r}, ${this.g}, ${this.b})`);
                }
            },
        });
    </script>
</body>

计算属性的语法和特点

对上述代码中的 " `rgb(${r}, ${g}, ${b})` " 进行复用
所有的计算属性都要定义在 computed 节点下
计算属性在声明时，被定义为一个方法
使用时，当作普通属性使用即可
计算属性数据源发生变化，自身会被重新求值

优点：

实现了代码复用
只要计算属性中依赖的数据源变化，则计算属性将被重新求值

<body>
    <div class="app">  
        <div class="box" :style="{ backgroundColor: rgb }">
            {{ rgb }}
        </div>
    </div>

    <script>
        const vm = new Vue({
            // 所有的计算属性都要定义在 computed 节点下
            // 计算属性在定义的时候要定义成方法格式
            computed: {
                // rgb 作为一个计算属性,被定义为方法格式
                // 在此方法中,要返回一个生成好的 rgb(xxx,xxx,xxx) 的字符串
                // 在声明的时候是方法,使用的时候当作一个属性来用
                rgb() {
                    return `rgb(${this.r}, ${this.g}, ${this.b})`
                }
            },
            methods: {
                show() {
                    console.log(this.rgb);
                }
            },
        });
    </script>
</body>

温故而知新

计算属性

需要的属性根据已有的属性计算出来，计算得到的属性就被称为计算属性
与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便

data: {
    firstName: 'zhang',
    lastName: 'san'
}

computed: {
    fullName: {
        // get 的作用：当有人读取 fullName 时，get 会被调用，且返回值就作为 fullName 的值
        // 初次读取 fullName 时，get 被调用，此后 fullName 的值被缓存
        // 此后再次读取时，从缓存中读取 fullName 被缓存的值
        // 当所依赖的值（firstName 或者 lastName）发生改变时，get 再次被调用
        get() {
            console.log(this)  // 此处的 this 指向 vm 实例对象
            return this.firstName + ' ' + this.lastName
        },
        // 当 fullName 直接被修改时，调用 set
        set(value) {
            console.log('set', value)
            // 以上部分 fullName 的值改变不会影响 firstName 和 lastName 的值
            // 以下部分将 fullName 的值与 firstName 和 lastName 进行绑定，此时 fullName 的值的改变将影响 firstName 和 lastName 的值，且 html 页面中也将实时更改
            const arr = value.split(' ')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

当计算属性确定只需要读取，不需要修改的时候，可以使用简写

computed: {
    fullName() { // 此处的函数相当于 get 函数
        return this.firstName + ' ' + this.lastName
    }
}

渲染到页面的数据，应该区分是 data 中配置的属性，computed 中计算的属性，还是 methods 中配置的方法

axios

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

在 Vue、React 中都会用到 axios 来请求数据

中文下载地址

http://axios-js.com/