Vue声明周期与其事件

computed、data、watch区分

• computed是依赖于其他属性的计算属性，当其他值发生变化时computed才会做出响应。
• data是每个Vue实例返回的独立拷贝方法
• watch用于监听某个值的变化以做出响应。

组件通信

1. 父子组件

• props和event
  通过props向下传递，通过event向上传递
• v-model
  双向绑定，v-bind和v-on的语法糖
• $emit和$on
  父子组件通过发送事件和事件监听传递
• $refs
  为组件注册ID引用，根据ID引用获取组件的实例
  注：$refs并非响应式，只能获取获取时间节点的状态
• $parent和$children
  缺点在于不能定位父组件的变化点

2. 非父子通信

• provide和inject
  最高层组件provide，低层inject
• 访问跟实例$root
• 通过$attrs和$listeners
  中间组件通过$attrs和$listeners获取属性和监听事件
• eventBus
  在两个需要通信的组件中引入同一组件使用$emit和$on
• Vuex

生命周期分析

• new Vue()新建Vue的实例，调用Vue.prototype._init函数
• beforeCreate之前：初始化事件、生命周期和渲染函数，并调用callHook(vm,'beforeCreate')调用钩子函数。
• created之前：初始化注入，初始化数据，初始化校验，调用callHook(vm,'create')

Vue.prototype._init = function(options) {
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate') // 拿不到 props data
  initInjections(vm)
  initState(vm)
  initProvide(vm)
  callHook(vm, 'created')
}

• beforeMounted之前：如图进行虚拟DOM的渲染
• mounted：递归的挂载组件及其子组件
• beforeUpdate
• update:重新渲染虚拟DOM,实现更新
• beforeDestroy:调用Vue.Prototype.$destroy，调用callHook(vm,'beforeDestroy')进入beforeDestroy，撤销挂载，销毁子组件和监听器。
• destroy销毁完毕。

注：

• activated和deactivated是钩子函数keep-alive独有。组件切换时不被销毁而是缓存到内存中执行deactivated，命中缓存后执行activated

双向数据绑定

根本上通过Object.defineProperty()结合观察者订阅者模式来实现。

• Vue通过Object.definProperty()定义数据的getter和setter方法，实现观察者模式。
• 每个Vue组件有一个watcher的实例，收集与之相关的data依赖，每当数据改变时（调用setter()）通知watcher，从而将关联的组件重新渲染。
  问题一：为什么Vue3.0使用Proxy
• 区别：Proxy代理整个对象，而Object.defineProperty()只是劫持对象的属性，需要遍历对象的所有属性。
• 性能上Proxy在JS引擎中会持续优化，而Object.defineProterty()中的setter和getter不会再优化。

路由