computed、data、watch区分
computed是依赖于其他属性的计算属性,当其他值发生变化时computed才会做出响应。data是每个Vue实例返回的独立拷贝方法watch用于监听某个值的变化以做出响应。
组件通信
- 父子组件
props和event
通过props向下传递,通过event向上传递v-model
双向绑定,v-bind和v-on的语法糖$emit和$on
父子组件通过发送事件和事件监听传递$refs
为组件注册ID引用,根据ID引用获取组件的实例
注:$refs并非响应式,只能获取获取时间节点的状态$parent和$children
缺点在于不能定位父组件的变化点
- 非父子通信
provide和inject
最高层组件provide,低层inject- 访问跟实例
$root - 通过
$attrs和$listeners
中间组件通过$attrs和$listeners获取属性和监听事件 eventBus
在两个需要通信的组件中引入同一组件使用$emit和$onVuex
生命周期分析
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:递归的挂载组件及其子组件beforeUpdateupdate:重新渲染虚拟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不会再优化。
本文深入解析Vue.js中的computed、data、watch等关键特性,阐述组件通信方式,包括props、event、v-model及非父子组件间的通信策略。同时,详细分析Vue的生命周期,从newVue()开始,直至组件销毁,涵盖beforeCreate、created、beforeMounted、mounted等阶段。最后,揭示Vue双向数据绑定的底层原理及Vue3.0采用Proxy的原因。
413

被折叠的 条评论
为什么被折叠?



