计算属性，方法与侦听器

发布时间：2020-07-15 17:54:06 作者：梁十八
来源：网络阅读：260

<!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

计算属性，方法与侦听器

相关阅读