侦听
作用：侦听一个数据，当这个数据发生变化了马航执行对应的方法
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
<script src="../vue.js"></script>
</head>
<body>
<h3>侦听</h3>
<div id="app">
{{a}}
<button @click="fn1">修改a</button>
<button @click="fn2">修改b</button>
<button @click="fn3">修改obj.b</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
a:10,
b:20
obj:{
a:10,
b:20,
c:{
z:30
}
}
}
},
methods:{
fn1(){
this.a=Math.random()
},
fn2(){
this.b=Math.random()
},
fn3(){
this.obj.b=Math.random()
//obj作为对象保存的是地址
//修改其中一个值，不会改变地址，即数据没有发生改变
//默认情况下不会触发侦听方法
console.log(this.obj)
}
},
watch:{
//简写：一个方法
//侦听一个数据，方法名就用哪个数据的名字
a(newVal,oldVal){
console.log('a发生了改变')
console.log(newVal,oldVal)
},
//完全体
//侦听哪个数据，对象名就用哪个数据的名字
//对象中提供新的属性
b:{
immediate:true,//是否立即触发
//默认值是false
//可选值true，在首次加载组件时，马上执行一次handler方法
handler(newVal,oldVal){
console.log('b发生了改变')
console.log(newVal,oldVal)
}
},
// obj:{
// deep:true,//是否深度侦听
// //默认值是false
// //可选值true，如果对象中的某个属性发生了改变，也会触发handler方法
// handler(newVal,oldVal){
// console.log('c发生了改变')
// console.log(newVal,oldVal)
// }
// }
//只侦听一个属性
"obj.b"(){
console.log('obj.b发生了改变')
}
}
})
</script>
</body>
</html>
注：
1.不使用数据。侦听方法也执行
2.默认情况下加载组件时不会执行侦听方法，只有当数据改变时才执行
深度侦听的问题：
实际开发中，并不需要侦听所有属性，只侦听其中一个或者少数几个
如果使用深度侦听，那就会侦听过度
生命周期
beforeCreate
钩子函数，实例化之后自动执行
此时数据，方法，dom元素都没有创建好
作用：1.需要在实例化组件之后完成的效果，在这个钩子函数中实现
2.一些插件的初始化，也可以在这个钩子函数中实现
部分代码：
beforeCreate(){
//钩子函数，实例化之后自动执行
//此时数据，方法，dom元素都没有创建好
console.log(this.a)//10
this.fn()//123
console.log(this.$refs.dd)//undefined
console.log("-------------------------------")
//作用：需要在实例化组件之后完成的效果，在这个钩子函数中实现
//一些插件的初始化，也可以在这个钩子函数中实现
},
created
钩子函数，实例化之后自动执行
此时数据，方法已经创建，dom元素没有创建
作用：从后台获取的数据可在这个钩子函数中完成，获取后把数据赋值给组件中对应的数据名
部分代码：
created(){
//钩子函数，实例化之后自动执行
//此时数据，方法已经创建，dom元素没有创建
console.log(this.a)//10
// this.fn()//123
console.log(this.$refs.dd)//undefined
console.log("-------------------------------")
//作用：从后台获取的数据可在这个钩子函数中完成，获取后把数据赋值给组件中对应的数据名
}
beforeMount
钩子函数，把数据方法等挂载到挂载点前自动执行
此时数据，方法已经创建，dom元素没有创建
作用：没有作用
部分代码：
beforeMount(){
//钩子函数，把数据方法等挂载到挂载点前自动执行
// 此时数据，方法已经创建，dom元素没有创建
console.log(this.a)//10
this.fn()//123
console.log(this.$refs.dd)//undefined
console.log("-------------------------------")
//作用：没有作用
}
mounted
钩子函数，把数据方法等挂载到挂载点前自动执行
此时数据，方法，dom元素都已经创建
作用：数据和dom元素的联合操作，在这个钩子函数中实现
但是，也有不少人把获取数据即给数据名赋值放入这个钩子函数中
部分代码：
mounted(){
//钩子函数，把数据方法等挂载到挂载点前自动执行
// 此时数据，方法，dom元素都已经创建
console.log(this.a)//10
this.fn()//123
console.log(this.$refs.dd)//dom元素
console.log("-------------------------------")
//作用：数据和dom元素的联合操作，在这个钩子函数中实现
//但是，也有不少人把获取数据即给数据名赋值放入这个钩子函数中
}
beforeUpdate和updated
以上两个生命周期钩子函数，必须等到页面发生变化时才会执行
一般用于计算样式的改变量
部分代码：
beforeUpdate(){
console.log("更新前")
},
updated(){
console.log("更新后")
}
beforeDestroy
组件销毁前，保证功能完整的最后时刻
为了安全该销毁的销毁（定时器，闭包等）
为了客户体验，该取消的要取消干净(组件之间的关系必须相互取消)
部分代码：
beforeDestroy(){
console.log("销毁前")
//组件销毁前，保证功能完整的最后时刻
//为了安全该销毁的销毁（定时器，闭包等）
//为了客户体验，该取消的要取消干净(组件之间的关系必须相互取消)
}
destroyed
销毁组件到底销毁了什么？
页面，视图层有没有被销毁
逻辑层，方法等有没有被销毁
数据，逻辑层，方法没有被销毁
销毁后，视图层的元素没办法触发方法
销毁的是，视图层与逻辑层的关系
部分代码：
destroyed(){
console.log("已销毁")
//销毁组件到底销毁了什么？
//页面，视图层有没有被销毁
//逻辑层，方法等有没有被销毁
//数据，逻辑层，方法没有被销毁
console.log(this.a)//10
this.fn()//123
//销毁后，视图层的元素没办法触发方法
//销毁的是，视图层与逻辑层的关系
}
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div ref="dd">Dom元素</div>
<button @click="fun">修改a</button>
<button @click="des">销毁</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
a:10
}
},
methods:{
fn(){
console.log(123)
},
fun(){
this.a=Math.random()
},
des(){
//销毁组件
this.$destroy()
}
},
beforeCreate(){
//钩子函数，实例化之后自动执行
//此时数据，方法，dom元素都没有创建好
console.log(this.a)//undefined
// this.fn()//报错
console.log(this.$refs.dd)//undefined
console.log("-------------------------------")
//作用：需要在实例化组件之后完成的效果，在这个钩子函数中实现
//一些插件的初始化，也可以在这个钩子函数中实现
},
created(){
//钩子函数，实例化之后自动执行
//此时数据，方法已经创建，dom元素没有创建
console.log(this.a)//10
// this.fn()//123
console.log(this.$refs.dd)//undefined
console.log("-------------------------------")
//作用：从后台获取的数据可在这个钩子函数中完成，获取后把数据赋值给组件中对应的数据名
},
beforeMount(){
//钩子函数，把数据方法等挂载到挂载点前自动执行
// 此时数据，方法已经创建，dom元素没有创建
console.log(this.a)//10
this.fn()//123
console.log(this.$refs.dd)//undefined
console.log("-------------------------------")
//作用：没有作用
},
mounted(){
//钩子函数，把数据方法等挂载到挂载点前自动执行
// 此时数据，方法，dom元素都已经创建
console.log(this.a)//10
this.fn()//123
console.log(this.$refs.dd)//dom元素
console.log("-------------------------------")
//作用：数据和dom元素的联合操作，在这个钩子函数中实现
//但是，也有不少人把获取数据即给数据名赋值放入这个钩子函数中
},
beforeUpdate(){
console.log("更新前")
},
updated(){
console.log("更新后")
},
//以上两个生命周期钩子函数，必须等到页面发生变化时才会执行
//一般用于计算样式的改变量
beforeDestroy(){
console.log("销毁前")
//组件销毁前，保证功能完整的最后时刻
//为了安全该销毁的销毁（定时器，闭包等）
//为了可会体验，该取消的要取消干净(组件之间的关系必须相互取消)
},
destroyed(){
console.log("已销毁")
//销毁组件到底销毁了什么？
//页面，视图层有没有被销毁
//逻辑层，方法等有没有被销毁
//数据，逻辑层，方法没有被销毁
console.log(this.a)//10
this.fn()//123
//销毁后，视图层的元素没办法触发方法
//销毁的是，视图层与逻辑层的关系
}
})
</script>
</body>
</html>