526互联

vue之计算属性(computed)

发布时间 2023-04-12 10:36:25作者: 树苗叶子

目录

简介

  • 在vue中，如果在methods中定义了一个函数，也是可以通过插值语法调用的，但会产生一个问题，如果有多个输入框使用了v-model，这时不管输入的内容是否与这个函数有关，这个函数都会执行一次，这样会让降低运行效率，为了解决这个问题，可以使用计算属性

计算属性效果：

  1. 计算属性只有在它的相关依赖发生变化时才会执行
  2. 计算属性是依赖缓存的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="show"> ----> {{myFunc()}}
    <p><input type="text" v-model="test"> ---> {{test}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            show:'',
            test:''
        },
        methods:{
            myFunc(){
                console.log('我执行了')
                return this.show
            }
        }
    })
</script>
</body>
</html>
  • **如下图可以看到，在第二个输入框输入内容后，也会调用myFunc函数
    image

计算属性

  • 只需要在computed属性中定义函数，之后使用插值语法调用的时候不需要加括号执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="show"> ----> {{myFunc}}
    <p><input type="text" v-model="test"> ---> {{test}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: '',
            test: ''
        },
        methods: {},
        // 注意，computed中的函数在调用时不需要加括号
        computed: {
            myFunc() {
                console.log('我执行了')
                return this.show
            }
        }
    })
</script>
</body>
</html>
  • 可以看到，第二个输入框的变化不会使myFunc函数运行
    image