VUE的相关知识锦集

一.vue的生命周期(4个阶段、8个钩子函数)

第一阶段(创建阶段):beforeCreate; created 

第二阶段(挂载阶段):beforeMount; mounted

第三阶段(更新阶段):beforeUpdate; updated

第四阶段(销毁阶段):beforeDestory; destoryed

beforeCreate: 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用,在这个阶段数据获取不到,真实的dom元素还没渲染出来; 

created: 在实例创建完成后被立即同步调用,这个阶段可以访问到数据但真实dom节点还没有渲染出来,在这个钩子函数里可以进行相关初始化、绑定和发送请求。

beforeMount: 在挂载开始之前被调用;代表dom马上就要渲染出来,这个钩子函数和created函数用法基本一致,可以进行相关初始化事件的绑定和发送ajax的操作;

mounted:实例被挂载调用后,这时el被新创建的vm.el替换,数据挂载完毕,dom元素渲染完成。

beforeUpdate:在数据发生改变后,dom在更新之前被调用;这个钩子函数在初始化的时候不会执行,当组件挂载完毕,并且数据改变时,才会立马执行,这个钩子函数获取的dom内容是更新之前的;

updated:在数据更改导致虚拟dom重新渲染和更新完毕之后才被调用,当这个钩子函数被调用说明,dom组件已经更新,所以可以执行依赖于dom的操作,这个钩子函数获得的是更新内容之后生成的新的虚拟dom。

beforeDestory:实例销毁之前调用,在这一步,实例仍然完全可用,当组件销毁的时候,可以做一些善后工作如,初始化事件,相关定时器等东西;

Destoryed:实例销毁以后使用,Vue实例失去活力,完全丧失功能。

二.vue Router三种路由模式

Router三种路由模式:

1.hash:使用URL的hash值作为路由;vue的默认路由模式;支持所有浏览器;

2.history:使用History API:pushState()和replaceState()方法;HTML5之后支持;

3.abstract:支持所有javaScript运行环境;如果发现没有浏览器的API,路由会自动强制进入这个模式;

hash模式:使用window.addEventListener监听hash的变化,hash变化之后,根据这个新的hash找到相应页面更新视图;优点:后端不需要额外配置;缺点:不美观.

history模式:vue监听url改变这个事件;vue在切换页面时使用pushState(), replaceState()来修改当前的url;优点:美观;缺点:后端需要额外配置.

abstract模式:针对没有浏览器的环境,通过stack和index两个变量,模拟出浏览器的历史调用记录.

若没有特殊需求,用hash模式即可;如果路径中没有#,选择history模式;非浏览器环境,选用abstract模式.

相关推荐

  1. VUE相关知识

    2024-04-11 14:06:03       17 阅读
  2. vue相关前端知识回顾

    2024-04-11 14:06:03       7 阅读
  3. Linux系统报错

    2024-04-11 14:06:03       37 阅读
  4. Vue相关指令

    2024-04-11 14:06:03       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-11 14:06:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-11 14:06:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-11 14:06:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-11 14:06:03       20 阅读

热门阅读

  1. redis

    redis

    2024-04-11 14:06:03      12 阅读
  2. 设计模式(016)行为型之命令模式

    2024-04-11 14:06:03       10 阅读
  3. 记一次golang交叉编译的问题

    2024-04-11 14:06:03       13 阅读
  4. speech to text 库FastASR交叉编译arm target的配置

    2024-04-11 14:06:03       14 阅读
  5. MXNet详细介绍,MXNet是什么

    2024-04-11 14:06:03       14 阅读
  6. UVA839 Not so Mobile 天平 解题报告

    2024-04-11 14:06:03       13 阅读
  7. 服务器被入侵后该做些什么

    2024-04-11 14:06:03       12 阅读
  8. 动手学习深度学习(李沐)

    2024-04-11 14:06:03       12 阅读
  9. jQuery

    jQuery

    2024-04-11 14:06:03      13 阅读
  10. MySql怎样优化慢查询

    2024-04-11 14:06:03       16 阅读
  11. 深入理解MySQL中的utf8、utf8mb4和排序规则

    2024-04-11 14:06:03       13 阅读
  12. mysql 多个字段组合查询,删除重复值

    2024-04-11 14:06:03       13 阅读
  13. python矩阵相乘

    2024-04-11 14:06:03       17 阅读