携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
前言
Vue和React属于当下主流框架，初学者（包括我）在选择的时候可能会犯难，我给个个人建议：初学选啥都一样，看个人爱好，想UI和JS一起写的推荐React，想数据渲染简单一点的选择React，两者在编码上存在 互相借鉴 ，都推荐使用Hooks编码，原理也大差不差，会其中一个，另一个在花个一周时间可以很快上手，相当于买一送一，很实惠了。
我理解的MVVM模式下的响应式原理
其实没那么难，用我的话说其实就是下面这种情况
响应式原理 ：笼统的说就是通过 Object.defineProperty方法，对于实例数据被读取就会调用get方法，当修改数据时就自动调 set 方法，检测到数据更新了通知观察者Watcher，生成新的Dom树，对比新旧DOM结点，通知对应节点进行数据更新。
其实是这么个情况： 再简单的说就是：M(data)要该改变V(template) 或者V更改M数据同步更新，是通过VM的双向数据绑定操作操作的，V和M对VM都是双向通道，VM 通过双向数据绑定把 V 层和 M 层连接了起来，所以可以同步更新。
在在在简单，一句话说就是：数据变化更新视图，视图变化更新数据。
项目中 v-show 和 v-if混用
其实，项目中常用的是v-if，但它们侧重的领域还是要注意下。
v-if： 是操作DOM元素是否删除来显示隐藏的，这有可能会引发重绘或重排的问题。
v-show： 则是不管条件怎样都会通过display：是否为none ，来渲染DOM进行隐藏显示，这只是对css进行操作，没有删除DOM
所以，根据v-if 会删除DOM元素特性可知，这适用于不需要频繁切换条件的场景，v-show 则适用于需要频繁切换条件的场景。
v-for不写key，和v-if一起混用
先说为啥要有key，Vue官方文档说了，有了唯一标识key，Vue就可以更准确地追踪定位到更改的项，并且能够重用和重新排序现有组件，而不必重新渲染整个循环。
再说第二个，为什么不推荐一起使用，首先可以那样使用，但不建议，因为for的优先级比if高，如果if要筛选的数据比较少，但要遍历的数组很大，就要都循环，这就造成性能浪费，如果条件可以，建议用computed；
<div v-for="(item,index) in itemList" v-if="condition"></div>
像这个例子，是先进行遍历在判断，但实际业务情况往往是下面这种写法，先判断是否存在在遍历。
<template v-if="condition">
<div v-for="(item, index) in itemList"></div>
</template>
弄不清v-bind(: )、v-model 和 v-on(@)
v-bind 一般用来设置HTML的属性和传递数据，看官方文档的例子吧， v-model 一般在表单中使用，实现双向数据绑定的，在表单元素外不起使用，是一种语法糖，v-on 绑定事件监听器，给你写事件函数用的。
提一句他们其中两个的数据流向：
单向绑定 v-bind：数据只能从data流向页面;
双向绑定 v-model：数据可以从data流向页面，也可以从页面流向data;
没能理解消息订阅
咱可以想象成食堂打饭，打饭的同学是订阅方，打菜阿姨是发布方。这种消息订阅模式也很常见，属于比较重要的内容，它是一种组件间通信的方式，适用于任意组件间通信，具体看参考此系列的组件通信模块。
//安装pubsub
npm i pubsub-js
//引入
import pubsub from "pubsub-js"
//接收数据：订阅方
//发布数据：发布方
methods(){
demo(data){...}
mounted(){
this.pid = pubsub.subscribe("xxx",this.demo)//订阅消息
}
}
//提供数据
pubsub.publish("xxx",数据)
//最好在beforeDestroy构子中，用Pubsub.unscrible(pid)去取消订阅
