vue3系统性学习（第一章）：命令式、声明式、运行时和编译时

命令式和声明式

早期流行的jQuery就是典型的命令式，命令式的一大特点就是关注过程，声明式更加关注结果

命令式

先用javascript原生实现命令式

const div = doucment.querySelect('#container')
div.innerText = 'hello world'
div.addEventListeren('click',()=>{
    alert('你好')
})

jQuery实现

$('#container').text('hello world').click(()=>{ alert('你好')})

申明式

Vue申明式

<div @click="()=>alert('你好')">hello world</div>

上面这段代码是Vue的一段模板实现的方式，可以直观的看到结果,至于如何实现这个结果我们并不关心，VueJS 帮我们封装了过程，那么我们一定能想到VueJS内部的实现逻辑一定是命令式，暴露给我们的是简洁直观的声明式。

运行时和编译时

前端框架发展至今，我们最为熟悉的有三种：纯运行时、运行时+编译时或纯编译时。

纯运行时

定义一个对象元素描述一个简单Dom树结构

const obj = {
    tag:'div',
    children:[
        {'tag':'span',children:'hello world'}
    ]
}

上面的对象定义了一个div中有一个子元素span，span内容是文本，父级的children是一个数组，接下来我们实现一个Render函数

function Render(obj,root){
    const el = document.createElement(obj.tag)
    if(typeof obj.children === 'string'){
        const text = document.createTextNode(obj.children)
        el.appendChild(text)
    }else if(obj.children){
        obj.children.forEach((child)=>Render(child,el))
    }
    root.appendChild(el)
}

有了这个Render函数我们就直接可以渲染出上面的对象

const obj = {
    tag:'div',
    children:[
        {'tag':'span',children:'hello world'}
    ]
}
Render(obj,document.body)

上面的这个对象构建html页面看起来不是很直观，如果页面内容多，这个JSON结构已经非常难维护了，Vue未我们提供了一个模板的形式，即申明式，把上面这个obj对象还原成直观的html书写方式

<div>
    <span>hello world</span>
</div>

运行时+ 编译时

Vue中提供了一个Compiler的程序，它的作用就是将我们这段代码变成Obj的这种树形结构

const html = `<div>
                    <span>hello world</span>
              </div>`
const obj = Compiler(html)
Render(obj,document.body)

编译时

如果我们把上面这个Render函数干掉，这样就变成了一个纯编译时。

const div = document.createElement('div')
const span = document.createElement('span')
span.innerText = 'hello world'
div.appendChild(span)
document.body.appendChild(div)

总结：本节了解到了命令式、声明式的区别，初步了解Vue运行时、模板是通过编译为dom树结果渲染到页面的过程