Vue中methods實現(xiàn)原理是什么

更新時間：2023年11月15日 11:44:59 作者：軟工不禿頭

methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過bind來進行的呢,本文給大家介紹Vue中methods實現(xiàn)原理是什么,感興趣的朋友一起看看吧

前言

vue實例對象為什么可以訪問methods中的函數(shù)方法？methods的實現(xiàn)原理是什么？

回調(diào)函數(shù)中的this指向問題

在解答前言中的問題前，需要了解一下回調(diào)函數(shù)中的this指向問題

在正常函數(shù)中

 <div class="app">
        <h1>{{msg}}</h1>
        <button @click="app">+1</button>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'this指向問題',
                count:0
            },
            methods:{
                app(){
                    console.log(this);
                    console.log(vm === this);
                }
            }
        })
    </script>

由上述代碼驗證得出，在普通函數(shù)中，this是指向vm的，也就是vue實例對象

在箭頭函數(shù)中

 app2:()=>{
                    console.log(this);
                    console.log(vm === this);
                }

由上得知，在箭頭函數(shù)中，this不是指向vue實例對象的，而是指向window。其實在箭頭函數(shù)是沒有this的，箭頭函數(shù)的this是從父級作用域中繼承過來的，在上述代碼中，window作用域就是父級作用域

vue實例訪問methods

   <div class="app">
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'methods的實現(xiàn)原理'
            },
            methods:{
                app(){
                    alert('hh')
                }
            }
        })
    </script>

由上述代碼及結(jié)果得出，Vue實例對象訪問methods中的函數(shù)是沒有做數(shù)據(jù)代理的，數(shù)據(jù)代理會調(diào)用getter方法，也就是上述截圖中msg后面的...，當我們點擊時，就會調(diào)用getter方法查看數(shù)據(jù)，所有數(shù)據(jù)代理只會代理數(shù)據(jù)，不會代理函數(shù)方法

methods實現(xiàn)原理

我們可以自己寫一個僅針對于methods配置項的js文件（methods實現(xiàn)原理）

// 定義一個類
class Vue {
    // 定義構(gòu)造函數(shù)
    // options是一個純粹的js對象：{}
    constructor(options){
        // 獲取所有的方法名
        Object.keys(options.methods).forEach((methodName,index)=>{
            // 給當前的Vue實例一個擴展方法
            this[methodName] = options.methods[methodName]
        })
    }
}

原理：

通過Object.keys()獲取vue實例中所有的方法名，然后通過forEach()遍歷，在上述代碼中，this就是指向vm,也就是vue實例對象，給實例對象一個拓展方法，而是什么拓展方法與methods中的方法同名，從而達到了通過vue實例可以訪問到methods中的方法

將該文件引入到代碼中

 <div class="app">
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'methods的實現(xiàn)原理'
            },
            methods:{
                app(){
                    alert('hh')
                },
                app2(){
                    alert('xx')
                }
            }
        })
    </script>