vue實(shí)現(xiàn)的步驟是什么-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)vue實(shí)現(xiàn)的步驟是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括獨(dú)山網(wǎng)站建設(shè)、獨(dú)山網(wǎng)站制作、獨(dú)山網(wǎng)頁(yè)制作以及獨(dú)山網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，獨(dú)山網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到獨(dú)山省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

Vue是當(dāng)今熱門(mén)的框架，他可以進(jìn)行數(shù)據(jù)雙向綁定，為什么vue會(huì)大受歡迎，我知道的原因大致如下？

1.傳統(tǒng)改變dom結(jié)構(gòu)的操作是非常浪費(fèi)性能的操作（就是慢）
2.把dom結(jié)構(gòu)改變的邏輯放在js層來(lái)做可以提高性能。
3.數(shù)據(jù)和視圖的分離更符合面向?qū)ο蟮木幊?，mvvm

vue的實(shí)現(xiàn)也是和react一樣用虛擬dom來(lái)實(shí)現(xiàn)的，至于什么是虛擬dom，就是用js通過(guò)模板渲染而成的dom。

vue實(shí)現(xiàn)的步驟大概是這三步：

1、響應(yīng)式：vue怎么監(jiān)聽(tīng)到dota的每個(gè)屬性值的變化？
2、模板引擎：vue的模板如何解析的，指令是如何處理的？
3、模板渲染：如何把data里的數(shù)據(jù)加入模板并渲染成html？

第一步:響應(yīng)式

響應(yīng)式的實(shí)現(xiàn)主要是依靠一個(gè)對(duì)象的方法:

Object.defineProperty

這個(gè)方法能夠監(jiān)聽(tīng)對(duì)象中屬性的變化而進(jìn)行邏輯處理

dome如下：

    var obj={}
    var _name ='zhangsan'
    Object.defineProperty(obj,'name',{
        get:function() {
            console.log('get')
            return _name
        },
        set: function(newVal) {
            console.log('set')
            _name=newVal
        }
    })

這里你改變name的值或者訪問(wèn)name的值就會(huì)有打印信息

而在vue中模擬實(shí)現(xiàn)，大概是這樣的：

        var vm ={}
        var data={name:'張三',age:20}
        var key,value;
        for(key in data) {
            (function(key){
                Object.defineProperty(vm,key,{  //綁定到vm上
                    get:function(){
                        console.log('get')
                        return data[key];
                    },
                    set:function(newVal){
                        console.log('set');
                        data[key]=newVal
                    }
                })
            })(key)  //閉包處理
        }

其實(shí)學(xué)過(guò)java的同學(xué)肯定對(duì)這個(gè)不陌生，java的類里面可以直接生成get和set方法

第二步：解析模板

模板必須要轉(zhuǎn)化成js代碼，因?yàn)?
1.邏輯判斷(v-if,v-for),必須要用js才能實(shí)現(xiàn).
2.虛擬dom的渲染，必須要使用js才能實(shí)現(xiàn)。(render函數(shù))

模板1

    <div id="app">
        <p>{{price}}</p>
    </div>

模板1轉(zhuǎn)化的render

          with(this) { //this就是vm
                return _c(
                    'p',
                    {
                        attrs:{'id':'app'}
                    },
                    [
                        // _c是createElement
                        // _v是createTextVNode
                        // _s是toString方法
                        _c('p',[_v(_s(price))])
                    ]
                )
            }

模板2

    <div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

模板2轉(zhuǎn)化的render

          with (this) {
                return _c(
                    'p',
                    { attrs: { "id": "app" } },
                    [
                        _c(
                            'p',
                            [
                                _c(
                                    'input',
                                    {
                                        //指令
                                        directives: [
                                            {
                                                name: "model",
                                                rawName: "v-model",
                                                value: (title),    //vm.title
                                                expression: "title"
                                            }
                                        ],
                                        domProps: {
                                            "value": (title) //vm.title 
                                        },
                                        on: {
                                            "input": function ($event) {
                                                if ($event.target.composing) return;
                                                title = $event.target.value
                                            }
                                        }
                                    }
                                ),
                                _v(" "),
                                _c(
                                    'button',
                                    {
                                        on: { "click": add }  //vm.add
                                    },
                                    [
                                        _v("submit")
                                    ]
                                )
                            ]
                        ),
                        _v(" "),
                        _c(
                            'p',
                            [
                                _c(
                                    'ul',
                                    _l(
                                        (list), function (item) {
                                            return _c(
                                                'li',
                                                [
                                                    _v(_s(item))
                                                ]
                                            )
                                        }
                                    )
                                )
                            ]
                        )
                    ]
                )
                 }

這就是用于渲染的render函數(shù)

第三步：把模板加上數(shù)據(jù)渲染成html

vm._update(Vnode) {
    const prevVonde=vm._Vnode
    vm._Vnode=Vnode;
    if(!prevVnode) {  //如果沒(méi)有之前的vnode，第一次渲染
        vm.$el=vm._patch_(vm.$el,Vnode)
    }else {
        vm.$el=vm._patch_(prevVnode,Vnode)
    }
}
function updataComponent() {
    //vm._reander就是解析模板的rende函數(shù)，返回了一個(gè)vnode
    vm._update(vm._render())
}

這里的vm_.patch_里面就是復(fù)雜的diff算法了。根據(jù)dom的差別來(lái)渲染，里面使用來(lái)很多的遞歸調(diào)用，而且里面最要涉及到很多效率問(wèn)題，天下武功為快不破嘛。

感謝各位的閱讀！關(guān)于vue實(shí)現(xiàn)的步驟是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱：vue實(shí)現(xiàn)的步驟是什么-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article8/ceseip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、小程序開(kāi)發(fā)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容