一、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