温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

计算属性,方法与侦听器

发布时间:2020-07-15 17:54:06 来源:网络 阅读:259 作者:梁十八 栏目:web开发
<!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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI