vue----生命周期
生命周期
一个组件从创建到销毁的这个过程就叫做生命周期
1.beforeCreate创建前---------------加载动画loading
beforeCreate当初始化的时候读取生命周期函数，
1.不能进行调用属性
2.不能访问到属性和方法
2.created创建后--------------(ajax的请求，接收非父子组件传的值)
created:当beforeCreate初始化完毕以后，会执行created。 当执行created的时候会，
1.在created中可以访问到数据（属性）和方法了
2.将vm身上所有的属性和方法并遍历挂载到vue的实例身上，
3.同时，给data中的每一个属性都添加一个getter和setter方法，实现数据的双向绑定
4.属性有getter方法和setter方法才可以进行双向绑定（当属性值发生改变时，凡是关联到该属性的值都会发生改变）
3.beforeMount挂载前
1.将读取到所有的虚拟DOM,和数据进行结合，
2.但是没有生产真正的DOm结构，这里面是只能访问到虚拟DOM的
4.mounted：挂载完成，---------------插件进行实例化
1.虚拟DOM和数据结合完成后生成真正的DOM结构，可访问到真实DOM
2.可以使用refs进行dom的操作，通过this.$refs.值 来获取真实的dom结构。
3.使用一些插件进行实例化的时候我们都可以在mounted里面进行操作 例如 swiper better-scroll
5.beforeUpdate:修改前
1.当数据进行修改的时候会执行beforeUpdate，
2.但是数据不会立马进行更新，而是数据和模板进行相结合的状态，访问到的dom是更新之前的dom结构 3.重新渲染虚拟 dom,并通过 diff 算法对比 vnode 节点差异更新真实 dom (virtual DOM re-render and patch)
（一个页面，先进行 对比，只对需要更新的部分进行更新）
6.updated修改后----------------（瀑布流，计算加载图片后，页面的高度）
1.数据和模板结合完毕生成新的DOM结构
7.beforeDestroy销毁前-----做事件的解绑，移除监听等工作
1.销毁前是可以访问到数据和方法，可以访问到当前dom的元素
8.destroyed销毁后
1.不能访问到真实dom元素了，但能访问到数据，把vm与DOM之间的关联全部断开
<script>
var vm = new Vue({
el:"#app",
//创建前
beforeCreate(){
console.log("beforeCreated………………");
console.log(this.message);//undefined 访问不到属性
// this.handleClick();//报错 访问不到方法
},
//创建后
created(){
console.log("created…………");
console.log(this.message);//访问到属性
this.handleClick();//访问到方法
},
data:{
message:"文本" //message有set和get方法
},
methods:{
handleClick(){
console.log("这是个方法");
}
}
})
vm.age=32;//age没有get 和 set 方法，不能实现双向
console.log(vm);
</script>
操作虚拟dom
<!-- ref的值必须唯一 -->
<div ref="box">{{message}}</div>
console.log(this.$refs);//{},点击里面有box
console.log(this.$refs.box);//输出虚拟dom'
挂载前，挂载后
<body>
<div id="app">
<!-- ref的值必须唯一 -->
<div ref="box">{{message}}</div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
beforeCreate(){
console.log("beforeCreated………………");
console.log(this.message);
},
//创建后
created(){
console.log("created…………");
console.log(this.message);
this.handleClick();
},
data:{
message:"文本"
},
methods:{
handleClick(){
console.log("这是个方法");
}
},
beforeMount(){
console.log("beforeMount…………");
//$refs访问虚拟dom节点
console.log(this.$refs);//{},点击里面有box
console.log(this.$refs.box);//undefined,挂载前，访问不到虚拟dom
},
mounted(){
console.log(this.$refs);//{box}
console.log(this.$refs.box);//<div>文本</div>访问到虚拟dom
}
})
</script>
销毁前 销毁后
<body>
<div id="app">
<!-- ref的值必须唯一 -->
<div ref="box">{{message}}</div>
<div ref="box">{{message}}</div>
<div ref="box">{{message}}</div>
<div ref="box">{{message}}</div>
</div>
<!-- 在app外 -->
<button onclick="destroy()">销毁</button>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"文本"
},
beforeDestroy(){
// alert
console.log("beforeDestroy…………");
console.log(this.$refs);
console.log(this.$refs.box);//<div>box</div>可访问到bom元素
},
destroyed(){
console.log("destroyed…………");
console.log(this.$refs);
console.log(this.$refs.box);//undefined访问不到bom元素
}
})
function destroy(){
alert(1);
// vm的一个方法,销毁
vm.$destroy();
}
</script>
vm的方法 $destroy
修改前，修改后
<body>
<div id="app">
<!-- ref的值必须唯一 -->
<div ref="box">{{message}}</div>
<button @click="handleClick()"> 点击修改</button>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"文本"
},
methods:{
handleClick(){
this.message = "我是修改的数据";
}
},
beforeUpdate(){
alert(1);
console.log("boforeUpdate…………");
console.log(app.innerHTML);
},
updated(){
console.log("updated…………")
console.log(app.innerHTML);
}
})
</script>
浙公网安备 33010602011771号