论Vue中声明式渲染和命令式的区别

声明式 只需要声明在哪里where做什么what,而无需关心如何实现how 命令式 需要以具体的代码表达在哪里where做什么what,如何实现how 声明式渲染理解: ●DOM状…

声明式

只需要声明在哪里where做什么what,而无需关心如何实现how

命令式

需要以具体的代码表达在哪里where做什么what,如何实现how

声明式渲染理解:

●DOM状态只是数据状态的一个映射

●所有的逻辑尽可能在状态的层面去进行

●当状态改变了,view会被框架自动更新到合理的状态

下面给出一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    </style>
</head>

<body>

</body>

</html>
<script type="text/javascript">
    var arr = [1, 2, 3, 4];
    //把数组中的每一个属性*2,存在数组中
    Object.defineProperty(obj, prop, descriptor)
    //命令式
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        newArr.push(arr[i] * 2)
    }
    console.log(newArr);

    //声明式
    let newArr2 = arr.map(item => item * 2);
    console.log(newArr2);
</script>

作者: huanggr

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注