数据驱动和dom驱动的区别

在进行对比之前，我觉得有必要事先了解下dom驱动和数据驱动这两个词。

dom驱动

何为dom驱动？简单来说就是直接通过代码操作页面上的html元素。下面使用代码更加直观的来表达。
现在有这么一段html代码

<div id="content">text<div>

如果我们需要改变text为hello everyone，通常用原生JavaScript来编写的话是这样的：

var contentDiv = document.getElementById('content')
contentDiv.innerHtml = 'hello everyone'

数据驱动

数据驱动顾名思义，通过数据来驱动页面的变化。我们依然通过代码来表达这个过程。现在我们对dom驱动中的代码部分进行改写。

<div>{{val}}<div>

同样我们把val的值进行改变:

val = 'hello everyone'

现在我们的代码将会变得极其简单。看到这里你可能一头雾水，完整代码如下：

<template>
    <div>{{val}}<div>
</template>
<script>
export default {
    data(){
        return {
            val:'text'
        }
    }
}
</script>

通过改变val变量的值，就可以改变div里面的内容。

小结

在数据驱动的开发模式下，开发者更多的是关心数据怎么流转，数据怎么变，而不需要通过代码去操作元素。开发过程更加简洁，代码更加简洁专一。之前是写Jquery的同学，需要在思维上进行转变，这样才能适应数据驱动模式下的开发。相信你会偏爱这种模式，做出更加强大的应用。