Vue的命令式和声明式的概念

1.命令式框架(jQuery)

这里有个小例子：

1.获取id为app的div标签

2.设置他的文本内容是hello，world

3.为其绑定点击事件

4.当点击时候弹出提示ok

1.首先我们通过$来活动app的标签
$(`#app`)//获取id为app的标签
2.然后通过text来讲内容设置为hello，world
.text（`hello world`）//将内容设置为hello，world
3.然后我们为他注册上点击事件，然后弹出ok
.on(`click`,()=>){//绑定点击事件
   alert('ok')弹出ok
})

这个是用jQuery实现方式，但是很多人可能没有用过jQuery，那我们就来用原生Js来实现这种方式

1.我们会通过document.querySelector来实现app的标签
const div=document.querySelector(`#app`)//获取app的标签
2.然后用innerText来设置内容为hello，world
div.innerText='hello,world'//将内容设置为hello，world
3.然后通过addEventListener来设置绑定点击事件
div.addEventListener['click',()=>]{//绑定点击事件
4.点击弹出ok
alert('ok')//点击弹出ok
}]

这两个写法不管是用哪一种都能与我们需求一一对应，这两种代码本身就是描述做事情的过程

2.声明式框架vue.js

我们的声明式框架会更关注与结果

看一下我们上面的需求是如何在vue如何实现的

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

这个模板就是我们实现vue的实现方式，我们提供了一个结果，至于如何去实现的，我们不关心

vue帮我们封装了过程，因此我们能猜到vue内部实现一定是命令式的 ，但是暴露给用户确实更加的声明式

=========================================================================

此笔记原创为几何心凉的，个人没有学过vue，就看了凉哥的视频，然后做了一个比较详细的笔记