计算属性,方法与侦听器
更新:HHH   时间:2023-1-7


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <div id="app">{{fullName}} {{age}}</div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Tom",
                lastName: "Cat",
                age: 18
                /*fullName: "Tom Cat" //然而这样会有冗余变量,可以用computed来解决*/
            },
            //计算属性
            computed: {
                fullName: function() {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName //别忘了return
                }
            }
        })
    </script>
</body>
</html>


可以看到,刷新页面输出“计算了一次”,改变firstName又输出“计算了一次”,而改变age不会再输出“计算了一次”。如果fullName依赖的firstName、lastName没有改变,则不会再重新计算,因为已经把它们缓存了起来


当然还可以通过methods的方式来实现,但是只要页面重新渲染,fullName就会重新执行一次,它没缓存。所以,同样的功能,用computed会比methods更好

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    //注意fullName()的()
    <div id="app">{{fullName()}} {{age}}</div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Tom",
                lastName: "Cat",
                age: 18
                /*fullName: "Tom Cat" //然而这样会有冗余变量,可以用computed来解决*/
            },
            /*//计算属性
            computed: {
                fullName: function() {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName //别忘了return
                }
            }*/
            //当然还可以通过methods的方法来实现:
            methods: {
                fullName: function() {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName
                }
            }
        })
    </script>
</body>
</html>


也可以用监听(watch)的方式:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <div id="app">{{fullName}} {{age}}</div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Tom",
                lastName: "Cat",
                age: 18,
                fullName: "Tom Cat" //然而这样会有冗余变量,可以用computed来解决
            },
            /*//计算属性
            computed: {
                fullName: function() {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName //别忘了return
                }
            }*/
            /*//当然还可以通过methods的方法来实现:
            methods: {
                fullName: function() {
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName
                }
            }*/
            //还可以用监听的方式:
            watch: {
                firstName: function() {
                    console.log("计算了一次");
                    this.fullName = this.firstName + " " + this.lastName
                },
                lastName: function() {
                    console.log("计算了一次");
                    this.fullName = this.firstName + " " + this.lastName
                }
            }
        })
    </script>
</body>
</html>


(看得出来,只有在监听的发生改变才会执行)


总结:如果一个功能可以通过method、computed、watch来实现,首选computed。因为它和watch一样会缓存,而且写的代码比watch少,更优于不缓存的method

返回web开发教程...