vue进阶三生命周期和之特性

一、vue生命周期

    beforeCreate(){
           console.log("组件创建之前",this.$data);
         },
         created(){
           //非常重要的事情，在这里发送ajax，请求到后端的数据。一般初始化页面渲染的时候会用到。
             console.log("组件创建完成",this.$data);
          },
          // 即将挂载的时候使用
          beforeMount(){
            console.log("DOM挂载之前",document.getElementById("app"));
          },
          /* 发送ajax。不针对于需要等某个元素加载完成的话，还是建议用created */
          mounted(){
            console.log("DOM挂载完成",document.getElementById("app"));
          },
          //更新之前的DOM。
          beforeUpdate(){
            console.log("更新之前的DOM",document.getElementById("app").innerHTML);
          },
          //更新之后的dom，获取最新的。
          update(){
            console.log("更新之后的DOM",document.getElementById("app").innerHTML);
          },
          /* 销毁之前 */
          beforeDestroy(){
            console.log("销毁之前");
          },
          destroy(){
            console.log("销毁完成");
          },

二、特性

2.1、refs

如果给标签添加ref，获取的就是真实的DOM节点。

例：<input ref="input">

this.$refs.input.focus（）；获取input框的输入。

2.如果给子组件添加ref，获取的是当前子组件对象。

给标签添加ref。

不能滥用，最好不要操作dom，vue是数据驱动。

2.2、nextTick 获取数据的变化

vue在更新dom的时候是异步执行的，当更新之后，textContent不会立刻改变，这个时候刷新队列就可以在更新之后想要立刻获取到值，

直观解释就是为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用vue.nextTick。在当前的回调函数中，能获取最新的DOM

Vue.nextTick(()=>{})；

2.3、对象的变更检测

vue不能检测对象属性的添加和删除，想要动态的添加vue属性的话。就要使用响应式属性：

vue.set(object,key,value)

例：this.$set(this.user,'username','Jack');

//添加多个响应式属性,空对象，当前对象，添加的属性
this.user=Object.assign({},this.user,{
 age:20,
name:"JACK"
})

this.user.age就可以得到age的值

2.4、混入mixin偷懒技术

mixins:[对象]

主要用于分发vue中可复用的功能。当使用了之后，所有混入的选项将被混入mixins中。

组件里加mixin属性。重复性较多的时候就可以用mixin