Vue的八大生命周期钩子函数
区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted
/* Vue实例化对象创建之前 */
beforeCreate() {
/* 实例化对象创建之前是获取不到data里面的数据的 */
console.log('beforeCreate',this.msg)
},
/* Vue实例化对象创建之后 */
created() {
/* 实例化对象创建之后可以获取data里面的数据 */
/* 实例化对象创建之后不可以获取到dom包括根节点 */
console.log('created',this.msg,this.$el)
/* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
// this.timeId = setInterval(()=>{
// this.time++;
// console.log(this.time)
// },500)
},
/* Vue的dom挂载之前 */
beforeMount() {
/* dom挂载之前可以获取到根节点 */
/* beforeMount还没有把data中的数据渲染到dom节点上 */
console.log('beforeMount',this.$el)
},
/* Vue的dom挂载之后 */
mounted() {
/* mounted已经把data中的数据渲染到了dom节点上 */
console.log('mounted',this.$el)
/* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
},
/* Vue的data值更新前 */
/* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
/* 顺序上 beforeUpdate执行顺序优先于updated */
beforeUpdate() {
console.log('beforeUpdate',this.msg,this.$el)
},
/* Vue的data值更新后 */
updated() {
console.log('updated',this.msg,this.$el)
},
/* Vue组件销毁前 */
/* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
/* 执行顺序上beforeDestroy优先于destroyed执行 */
/* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
beforeDestroy() {
console.log('beforeDestroy',this.msg,this.$el)
},
/* Vue组件销毁后 */
destroyed() {
console.log('destroyed',this.msg,this.$el)
clearInterval(this.timeId)
},
methods: {
change(){
this.msg = '我爱React'
},
destroy(){
//销毁组件的方法
this.$destroy();
}
使用Vue的计算属性Computed
在conputed中写入写入一个方法即可
计算属性具有缓存的功能，当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新
new Vue({ //挂载点 el:'', //数据 data:{}, computed:{}})复制代码
监听属性watch
只要data中的值被改变了就会触发
Watch可以有两个传参，第一个形参是被改变后的参数，第二个是原来的参数
new Vue({ //挂载点 el:'', //数据 data:{}, watch:{ price(newM,oldM){ Console.log(‘原参数’+oldM+’----’+’新参数’+newM) } } })复制代码
深度监听
基本数据类型可以使用简写的方式 但是引用数据类型不能使用简写的方式
引用数据类型应该用深度监听，加上deep:true
handler方法名是固定的不可以被修改
immediate:true 会立即执行监听器理的handler方法
如果监听的是计算属性 里面的data属性的值发生改变才会触发监听器
watch:{
obj:{
deep:true,
handler(newV,oldV){
console.log(newV);
console.log('值被改了');
},
immediate:true
}
},