Vue的知识点

MVVM

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。

准备阶段

模板解析，数据绑定

observer，监视/劫持data中所有层次的属性，同时为每一个属性创建dep属性，dep与data中的属性一一对应，有几个data有几个dep

complie，编译模板，解析指令，目的是初始化视图/界面，调用对象updater来实现更新节点，为每个表达式创建对应的watcher，同时指定了更新节点的回调函数，

watcher，所有的watcher放在对应的dep里面，防止重复建立，

点击更新按钮

this.name="xxx"指向observer，observer中的setter通知对应的某个dep，dep通知所有相关的watcher，然后watcher调用回调函数updater方法更新界面

组件之间的通信

方式1：props

​ 一般属性实现父传子

​ 函数属性实现子传父

缺点：隔代组件和兄弟组件通信比较麻烦

方式2：vue自定义事件

vue内置实现：可以代替函数类型的props

• 绑定监听：

  < MyComp @eventName=“callback” >

• 触发/分发事件：this.$emit(“eventName”,data)

缺点：只适合子传父

方法3：消息订阅和发布

引入消息订阅和发布的实现库，如pubsub.js

• 订阅消息：PubSub.subscribe(‘msg’,(msg,data)=>{})
• 发布信息：PubSub.publish(‘msg’,data)

优点：可用于任意关系组件间的通信

方法4：Vuex

方法5：slot

专门实现父传子传递带数据的标签

v-if和v-show的区别：

方法5：slot

专门实现父传子传递带数据的标签

v-if和v-show的区别：

v-if 是动态添加，当值为false 时，是完全移除该元素，即dom 树中不存在该元素。 v-show 仅是隐藏/ 显示，值为false 时，该元素依旧存在于dom 树中。 若其原有样式设置了display: none 则会导致其无法正常显示。