計(jì)算屬性，方法與偵聽(tīng)器

發(fā)布時(shí)間：2020-07-15 17:54:06 來(lái)源：網(wǎng)絡(luò) 閱讀：251 作者：梁十八欄目：web開(kāi)發(fā)

<!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" //然而這樣會(huì)有冗余變量，可以用computed來(lái)解決*/
            },
            //計(jì)算屬性
            computed: {
                fullName: function() {
                    console.log("計(jì)算了一次")
                    return this.firstName + " " + this.lastName //別忘了return
                }
            }
        })
    </script>
</body>
</html>

計(jì)算屬性，方法與偵聽(tīng)器
可以看到，刷新頁(yè)面輸出“計(jì)算了一次”，改變firstName又輸出“計(jì)算了一次”，而改變age不會(huì)再輸出“計(jì)算了一次”。如果fullName依賴的firstName、lastName沒(méi)有改變，則不會(huì)再重新計(jì)算，因?yàn)橐呀?jīng)把它們緩存了起來(lái)

當(dāng)然還可以通過(guò)methods的方式來(lái)實(shí)現(xiàn)，但是只要頁(yè)面重新渲染，fullName就會(huì)重新執(zhí)行一次，它沒(méi)緩存。所以，同樣的功能，用computed會(huì)比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" //然而這樣會(huì)有冗余變量，可以用computed來(lái)解決*/
            },
            /*//計(jì)算屬性
            computed: {
                fullName: function() {
                    console.log("計(jì)算了一次")
                    return this.firstName + " " + this.lastName //別忘了return
                }
            }*/
            //當(dāng)然還可以通過(guò)methods的方法來(lái)實(shí)現(xiàn)：
            methods: {
                fullName: function() {
                    console.log("計(jì)算了一次")
                    return this.firstName + " " + this.lastName
                }
            }
        })
    </script>
</body>
</html>

計(jì)算屬性，方法與偵聽(tīng)器

也可以用監(jiān)聽(tīng)(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" //然而這樣會(huì)有冗余變量，可以用computed來(lái)解決
            },
            /*//計(jì)算屬性
            computed: {
                fullName: function() {
                    console.log("計(jì)算了一次")
                    return this.firstName + " " + this.lastName //別忘了return
                }
            }*/
            /*//當(dāng)然還可以通過(guò)methods的方法來(lái)實(shí)現(xiàn)：
            methods: {
                fullName: function() {
                    console.log("計(jì)算了一次")
                    return this.firstName + " " + this.lastName
                }
            }*/
            //還可以用監(jiān)聽(tīng)的方式：
            watch: {
                firstName: function() {
                    console.log("計(jì)算了一次");
                    this.fullName = this.firstName + " " + this.lastName
                },
                lastName: function() {
                    console.log("計(jì)算了一次");
                    this.fullName = this.firstName + " " + this.lastName
                }
            }
        })
    </script>
</body>
</html>

計(jì)算屬性，方法與偵聽(tīng)器
（看得出來(lái)，只有在監(jiān)聽(tīng)的發(fā)生改變才會(huì)執(zhí)行）

總結(jié)：如果一個(gè)功能可以通過(guò)method、computed、watch來(lái)實(shí)現(xiàn)，首選computed。因?yàn)樗蛍atch一樣會(huì)緩存，而且寫(xiě)的代碼比watch少，更優(yōu)于不緩存的method

向AI問(wèn)一下細(xì)節(jié)

計(jì)算屬性，方法與偵聽(tīng)器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

計(jì)算屬性，方法與偵聽(tīng)器