1.Vue2源码解析?码执2?初始化
2.vue中created、beforeMount、行顺序mounted、码执computed、行顺序watch、码执methods区别与执行顺序
3.v-if和v-for哪个优先级更高
4.父子组件的行顺序领航源码头生命周期顺序原因?
Vue2源码解析?2?初始化
活着,最有意义的码执事情,就是行顺序不遗余力地提升自己的认知,拓展自己的码执认知边界。在搭建源码调试环境一节中,行顺序我们已经找到了Vue的码执构造函数,接下来开始探索Vue初始化的行顺序流程。
一个小测试在精读源码之前,码执我们可以在一些重要的行顺序方法内打印一下日志,熟悉一下这些关键节点的码执执行顺序。(执行npmrundev后,源码变更后会自动生成新的Vue.js,我们的测试html只需要刷新即可)
在初始化之前,Vue类的构建过程?在此过程中,大部分都是原型方法和属性,意味着实例vm可以直接调用
注意事项:
1、以$为前缀的属性和方法,在调用_init原型方法的程序员该阅读哪些源码书籍那一刻即可使用
2、以_为前缀的原型方法和属性,谨慎使用
3、本章旨在了解Vue为我们提供了哪些工具(用到时,深入研究,不必要在开始时花过多精力,后边遇到时会详细说明)
4、类方法和属性在newVue()前后都可以使用,原型方法和属性只能在newVue()后使用
定义构造函数//src/core/instance/index.jsfunctionVue(options){ //形式上很简单,就是一个_init方法this._init(options)}挂载原型方法:_init//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }挂载与state相关的原型属性和原型方法//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}挂载与事件相关的原型方法//src/core/instance/events.jsconsthookRE=/^hook:/Vue.prototype.$on=function(event:string|Array<string>,fn:Function):Component{ }Vue.prototype.$once=function(event:string,fn:Function):Component{ }Vue.prototype.$off=function(event?:string|Array<string>,fn?:Function):Component{ }Vue.prototype.$emit=function(event:string):Component{ }挂载与生命周期相关的原型方法//src/core/instance/lifecycle.jsVue.prototype._update=function(vnode:VNode,hydrating?:boolean){ }Vue.prototype.$forceUpdate=function(){ }Vue.prototype.$destroy=function(){ }挂载与渲染相关的原型方法//installruntimeconveniencehelpersinstallRenderHelpers(Vue.prototype)Vue.prototype.$nextTick=function(fn:Function){ }Vue.prototype._render=function():VNode{ }挂载Vue类方法和类属性//src/core/global-api/index.js//configconstconfigDef={ }configDef.get=()=>configObject.defineProperty(Vue,'config',configDef)Vue.util={ warn,extend,mergeOptions,defineReactive}Vue.set=setVue.delete=delVue.nextTick=nextTick//2.6explicitobservableAPIVue.observable=<T>(obj:T):T=>{ observe(obj)returnobj}Vue.options=Object.create(null)ASSET_TYPES.forEach(type=>{ Vue.options[type+'s']=Object.create(null)})Vue.options._base=Vueextend(Vue.options.components,builtInComponents)initUse(Vue)//挂载类方法use,用于安装插件(特别特别重要)initMixin(Vue)//挂载类方法mixin,用于全局混入(在Vue3中被新特性取代)initExtend(Vue)//实现Vue.extend函数initAssetRegisters(Vue)//实现Vue.component,Vue.directive,Vue.filter函数挂载平台相关的属性,挂载原型方法$mount//src/platforms/web/runtime/index.js//installplatformspecificutilsVue.config.mustUseProp=mustUsePropVue.config.isReservedTag=isReservedTagVue.config.isReservedAttr=isReservedAttrVue.config.getTagNamespace=getTagNamespaceVue.config.isUnknownElement=isUnknownElement//installplatformruntimedirectives&componentsextend(Vue.options.directives,platformDirectives)extend(Vue.options.components,platformComponents)//installplatformpatchfunctionVue.prototype.__patch__=inBrowser?patch:noopconsole.log('挂载$mount方法')//publicmountmethodVue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{ }拓展$mount方法//src/platforms/web/entry-runtime-with-compiler.jsconstmount=Vue.prototype.$mount//保存之前定义的$mount方法Vue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{ //执行拓展内容returnmount.call(this,el,hydrating)//执行最初定义的$mount方法}Vue的初始化过程(很重要哦!!!)熟悉了初始化过程,就会对不同阶段挂载的实例属性了然于胸,了解Vue是如何处理options中的数据,将初始化流程抽象成一个模型,从此,当你看到用户编写的options选项,都可以在这个模型中演练。
前边我们提到过,产品二维码防伪源码Vue的构造函数中只调用了一个_init方法
执行_init方法//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ constvm:Component=this//此刻,Vue的实例已经创建,只是雏形,但Vue的所有原型方法可以调用//aflagtoavoidthisbeingobserved//(observe会在后面的响应式章节详细说明)vm._isVue=true//mergeoptionsif(options&&options._isComponent){ //在后面的Vue组件章节会详细说明//optimizeinternalcomponentinstantiation//sincedynamicoptionsmergingisprettyslow,andnoneofthe//internalcomponentoptionsneedsspecialtreatment.initInternalComponent(vm,options)}else{ vm.$options=mergeOptions(//合并optionsresolveConstructorOptions(vm.constructor),//主要处理包含继承关系的实例()options||{ },vm)}//exposerealselfvm._self=vminitLifecycle(vm)//初始化实例中与生命周期相关的属性initEvents(vm)//处理父组件传递的事件和回调initRender(vm)//初始化与渲染相关的实例属性callHook(vm,'beforeCreate')//调用beforeCreate钩子,即执行beforeCreate中的代码(用户编写)initInjections(vm)//resolveinjectionsbeforedata/props获取注入数据initState(vm)//初始化props、methods、data、computed、watchinitProvide(vm)//resolveprovideafterdata/props提供数据注入callHook(vm,'created')//执行钩子created中的代码(用户编写)if(vm.$options.el){ //DOM容器(通常是指定id的div)vm.$mount(vm.$options.el)//将虚拟DOM转换成真实DOM,然后插入到DOM容器内}}initLifecycle:初始化与生命周期相关的实例属性//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }0initEvents(vm):处理父组件传递的事件和回调//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }1initRender(vm):初始化与渲染相关的实例属性//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }2CallHook(vm,'beforeCreate'):执行beforeCreate钩子执行options中,用户编写在beforeCreate中的代码
//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }3initInjections(vm):resolveinjectionsbeforedata/props获取注入数据//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }4initState(vm):初始化props、methods、data、computed、watch(划重点啦!!!)//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }5initProps:初始化props此处概念比较多,propsData、props、vm._props、propsOptions,妖股异动主图指标公式源码后续会结合实例来分析其区别,此处只做大概了解。
//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }6initMethods:初始化methods//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }7initData:初始化data//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }8initComputed:初始化computed选项//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }9initWatch:初始化watchcreateWatcher:本质上执行了vm.$watch(expOrFn,handler,options)
//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}0initProvide(vm):提供数据注入为什么provide初始化滞后与inject,后续补充
//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}1CallHook(vm,'created'):执行created钩子中的代码callHook的相关逻辑,参考上面的callHook(vm,'beforeCreate')
执行挂载执行$mount扩展通过下面的代码可知:当用户代码中同时包含render,template,el时,它们的优先级依次为:render、template、el
//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}2$mount方法中,首先获取挂载容器,然后执行mountComponent方法
//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}3//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}4在_update方法中,通过_vnode属性判断是否初次渲染,patch其实就是patch方法,关于patch的详细逻辑,将在diff算法章节详细说明。
//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}5原文:/post/vue中created、beforeMount、mounted、computed、watch、methods区别与执行顺序
Vue.js中不同生命周期钩子函数与计算属性computed、h5修仙挂机手游源码watch器、方法methods的区别与执行顺序是前端开发者需要清晰掌握的知识点。以下内容将详细阐述这些概念及其执行流程。
created函数执行时,页面挂载阶段尚未开始,模版尚未渲染为html。此阶段主要用于初始化数据,无法获取元素。
beforeMount函数执行时,模版已经在内存中被编译,但尚未挂载到页面中。此阶段关注于数据准备。
computed属性在DOM渲染完成后立即执行,通常用于基于其他数据属性计算出新值。
mounted函数在模版渲染完成后被调用,此时DOM操作可以进行。常用于发起后端请求并处理数据。
watch器用于监控Vue实例上数据的变化,但默认情况下,Vue会先执行计算属性computed,再执行watch器。
methods是具有特定触发条件(如click事件)的函数,应定义在methods对象中,通过this调用实现初始化。
注意:当设置watch器的immediate属性为true时,其优先级会提升到最前面,但Vue仍遵循先执行计算属性后执行watch器的原则。
了解计算属性实现原理有助于优化代码逻辑与性能。深入了解Vue.js的生命周期与数据响应机制,对于提高前端开发效率至关重要。
v-if和v-for哪个优先级更高
在Vue 2中,v-for的执行顺序高于v-if,即它会先进行循环,遍历数据,然后再根据v-if的条件决定是否渲染当前项。这种设计可能导致不必要的元素渲染,影响性能。
相比之下,Vue 3的执行逻辑有所变化。在Vue 3中,v-if的优先级高于v-for,这意味着在渲染阶段,会先进行条件判断,只有当条件满足时,才会进行循环和渲染。这种优化减少了不必要的渲染步骤,提升了性能。
理解这两种指令的优先级差异对于优化Vue应用的渲染效率至关重要。在实际开发中,应根据需求合理使用v-if和v-for,以达到最佳的视图更新效果。
虽然版本更新带来了这种优先级的调整,但具体情况可能会因Vue版本和编译器优化策略的不同而有所变化。因此,确保对当前项目的Vue版本有深入理解,是编写高效代码的关键。
视频教程可以提供更深入的解释和实例,帮助你更好地掌握这两种指令的使用技巧。如果你需要进一步学习,可以查找相关的教学资源,如官方文档或开发者社区分享的教程。
父子组件的生命周期顺序原因?
Vue父子组件生命周期执行顺序
vue2中执行顺序:
beforeCreate=created=beforeMount=mounted=beforeUpdate=updated=beforeDestroy=destroyed
vue3中执行顺序setup=onBeforeMount=onMounted=onBeforeUpdate=onUpdated=onBeforeUnmount=onUnmounted
对应关系
vue2-vue3
执尺纳激行顺序为:
父beforeCreate=陵袜父created=父beforeMount=子beforeCreate=子created=子beforeMount=子mounted=父mounted
执行顺序为:
父beforeUpdate=子beforeUpdate=子updated=父updated
执行顺序为:
父beforeDestroy=茄粗子beforeDestroy=子destroyed=父destroyed
规律就是:父组件先开始执行,然后等到子组件执行完,父组件收尾。
react父子组件生命周期执行顺序React的生命周期从广义上分为三个阶段:挂载、渲染、卸载,因此可以把React的生命周期分为两类:挂载卸载过程和更新过程。
一、挂载卸载过程
1.constructor,完成了React数据的初始化;
2.componentWillMount,组件初始化数据后,但是还未渲染DOM前;
3.componentDidMount,组件第一次渲染完成,此时dom节点已经生成;
4.componentWillUnmount,组件的卸载和数据的销毁。
二、更新过程
1.componentWillReceiveProps?(nextProps),父组件改变后的props需要重新渲染组件时;
2.shouldComponentUpdate(nextProps,nextState),主要用于性能优化(部分更新),因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,在这里returnfalse可以阻止组件的更新穗弯余;
3.componentWillUpdate(nextProps,nextState),shouldComponentUpdate返回true后,组件进入重新渲染的流程;
4.componentDidUpdate(prevProps,prevState),组件更新完毕后触发;
5.render(),渲染时触发。
三、父子组件加载顺序
观察父子组件的挂载生命周期函数,可以发现挂载时,子组件的挂载钩子先被触发猜滚;卸载时,子组件的卸载钩子后被触发。
我们经常在挂载函数上注册监听器,说明此时是可以与页面交互的,也就是说其实所有挂载钩子都是在父组件实际挂载到dom树上才触发的,不过是在父组件挂载后依次触发子组件的componentDidmount,最后再触发自身的挂载钩子,说白了,componentDidMount其实是异步钩子。
相反,卸载的时候父节点先被移除,再从上至下依次触发子组闹镇件的卸载钩子;
但是我们也经常在卸载钩子上卸载监听器,这说明?componentWillUnmount其实在父组件从dom树上卸载前触发的,先触发自身的卸载钩子,但此时并未从dom树上剥离,然后依次尝试触发所有子组件的卸载钩子,最后,父组件从dom树上完成实际卸载。
Vue中父子组件生命周期的执行顺序
同步引入时生命拆首周期顺序为:
父组件的beforeCreate、created、beforeMount--所有子组件的beforeCreate、created、beforeMount--所有子组件的mounted--父组件的mounted
总结:父组件先创建,然后子组蔽御告件创建;子组件先挂载,然后父组件挂载
若有孙组件呢?
父组件先beforeCreate=created=beforeMount,然后子组件开始beforeCreate=created=beforeMount,然后孙组件beforeCreate=created=beforeMount=mounted,孙组件挂载完成了,子组件mounted,父组件再mounted
异步引入时生宏明命周期顺序为:
父组件的beforeCreate、created、beforeMount、mounted--子组件的beforeCreate、created、beforeMount、mounted
总结:父组件创建,父组件挂载;子组件创建,子组件挂载。
3.父组件更新过程
父beforeUpdate-父updated
4.销毁过程
父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
原文: