vue中计算属性computed怎么使用

2023-07-02 17:07:41 814人浏览泡泡鱼

摘要

这篇“Vue中计算属性computed怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中计算属性computed

这篇“Vue中计算属性computed怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中计算属性computed怎么使用”文章吧。

1.定义

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

2.用法

一般情况下，computed默认使用的是getter属性

vue中计算属性computed怎么使用

3.computed的响应式依赖(缓存)

computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性fullName，它依赖了firstName和lastName这两个属性，只要它们其中一个属性变化，fullName就会重新执行。

computed计算属性会被缓存，在下面代码中使用了两次fullName，但在控制台只输出了一次 “这是fullName”。

<template>  <div>    <div>      姓：<input type="text" v-model="firstName" />    </div>    <div>      名：<input type="text" v-model="lastName" />    </div>    <!-- 调用两次fullName -->    <div>姓名：{{ fullName }}</div>    <div>姓名：{{ fullName }}</div>  </div></template><script>export default {  data() {    return {      firstName: "张",      lastName: "三",    };  },  computed: {    fullName() {        console.log("这是fullName");        return this.firstName + this.lastName;    }  }};</script>

4.应用场景

当一个数据受多个数据影响时，可以使用computed

本组件计算

计算props的值

计算vuex的state或者getters值的变化

附：计算属性的 getter 与 setter

默认情况下，计算属性函数是一个 getter 函数，如果计算属性只有 get 需求，则可以简写

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="./node_modules/vue/dist/vue.js"></script></head><body>    <div id="app">        <div>            <!-- <input type="checkbox" v-model='isAll'> -->            <input type="text" v-model='n'>            +            <input type="text" v-model='m'>            =            <input type="text" v-model='x'>        </div>        {{o}}    </div>    <script>        let vm = new Vue({            el: '#app',            data: {                is: true,                obj: {                    // a: 1                    a: 1                },                n: '',                m: ''            },            computed: {                //计算属性在这里写的属性不要在data重复写 跟data中的数据一样可以通过vm.获取或者修改                isAll: {                    get() {                        //只要获取这个属性就会触发get这个函数                        console.log(1);                        return this.is                    },                    set(val) {                        // val 设置的值                        this.isAll = this.is                    }                },                x: {                    // 只要是依赖的值（必须有setter和getter响应的数据）发生改变了就会重新计算自己的值                    get() {                        return Number(this.n) + Number(this.m)                    },                    // set(){                    //     Number(this.n) + Number(this.m)                    // }                },                o: {                    get() {                        //如果没有在data的obj中初始化 就没有getter和setter响应 当改变this.obj.a的时候不会影响 数据o                        return this.obj.a + 1                    }                },                ss: {                    get() { },                    //计算属性必须要有get可以没有set                    //v-model绑定的计算属性有get和set                    //其他的一般只有get                    set() { }                },                xx() {                    //如果这个计算属性只有get可以写成一个函数的形式                },                bb() {                    //第一次获取的时候依赖值没有发生改变但是也会默认执行一次                    // 必须要有return  不支持异步                    let a = 'kk';                    setTimeout(() => {                        a = this.aa + a                    }, 1000)                    console.log(a);                                        return this.aa                }            }        })    </script></body></html>

以上就是关于“vue中计算属性computed怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue中计算属性computed怎么使用

本文链接: https://www.lsjlt.com/news/343149.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341