vue的生命周期

内容回顾：
   -- ES6常用语法
       -- var let const
       -- 模板字符串
           -- 反引号
           -- ${}
       -- 箭头函数
           -- 普通函数取决于函数最近的调用者
           -- 箭头函数取决当前环境
       -- 类
           -- class定义类
           -- constructor
           -- extends super()
       -- 数据的解构
   -- Vue的常用指令
       -- v-for
       -- v-if
       -- v-show
       -- v-bind
       -- v-on
       -- v-model
       -- v-text
       -- v-html
       -- 指令的修饰符
           -- .number
           -- .lazy
           -- .trim
       -- 自定义指令
           -- Vue.directive("指令名称", function(el, bindding))
           -- el绑定指令的元素
           -- bindding放指令相关所有信息的对象
               -- bindding.value 指令的值
               -- bindding.modifiers 指令修饰符
       -- 获取DOM
           -- 给标签元素绑定ref属性
           -- this.$refs.属性值
       -- 计算属性
           -- computed
               -- 放入缓存
               -- 只有数据改变的时候才会重新计算
   -- 组件
       -- 全局注册
           -- Vue.component("组件的名称"，{})
           -- 所有的vue实例对象都可以用
       -- 局部注册
           -- 注册到Vue实例对象里
           -- 注册到哪个实例哪个实例可以用
       -- 子组件注册
           -- 注册到父组件里 components
       -- 父子组件通信
           -- 在父组件中给子组件绑定属性<child :xxx="~~~"></child>
           -- 子组件props：["xxx"]
       -- 子父组件通信
           -- 子组件要提交事件 this.$emit("事件名称"， data)
           -- 在父组件中给子组件绑定事件<child @xxx="~~~"></child>
       -- 非父子组件通信
           -- 中间调度器 let event = new Vue()
           -- 其中一个组件 event.$emit("事件名称"， data)
           -- 另一个组件mounted中 event.$on("事件名称"，function(data){})
       -- 混合
           -- 代码封装
           -- mixins: ["xxx"]
       -- 插槽
           -- 给我们组件做内容分发
   -- 路由
       -- 路由的注册
           -- 定义路由规则对象每个路由对应的组件
               -- let routes = [
                       {
                           path:"/",
                           component: {}
                       }
                   ]
           -- 实例化VueRouter对象并且把路由规则对象注册到里面
               -- let router = new VueRouter({
                   routes: routes
                   })
           -- 把VueRouter实例化对象注册到Vue实例对象里
               -- const app = new Vue({
                   el: "#app",
                   router: router
               })
           -- 在<div id="app"></div>里
               -- router-link
               -- router-view
       -- 参数
           -- this.$route.params.xxx
               -- /user/:xxx
           -- this.$route.query.xxx
               -- /user/:xxx?age=1
       -- 命名
           -- 给路由添加name属性
           -- :to="{name:'xxx',params:{},query:{}}"
       -- 路由视图的命名
           -- 我们路由可以对应多个组件
           -- router-view 有name属性值是我们组件名称
       -- 子路由
           -- children：[]
           -- 在父路由对应的组件里写router-link 以及router-view
       -- 手动路由
           -- this.$router.push("路由")
       -- $route以及$router区别
           -- $route 当前路由的所有信息 path fullpath meta params query
           -- $router 是VueRouter对象
       -- 路由的钩子函数
           -- router.beforeEach(function(to, from, next){})
               -- to 你要去哪
               -- from 你从哪里来
               -- next 方法
                   -- 必须执行
                   -- 路由正常跳转 next()
                   -- 跳转到指定路由 next("path")
            -- router.afterEach(function(to, from){})

vue生命周期简介：

那么执行顺序以及什么时候执行，我们上代码来看~~~

生命周期中的钩子函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <hr>
    {{list}}
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'yangbo',
            list:[1,2]
        },
        methods:{
            init:function () {
                console.log('bbbbbbb')
            }
        },
        beforeCreate(){
            console.group("BeforeCreate**************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        created(){
            console.group("Created**************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        beforeMount(){
            console.group("BeforeMount**************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        mounted(){
            console.group("mounted**************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        beforeUpdate(){
            console.group("BeforeUpdate*************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        updated(){
            console.group("Update*************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        beforeDestroy(){
            console.group("BeforeDestroy*************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },
        destroyed(){
            console.group("Destroy*************")
            console.log("el:", this.$el)
            console.log("data:", this.$data)
            console.log("name:", this.name)
            console.log("init:", this.init)
        },

    })
</script>
</body>
</html>

create 和 mounted 相关

执行上面代码，可以看到：

　　beforecreated ：el 和 data 并未初始化

　　created：完成了data数据的初始化 el 没有

　　beforeMount：完成了el 和 data的初始化

　　mounted：完成了加载

也就是说~加载前的状态是虚拟DOM技术，先把坑站住了~加载之后才真正的把值渲染进去~

update 相关

我们在浏览器console里执行命令：

　　app.name = "hello~"

我们就出发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

destroy 相关

我们在浏览器console里执行命令：

　　app.$destroy();

触发了destroy相关的钩子函数，也就是说组件被销毁~

更改信息的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~