10-20 钟申义 日志

10-20 钟申义 日志

vue-router怎么定义动态路由？写出怎么获取传过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上/:id

使用 router 对象的 params.id

vue-router 有哪几种导航钩子？

全局导航钩子：router.beforeEach(to,from,next)

组件内的钩子

单独路由独享组件

详尽介绍vue的各个生命周期？

beforeCreate( 创建前 )： 在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。

created ( 创建后 ）：在 created 阶段，vue 实例的数据对象 data 有了，el 还没有

beforeMount：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。

mounted：mounted 阶段，vue 实例挂载完成，data.message 成功渲染

beforeUpdate/updated：更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法

beforeDestroy：在实例销毁之前调用，实例仍然完全可用，

​ 这一步还可以用this来获取实例，
​ 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed：在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

​ （在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是dom 结构依然存在）

DOM 渲染在哪个周期中就已经完成？

mounted

什么是 vue 生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

简单描述每个周期具体适合哪些场景？

beforecreate : 可以在这加个 loading 事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到 DOM 节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

$route 和 router 的区别？

$route : 包括 path，params，hash，query，fullPath，matched，name 等路由信息参数

$router: 是路由的跳转方法，钩子函数等

心得

今天的东西不仅绕，而且快！