## Vue 生命周期
1） new Vue()
2） 初始化（事件，生命周期） => h函数
3） beforeCreate
4） 初始化（注入，校验）
5） created
6） 是否指定 el 选项 => 没设定的话调用 vm.$mounted(el) 函数
=> 设定的话是否指定 template
7） template => 指定了就讲 template 编译到 render 函数中
=> 没设定就将 el的外部HTML作为 template 编译
8） beforeMount
9） 创建 vm.$el 并用其替换 "el"
10）mounted
11）挂载完毕
12）当data被修改时，虚拟DOM重新渲染并更新应用beforeUpdate，Updated
13）当调用 vm.$destory() 函数时
14）beforeDestroy
15）解除绑定销毁子组件及事件监听
16）destoryed
17）销毁完毕
## Vue 语法和概念
- 差值表达式 { {}}
- 指令（14 个）
- 计算属性和侦听器
- Class 和 Style 绑定
- 条件渲染 / 列表渲染
- 表单输入绑定
- 组件
- 插槽
- 插件
- 混入 mixin
- 深入响应式原理
- 不同构建版本的 Vue
## Vue Router 回顾
- 注册路由插件 Vue.use(VueRouter)
- 路由规则
const routes = [
{
path: '/detail/:id',
name: 'Detail',
// 开启 props，会把 URL 中的参数传递给组件
// 在组件中通过 props 来接收 URL 参数
props: true,
component: () => import(/_ webpackChunkName: "detail" _/ '../views/Detail.vue')
},
export default {
name: 'Detail',
props: ['id']
}- 嵌套路由
{
path: '/',
component: Layout,
children: [
{
name: 'index',
path: '',
component: Index
},
{
name: 'detail',
path: 'detail/:id',
props: true,
component: () => import('@/views/Detail.vue')
}
]
}- 编程式导航
this.$router.push("/");
this.$router.push({name:name});
this.$router.replace("/");不会记入历史
this.$router.go(-1) == this.$router.back();
- Hash 模式与 history 模式的区别
1） HASH模式是基于锚点，以及onhashchange事件
2） histroy模式是基于HTML5中的History API（有兼容性问题）
- history.pushState()
- history.replaceState()