数据驱动和dom驱动的区别
数据驱动和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的同学,需要在思维上进行转变,这样才能适应数据驱动模式下的开发。相信你会偏爱这种模式,做出更加强大的应用。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。