在沒有DOM操做的日子裏，我是怎麼熬過來的（中）

時間 2019-12-06

標籤沒有 dom 日子怎麼熬過來的欄目 HTML 简体版

原文原文鏈接

前言

繼上篇推送以後，在掘金、segmentfault、簡書、博客園等平臺上迅速收到了不俗的反饋，大部分網友都留言說感同身受，還有很多網友追問中篇什麼時候更新。因而，閏土順應呼聲，在這個凜冽的寒冬早晨，將中篇熱文滾燙呈上。javascript

搬好小板凳，接下來，正文從這開始～css

在上篇的衆多留言中，有位網友的評論比較具備表明性，摘出來供你們一閱：html

「同感啊樓主好比作tab的時候，之前jq就是切換一下class，如今vue是切換數據，再根據數據顯示class，這彎繞的啊」前端

固然，有評論就有回覆，請看下面這位網友是怎麼回覆他的：vue

「哪裏繞彎了，只要記着數據驅動dom，習慣就好，這種模式才比較適合頁面dom變化渲染，只是以前被jq帶的根生蒂固」java

有時候寫文章，不必定僅僅是爲了分享本身的工做經驗，而是還想看看網友是怎麼看待這個話題的，從而衍生出一系列的對話，以及思想碰撞。node

在這裏，閏土有句話想送給剛從JQ轉變思路過來的同行們：webpack

MVVM時代，數據映像了DOM世界，一切以數據爲核心，正如同數學能夠描述世界同樣，你只須要考慮數據或者狀態便可。web

因此，只要你充分理解了上面這句話，恭喜你，你已經從直接操做DOM的時代毫無壓力的過渡到了MVVM時代！chrome

話很少說，先來看看MVVM項目的工程目錄：

固然你能夠經過vue官網提供的vue-cli腳手架工具，來快速搭建項目結構。若是有不懂腳手架做用的老鐵，能夠參照下圖，這就有點相似於工地上的腳手架，能夠幫助工人們快速搭建該建築的結構模型（話糙理不糙，說明問題便可）。

項目結構搭建完畢後，就能夠npm install 來安裝項目依賴了。一般這個階段，可能會比較漫長，建議用國內淘寶的鏡像cnpm。

也是在這期間，常常有同窗在安裝某依賴模塊時，會碰到命令行報錯，說是node或者npm版本太低等問題。假如你果然碰到這個相似的問題，能夠考慮先將項目中的node_modules刪除掉，而後從新cnpm install安裝項目所需的依賴。一般這個狀況，就會迎刃而解（不要問爲何，這多是個偏方）。

而後，你就能夠健步如飛地去執行如下操做了：

#開啓本地開發服務器，監控項目文件的變化，實時構建並自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081

npm run dev

#使用生產環境配置構建項目，構建好的文件會輸出到 "dist" 目錄，

npm run build

#運行構建服務器，能夠查看構建的頁面

npm run build-server

#運行單元測試

npm run unit

當你能夠正常運行這個項目以後，接下來咱們就該聊聊項目裏的各個文件了。

俗話說，在js裏面一切皆對象，那麼vue裏面，則是一切皆組件，能用組件實現的，終將被組件實現。

說到組件，在項目中，你可能會看到公司前輩寫的組件代碼，都是以 .vue 爲後綴的文件，打開後你會發現它的總體結構分三層，分別定義了三個 tag標籤，template，script，style。而後對應的代碼在本身的標籤裏面各司其職，全部須要的html、css、javascript都在裏面。

組件看完以後，咱們移步到webpack的配置文件，也就是webpack.config.js文件，內容大概以下：

module.exports = {
    entry: {
        'index': './vue/index/main.js',
    },
    output: {
        path: './public/bulid',
        filename: '[filename].js' // 能夠多點切入
    },
    module: {
        loaders: [
            {
              test: /\.vue$/,
              exclude: /node_modules/,
              loader: vue.withLoaders({
                  js: 'babel?optional[]=runtime'
              })
            },
            { test: /\.scss$/, loader: 'style!css!sass }, { test: /\.css$/, loader: "style!css" }, { test: /\.js$/, loader: 'babel-loader' } ] }, resolve: { // 解決 npm 的依賴問題 modulesDirectories: ['node_modules'], extensions: ['', '.js', '.json'] }, } 複製代碼

我對 webpack 的最初信仰就是，它很是的智能化，能夠將一切的資源（包括html css javascript image）用 import 和 require 模塊化引入，並對資源進行預處理，最終被打包成一個js文件解釋執行。

接下來我想談談vue的生命週期和鉤子函數。

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。例如須要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。

說的直白一點，分別對應的四組鉤子函數就是：

beforeCreate 、created； // 建立前、建立完成

beforeMount 、mounted；// 掛載前、掛載完成

beforeUpdate 、updated； // 更新前、更新完成

beforeDestory 、destoryed。// 銷燬前、銷燬完成

這裏閏土在網上找到一個很好的例子：

<!DOCTYPE html>
<html>
<head>
    <title>Vue生命週期</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

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

<script type="text/javascript">
  var app = new Vue({
      el: '#app',
      data: {
          message : "閏土少年"
      },
       beforeCreate: function () {
            console.group('beforeCreate 建立前狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
            console.log("%c%s", "color:red","data : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function () {
            console.group('created 建立完畢狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + this.$el); //undefined
            console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 掛載前狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 掛載結束狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷燬前狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 銷燬完成狀態 >>>>>>>>>>');
            console.log("%c%s", "color:red","el : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>
複製代碼