vue组件的生命周期和动态组件路由

生命周期的钩子函数(11,8,2,1)

生命周期的创建：
生命周期的执行速度要快于网络请求
1，创建：
创建前：beforecreate ,创建之间有this，无数据，无dom可以用作网络请求
创建后：created,没有dom数据，可用做网络请求，也可用作网络修改
2，挂载：
挂载前：beformMount，没有dom，有数据，可用作网络请求，修改数据
挂在后：mounted ,有dom,有数据，可用于dom的初始化操作
3，更新：
更新前：beformupdate,获取的dom是修改之前的，只有数据发生修改时才会触发
更新后：updated,在数据发生改变时触发，获取的dom是更新后的，可以用作数据的监听，要基于数据的修改，不能使用随机数，更新的生命周期中注意赋值的操作，会导致死循环。
4，销毁：
销毁前：beforDestroy,销毁前有dom元素，全局事件监听，或者计时器
销毁后：destroyed,销毁后无dom元素

动态组件(is属性)

<component :is='state?"组件1":"组件2"'></component>

属性绑定is,当state为真时显示组件1，否显示组件2；使用任意标签都可以使用<component>是为了语义化。使用动态组件主要是为了两个组件间的切换，但是多个组件间的切换就比较麻烦，可以使用路由来实现多组件间的切换。

问题：生命周期的执行速度要快于网络请求的速度
解决：在生命周期创建时写入this.$nextTick(()=>{this.实例方法中的属性()}),这个解决的办法是指上一次的数据修改引起的dom更新，结束后在执行回调。

过滤器：

例如：不同的页面显示时间的格式可能不同：2019-12-12；2019/12/12；2019:12:12
作用：过滤器的作用是对传入的数据进行处理，可以分为全局过滤器和局部过滤器
1.全局过滤器：vue.filter('name',处理函数)
2.局部过滤器：

{
  template:'',
  components:'',
  filter:{
    'name':()=>{
      }
    }
}

注意：无论是那种的过滤器都要注意返回数据
例子：

html:
<div id="app">
  {{item}}
  <hr />
  {{item|hehe}}
  <hr />
  {{item|hehe('/')}}
 <hr />
  {{item|hehe('-')}}
</div>
js:
new vue({
  el:"#app",
  data:{
    time:(new Data().getTime())
    },
filter:{
  'hehe':(data,tag)=>{
      var tag=tag||'.'
      let y=(new Date(data)).getFullYear()
       let m=(new Date(data)).getMonth()
       let d=(new Date(data)).getDate()
      return `${y}${tag}${m}${tag}${d}`
      }
    }
  })

watch监听

作用：监听某一数据的改变；与生命周期相似。update是一个数据改变全部都改变，而watch则是监听某一个具体的数据改变
watch监听中的dom都是修改之前的(this.$nextTick(()=>{this.组件}))

计算属性computed

作用：可以与data中的数据进行关联，得到一个新的数据
computed:{double(){return this.数据*2}}
注意点:计算属性的缓存性：只有当关联的数据发生改变了才会重新计算

路由

分为历史路由和hash路由
路由主要是监听地址栏的改变，所以在创建路由对象时应写一个routers:[]数组，在数组中写一个或者多个对象，{path:"/路径"，component:组件名}；path表示的是路径，而component则是这个路径时显示的组件。要显示的组件需要提前引入：import 组件名 from :"文件路径"
完成路由的配置时需要在实例中注册这个路由
实例中引入：import router from "路径" //XXX.js可以忽略
实例中写一个router完成配置
根组件中使用<router-link to="地址页面"></router-link>控制地址栏的改变类似于a标签。
<router-view></router-view>相当于一个容器，渲染组件。可以指定用什么标签，在后面加上tag='标签'属性即可，如果在后面加上active-class='类名'是指的给当前活跃的标签加类名。
配置路由表：
1.引入vue----------import vue from 'vue'
2.引入路由----------import Router from 'vue-router'
3.在vue中使用路由----------vue.use(Router)
4.创建路由对象----------let router=new Router({})

5.抛出路由----------export default router
在组件中使用export default {}进行组件的导出
实例中注册路由
1.实例中引入：import router from '路由路径'，XXX.js可以省略
2.实例中写入router完成配置
根组件中使用 <router-link to:地址>页面1</router-link>来控制地址栏的改变

路由选中高亮
const router=new VueRouter({
  routers,
  // linkActiveClass:'active'    这是对选中的当前路由起一个class名，对应的页面设置相应的样式，就可以实现路由选中高亮的效果
})

html5中的历史模式：在地址栏中"/"后面的是hash模式，如果需要改变可以在路由文件中写入一个mode:'hash'或者history即可，一般情况下是默认的hash模式，如果要使用history有一个bug，页面在上线的时候不能刷线页面会导致页面404，需要后端支持

重定向和别名：在路由文件的routes数组中加入一个对象{path:'/',redirect:'/首页路由文件'}，表示页面重定向，输入端口号即是首页

动态路由：在router数组的对象路径path:/路径/:变量,是指在单独输入路径时不会到指定的页面，但是当路径后输入任意的变量时就能到达指定的页面，在目标组件中可以通过this.$router获取变量的参数

声明式导航与编程式导航：
1.声明式 ：<a href=''> <router-link>使用标签的
2.编程式导航(设置返回的路由跳转)：window.history.push(),this.$router.push('./xxx'),this.router.replace,this.$router.go(数值可以为正数或者负数表示前进或者后退)；push与replace的区别主要是当页面从a-->b-->c-->d时，点击后退按钮push会一级一级的返回，但是replace则是页面栈中替换回到a。

命名路由

在路由表起一个名字，可以通过名字进行跳转，在单文件组件中使用时：this.$router.push({name:'xxx'})
路由的名字跳转。在路由中通过name声明this.$router.push({name:'路由名字'})
路由传参（1.动态路由2.jquery3.params）
this.$router.push({name:'rank',query:{us:123,ps:123}})
this.$router.push({name:'rank',params:{us:123,ps:123}})
注意:使用path进行路径跳转的时候后面不能使用params传递参数
query接收：通过this.$router.query
params接收：通过this.$router.params

嵌套路由

1.引入被嵌套的组件：import 组件名 from '路径'
2.在export default中注册组件：component:{组件名}
3.把组件名当作标签嵌套在父组件中
4.想在哪一个组件中使用，就在那一个组件中放入<router-view>
5.在路由表中对需要嵌套的路由加入children:[{}]数组，形成次级路由，在次级路由中的path路径不要加"/"