快捷導(dǎo)航

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

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

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

前言

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

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

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

在正常函數(shù)中

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

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

在箭頭函數(shù)中

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

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

vue實(shí)例訪問(wèn)methods

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

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

methods實(shí)現(xiàn)原理

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

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

原理：

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

將該文件引入到代碼中

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