在没有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>
复制代码

最后在chrome的console控制台打印效果以下图：

在上图中你们能够看到，在beforeMount挂载前， $el里面仍是{{ message }}，这就是Virtual DOM（虚拟dom）技术的应用，上来二话不说，先把坑位占了，等后面mounted挂载的时候，再把值渲染进去。

最后，咱们再聊聊先后端分离，并行开发的事情。

先后端分离后，咱们前端工程师开发前，须要和后端同窗定义好接口信息（请求地址，参数，返回信息等），前端经过 mock 的方式，便可开始编码，无需等待后端接口是否已经准备就绪（是否是感受前端干的活儿愈来愈重）。

在实战演练事后，Vue给个人感受就两个字：省心。全部的操做关注点都在data上面。开发的时候，写好data 剩下的事情就是经过异步请求来交互data，UI层绑定事件改变data，在组件间传递data。

后记

在这个MVVM横行的时代，我已经渐渐的忘却了jQuery的存在。本系列文章尚未结束，下篇，也多是终结篇，即未来袭！

声明欢迎转载，请注明出处和做者，同时保留声明。做者：闰土少年出处：http://www.cnblogs.com/runnin... 本博客的文章如无特殊说明，均为原创，转载请注明出处。如未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。

想了解个人更多动态？欢迎关注个人微信公众号：闰土哥的前端路