曲阜网站建设,綦江建站哪家正规,海南营销型网站建设,呼和浩特网络运营Vue生命周期
生命周期示意图 Vue3 组件创建阶段 new vue new一个vue的实例对象#xff1b;此时会进入组件的创建过程#xff08;该组件在代码中被注册并使用时#xff0c;就代表着其被new了一个新的实例对象#xff09;。 Init Events Lifecycle 初始化组件的事件和…Vue生命周期
生命周期示意图 Vue3 组件创建阶段 new vue new一个vue的实例对象此时会进入组件的创建过程该组件在代码中被注册并使用时就代表着其被new了一个新的实例对象。 Init Events Lifecycle 初始化组件的事件和生命周期函数当执行完这一步之后组件的生命周期函数就已经全部初始化好了等待着依次去调用。 beforeCreate 服务端渲染可用 初始化一个空的 Vue 实例组件的propsdata和methods以及页面DOM结构都还没有初始化 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。 Init injections reactivity 这个阶段中正在初始化propscomputed data和methods中的数据以及方法。 在creted之前就会行初始化 computed 和 watch created服务端渲染可用 Vue 实例初始化完成props data methods 都已初始化完成可调用。但尚未开始渲染模板。 在实例创建完成后被立即同步调用。在这一步中实例已完成对选项的处理意味着以下内容已被配置完毕数据侦听、计算属性、方法、事件/侦听器的回调函数。然而挂载阶段还没开始且 $el property 目前尚不可用。 判断是否有eltemplate然后进行编译 正在解析模板结构把data上的数据拿到并且解析执行模板结构汇总的指令当所有指令被解析完毕那么模板页面就被渲染到内存中了当模板编译完成我们的模板页面还没有挂载到页面上只是存在于内存中用户看不到页面 优先级顺序el template render el对应的HTML元素是写在网页上的。 //1、eltemplaterender(渲染函数)都是vue对象对应的HTML元素DOM对象
//2、优先级顺序el template render
//3、el对应的HTML元素是写在网页上的。HTML代码!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodydiv idappspan我今年{{age}}岁了/span/div/body
/html
script typetext/javascript srcjs/vue.min.js /script
//1、只有el
let vm new Vue({el:#app,data:{age:12}
});
2、只有template是不行的因为vue对象不知道把template放在何处
3、只有render渲染函数,也是不行的因为vue对象不知道把render后的结果放在何处
4、既有el又有template就会用template里的内容替换el的outHTML。let vm new Vue({el:#app,template:divp我template出来的年龄{{age}}/p/div,data:{age:12}
});
查看elements发现 id为app的div没有了5、既有el又有template又有render函数。就会使用render函数的内容因为它的优先级高。
// 但是此时“Mustache”语法 (双大括号)没法使用
// 因为vue只是把render函数的返回值放在HTML里而不进行再次的绑定
// render函数就是让你发挥 JavaScript 最大的编程能力。let vm new Vue({el:#app,template:divp我template出来的年龄{{age}}/p/div,data:{age:12},render:function(createElement){// return createElement(h1, 我是render出来的HTML年龄{{age}});//不能使用“Mustache”语法 (双大括号)return createElement(h1, 我是render出来的HTML年龄this.age);}
});
查看elements发现 id为app的div没有了template属性的值也没有起作用只显示了render函数的返回值。beforeMount 编译模板调用 render 函数生成 vdom 但还没有开始渲染 DOM 创建并替换 这一步把正在内存中渲染好的模板结构替换掉el属性指定的DOM元素 mounted 渲染 DOM 完成页面更新。组件创建完成开始进入运行阶段。 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作可以在 mounted 内部使用 vm.$nextTick
组件运行阶段 beforeUpdate data中的数据已经是最新的数据了。但是页面上渲染的数据还是之前的旧数据 在数据发生改变后DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它比如移除手动添加的事件监听器。 virtual DOM re-render and patch 正在根据最新的data数据重新渲染内存中的的DOM结构并把渲染好的模板结构替换到页面上 updated 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。 注意尽量不要在 updated 中继续修改数据否则可能会触发死循环。如果要相应状态改变通常最好使用计算属性或 watcher 取而代之。 注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕可以在 updated 里使用 vm.$nextTick activated/onActivated 被 keep-alive 缓存的组件激活时调用。 deactived/onDeactivated 被 keep-alive 缓存的组件停用时调用。
组件销毁阶段 beforeDestory/beforeUnmount 组件进入销毁阶段。组件即将被销毁但是还没有真正开始销毁此时组件还是正常可用的data、methods等数据或方法依旧可以被正常访问。 卸载组件实例后调用在这个阶段实例仍然是完全正常的。 移除、解绑一些全局事件、自定义事件可以在此时操作。 销毁过程 销毁组件的数据侦听器子组件事件监听 destoryed/unmounted 卸载组件实例后调用。调用此钩子时组件实例的所有指令都被解除绑定所有事件侦听器都被移除所有子组件实例被卸载。
2.5.0新增errorCaptured 类型(err: Error, vm: Component, info: string) ?boolean 详细 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 当捕获一个来自子孙组件的错误时被调用 如何正确的操作 DOM
mounted 和 updated 都不会保证所有子组件都挂载完成如果想等待所有视图都渲染完成需要使用 $nextTick
mounted() {this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码})
}ajax 放在哪个生命周期合适
一般有两个选择created 和 mounted 建议选择后者 mounted 。
执行速度
从理论上来说放在 created 确实会快一些但 ajax 是网络请求其时间是主要的影响因素。从 created 到 mounted 是 JS 执行速度非常快。所以两者在执行速度上不会有肉眼可见的差距
代码的阅读和理解
放在 created 却会带来一些沟通和理解成本从代码的执行上来看它会一边执行组件渲染一边触发网络请求并行放在 mounted 就是等待 DOM 渲染完成再执行网络请求串行好理解
所以综合来看更建议选择 mounted 。
Composition API 生命周期有何不同
setup 代替了 beforeCreate 和 created生命周期换成了函数的形式如 mounted - onMounted 参考 https://v3.cn.vuejs.org/api/composition-api.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
import { onUpdated, onMounted } from vueexport default {setup() {onMounted(() {console.log(mounted)})onUpdated(() {console.log(updated)})}
}computed 初始化在什么时候
propsmethods,data和computedwatch的初始化都是在beforeCreated和created之间完成的
watchimmediate为true触发时机
immediate如果为true, 也是发生在beforeCreate 之后created之前
父子组件的生命周期顺序
加载渲染过程
父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
子组件更新过程:
父beforeUpdate-子beforeUpdate-子updated-父updated
父组件更新过程:
父beforeUpdate-父updated
销毁过程:
父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
父子组件及mixin的生命周期执行顺序:
mixin的beforeCreate 父beforeCreate mixin的created 父created mixin的beforeMount 父beforeMount 子beforeCreate 子created 子beforeMount 子mounted mixin的mounted 父mounted templatedivdiv refdiv父组件/divinput typetext v-modelmsgdiv{{newMsg}}/divhrchild :msgmsg/child/div
/templatescript
import Child from ./Child.vue
export default {name: ParentDemo,components: {Child},data() {return {msg: 父组件的数据}},beforeCreate() {console.log(父beforeCreate, this.msg)},created() {console.log(父created, this.msg)},beforeMount() {console.log(父beforeMount, this.$refs.div)},mounted() {console.log(父mounted, this.$refs.div)},beforeUpdate() {console.log(父beforeUpdate, this.$refs.div.innerHTML)},updated() {console.log(父updated, this.$refs.div.innerHTML)},activated() {console.log(父activated)},deactivated() {console.log(父deactivated)},beforeDestroy() {console.log(父beforeDestroy)},destroyed() {console.log(父destroyed)},errorCaptured() {console.log(父errorCaptured)},computed: {newMsg() {return this.msg computed}},watch: {msg: {handler(newVal, oldVal) {console.log(父watch, newVal, oldVal)},immediate: true}}
}
/scriptChild.vue
templatedivdiv子组件/divp父组件传递过来的数据:{{msg}}/p/div
/templatescript
export default {name: ChildDemo,props: [msg],beforeCreate() {// 这里获取不到this.msg获取会报错console.log(子beforeCreate)},created() {console.log(子created, this.msg)},beforeMount() {console.log(子beforeMount)},mounted() {console.log(子mounted)},beforeUpdate() {console.log(子beforeUpdate)},updated() {console.log(子updated)},activated() {console.log(子activated)},deactivated() {console.log(子deactivated)},beforeDestroy() {console.log(子beforeDestroy)},destroyed() {console.log(子destroyed)},errorCaptured() {console.log(子errorCaptured)}
}
/script上源码 beforeCreate-created之间做的事 injectstate (propsmethodscomputedwatched)provide vue/src/core/instance init.ts inject.ts state.ts inject.ts 参考文章 vue 自省知识点——生命周期 Vue中的computed是在生命周期的哪个阶段执行的 Vue组件的生命周期 vue中el属性… vue2最重要的还是官网啊啊啊 vue3官网相关解释
