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模式.