methods方法 - Vue3新手基礎(chǔ)教程

我們可以使用?methods?屬性給 Vue 定義方法，methods?的基本語(yǔ)法：

const App = {
    methods:{
        // 在此時(shí)定義方法，方法之間使用逗號(hào)分隔
        //方法名:function(){}
}
}
        const app = Vue.createApp(App);
        app.mount("#app");

演示

例如在?methods?中定義一個(gè)名為?show?的方法：

methods:{
	show: function(){
		console.log("顯示內(nèi)容")
	}
}

在方法中訪問(wèn)屬性

在?methods?方法中訪問(wèn)?data?的數(shù)據(jù)，可以直接通過(guò)?this.屬性名?的形式來(lái)訪問(wèn)。

例如我們?cè)?show?方法中，訪問(wèn)?number?屬性，可以直接通過(guò)?this.number?形式訪問(wèn)，其中?this?表示的就是Vue 實(shí)例對(duì)象：

    <script>
        const App = {
            data() {
                return {
                    number: 100
                }
            },
            methods: {
                show: function () {
                    console.log(this.number);
                }
            }
        }
        const app = Vue.createApp(App);
        app.mount("#app");
    </script>

如果是在 Vue?構(gòu)造函數(shù)外部，可以使用?……?來(lái)訪問(wèn)?data?中的數(shù)據(jù)。

實(shí)戰(zhàn)

目標(biāo)：點(diǎn)擊按鈕修改用戶名

    <script src="https://unpkg.com/vue@next"></script>
    <div id="app">
        <p>{{message}}</p>
        <button @click="change">點(diǎn)我改名</button>
    </div>

    <script>
        const App = {
            data() {
                return {
                    message: "小飛俠"
                }
            },
            methods: {
                change() {
                    this.message = "水星仔"  // 改變data中屬性的值
                }
            }

        }
        const app = Vue.createApp(App);
        app.mount("#app");
    </script>

瀏覽器渲染

按鈕只在第一次點(diǎn)擊有效。

computed（計(jì)算屬性）PK methods（方法）

• 計(jì)算屬性值會(huì)基于其響應(yīng)式依賴被緩存。一個(gè)計(jì)算屬性僅會(huì)在其響應(yīng)式依賴更新時(shí)才重新計(jì)算
• 方法調(diào)用總是會(huì)在重渲染發(fā)生時(shí)再次執(zhí)行函數(shù)
• 怎么選？如果你確定不需要緩存，那么也可以使用方法調(diào)用。

參考文檔：

• CSDN
• VUE官網(wǎng)