( 第二篇 )仿寫(xiě)'Vue生態(tài)'系列___'模板小故事.'

wangtdgoodluck 發(fā)布于2019-08-26 14:06 / 2438人閱讀

摘要：第二篇仿寫(xiě)生態(tài)系列模板小故事本次任務(wù)承上完成第一篇未完成的熱更新配置核心完成模板解析模塊的相關(guān)編寫(xiě)很多文章對(duì)模板的解析闡述的都太淺了本次我們一起來(lái)深入討論一下盡可能多的識(shí)別用戶的語(yǔ)句啟下在結(jié)構(gòu)上為雙向綁定等模塊的編寫(xiě)打基礎(chǔ)最終效果圖一模板頁(yè)

( 第二篇 )仿寫(xiě)"Vue生態(tài)"系列___"模板小故事."

本次任務(wù)

承上: 完成第一篇未完成的"熱更新"配置.

核心: 完成"模板解析"模塊的相關(guān)編寫(xiě), 很多文章對(duì)模板的解析闡述的都太淺了, 本次我們一起來(lái)深入討論一下, 盡可能多的識(shí)別用戶的語(yǔ)句.

啟下: 在結(jié)構(gòu)上為"雙向綁定"、watch、dep等模塊的編寫(xiě)打基礎(chǔ).

最終效果圖

一. 模板頁(yè)面

我們既然要開(kāi)發(fā)一個(gè)mvvm, 那當(dāng)然要模擬真實(shí)的使用場(chǎng)景, 相關(guān)的文件我們放在:"cc_vue/use"路徑下, 代碼如下:

"cc_vue/use/1:模板解析/index.html", 本篇專門用來(lái)展示模板解析的頁(yè)面

"cc_vue/use/1:模板解析/index.js", 本篇專門用來(lái)展示模板解析的邏輯代碼

本來(lái)要展示html文件的信息, 但是內(nèi)容冗長(zhǎng)而且沒(méi)有什么技術(shù)可言, 所以不在此展示了.

function init(){
  new C({
    el: "#app",
    data: {
      title: "努力學(xué)習(xí)",
      ary: [1, 2, 3],
      obj: {
        name: "金毛",
        type: ["幼年期", "成熟期", "完全體"]
      },
      fn() {
        return "大家好我是: " + this.obj.name;
      }
    }
  });
}

export default init;

一. 配置文件與簡(jiǎn)易的熱更新

之所以說(shuō)它是簡(jiǎn)易的, 原因是我們并不會(huì)去做到很細(xì)致, 比如本次不會(huì)去追求每一次的精準(zhǔn)更新, 而是每一次都會(huì)對(duì)整體采取更新, 畢竟本次工程熱更新只是一個(gè)知識(shí)點(diǎn), 我們還有很多很多更重要的事要做emmmm

一些自己的觀點(diǎn)
熱更新并不是算很神奇, 我之前配置過(guò)vuex的熱更新相關(guān), 后來(lái)總結(jié)了一下, 它與回調(diào)函數(shù)概念差不多, 原理就是當(dāng)編輯器, 或者是serve檢測(cè)到你的文件有相應(yīng)變化的時(shí)候, 執(zhí)行一個(gè)回調(diào)函數(shù), 這個(gè)回調(diào)函數(shù)里面就是一些重新渲染, 更新dom等等的操作, 你可能會(huì)有疑問(wèn), vue的熱更新做的那么好, 也沒(méi)看見(jiàn)有什么熱更新的回調(diào)函數(shù)啊, 其實(shí)這都?xì)w功于"vue-loader", css 熱更新考的是css-loader, 他們?cè)谔幚砦募碾A段就把熱更新的回調(diào)代碼注入了js文件里面, 所以我們才會(huì)是無(wú)感的, 所以沒(méi)有"loader"幫助我們注入熱更新, 那本次我們就自己手動(dòng)實(shí)現(xiàn).