methods方法 - Vue3新手基礎教程

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

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

演示

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

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

在方法中訪問屬性

在?methods?方法中訪問?data?的數據，可以直接通過?this.屬性名?的形式來訪問。

例如我們在?show?方法中，訪問?number?屬性，可以直接通過?this.number?形式訪問，其中?this?表示的就是Vue 實例對象：

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

如果是在 Vue?構造函數外部，可以使用?……?來訪問?data?中的數據。

實戰

目標：點擊按鈕修改用戶名

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

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

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

瀏覽器渲染

按鈕只在第一次點擊有效。

computed（計算屬性）PK methods（方法）

• 計算屬性值會基于其響應式依賴被緩存。一個計算屬性僅會在其響應式依賴更新時才重新計算
• 方法調用總是會在重渲染發生時再次執行函數
• 怎么選？如果你確定不需要緩存，那么也可以使用方法調用。

參考文檔：

• CSDN
• VUE官網