vue2知识整理

vue2知识整理

生命周期

1.beforeCreate ----创建前 beforeCreate 是new Vue的第一个钩子函数，一个组件的生命开始，在这里data，compute，methods以及watch上的数据和方法都是不能被访问的
2.created -----创建完成 created在这里数据已完成观测，可以使用数据，更改数据，在这里更改数据不会触发updated函数
3.beforemount -----挂载前
beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
4.mounted -----挂载完成
5.beforeupdate ------更新前
6.updated ----更新完成
7.beforedestory —销毁前
8.destoryed ----销毁完成

vue常用指令

v-text，v-html，v-model，v-if，v-for，v-on，v-bind，v-show，v-slot，v-once

vue Router的钩子函数

路由钩子的执行流程, 钩子函数种类有:全局守卫、路由守卫、组件守卫

1.全局钩子2个
beforeEach和aftrEach,
beforeEach函数有三个参数：

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不用传next()函数
这类钩子主要作用于全局,一般用来判断权限等操作

2.单个路由里面的钩子2个
beforeEnter，beforeleave
主要用于写某个指定路由跳转时需要执行的逻辑,
3.组件路由钩子3个

beforeRouteEnter，beforeRouteUpdate,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),

Vue 的父组件和子组件生命周期钩子函数执行顺序

1.加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
2.子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
3.父组件更新过程
父 beforeUpdate -> 父 updated
4.销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

v-model原理

1.v-model只是一个语法糖，是v-bind数据绑定和v-on处理数据的语法糖，使用 v-bind 获取 value， v-on 绑定 input 触发事件