computeddatawatch区分

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

组件通信

  1. 父子组件
  • propsevent
    通过props向下传递,通过event向上传递
  • v-model
    双向绑定,v-bindv-on的语法糖
  • $emit$on
    父子组件通过发送事件和事件监听传递
  • $refs
    为组件注册ID引用,根据ID引用获取组件的实例
    注:$refs并非响应式,只能获取获取时间节点的状态
  • $parent$children
    缺点在于不能定位父组件的变化点
  1. 非父子通信
  • provideinject
    最高层组件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销毁完毕。

注:

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

Vue生命周期

双向数据绑定

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

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

路由

Logo

前往低代码交流专区

更多推荐