vue的生命周期钩子

生命周期过程：

new vue() ：vue实例进行初始化，读取所有生命周期函数，并没有执行（不会调用）

beforeCreate()：创建前，读取属性，计算属性，添加set/get，读取watch

created() ： 创建完成，可以操作数据（ajax），判断是否有el配置/被调用了$mount()，判断是否存在el配置/$mount作用的dom结构

beforeMount() ： 将dom结构读取出来，渲染dom结构（挂载的过程）

mounted() ： 可以操作dom了，可以使用ref了

跟用户交互、操作数据，在vue工作期间发生了数据变化，数据变化导致dom需要重新渲染，下面两个更新生命周期的方法指的是dom的更新：

beforeUpdate()

updated()

直到执行了$destory()，或者dom结构不在了，vue实例就会销毁

beforeDestory()

distoryed()

vm.$mount() ： 挂载vm实例（vm实例作用在dom结构上）

vm.$destory() ： 销毁实例和dom的关联，不提倡手动调用$destory

         var vm = new Vue({
                 el: '#app',
                 data: {
                      msg: 'hello world',
                      arr: ['item1', 'item2', 'item3'],
                      obj: {
                          name: 'zhangsan'
                      }
                 },
                 computed: {
                      len(){
                          return this.msg.length;
                      }
                 },
                 watch: {
                      msg(newVal, oldVal){
                          console.log('监听到了msg的变化');
                     },
                      arr(){
                          console.log('监听到了arr的变化');
                      }
                 },
                 methods: {
                      test(){
                          console.log('test执行了');
                      },
                      btnAction(){
                          this.$destroy();
                      },
                      btn2Action(){
                          //强制更新dom
                          this.$forceUpdate();
                      },
                      btn3Action(){
                          this.msg = 'hello vue';
                      },
                      btn4Action(){
                          this.arr.push('item4');
                          //监听一个属性发生变化导致的dom的更新。
                          //写$nextTick要求是，数据变化后的代码紧接着写$nextTick
                          this.$nextTick(()=>{
                               console.log('dom也变化了');
                          });
                      }
                 },
                 //生命周期函数
                 //创建前
                 beforeCreate(){
                     console.log('beforeCreate.....');
                      console.log(this.msg);
                 },
                 //创建完成，ajax,操作数据
                 created(){
                      console.log('created....');
                      console.log(this.len);
                      this.test();
                 },
                 beforeMount(){
                     console.log('beforeMount....');
                     console.log(this.$refs);
                 },
                 mounted(){
                      console.log('mounted....');
                     console.log(this.$refs);
                 },
                 beforeUpdate(){
                     console.log('beforeUpdate....');
                 },
                 updated(){
                      console.log('updated....');
                 },
                 beforeDestroy(){
                     console.log('beforeDestroy....');
                 },
                 destroyed(){
                      console.log('destroyed....');
                 }
             })