Vue 常用的狗钩子函数

		beforeCreate(){        
  			console.log('刚刚创建实例');   
    },
    created(){
        console.log('实例创建完成');
    },
    beforeMount(){
        console.log('模板编译之前 ');  
    },
    mounted(){
         /* 请求数据,操作Dom时常用 */
        console.log('实力挂载完成');
    },
    beforeUpdate(){
        console.log('更新前')
    },
    updated(){
        console.log('更新后')
    },
    beforeDestroy(){
        /* 页面销毁时要保存数据,可以监听这个销毁的生命周期 */
        console.log('实例销毁前')
        alert('准备销毁')
    },
    destroyed(){
        console.log('实力销毁后')
    }
--------------------------------------------------------
//业务中常用的Vue生命周期函数
  mounted(){
         /* 请求数据,操作Dom时常用 */
        console.log('实力挂载完成');      
  },
 
  beforeDestroy(){
        /* 页面销毁时要保存数据,可以监听这个销毁的生命周期 */
        console.log('实例销毁前')
        alert('准备销毁')
	}
1、methods

是个对象,是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行,

只执行逻辑,返回值可有可无,对一些数据请求,点击事件进行封装函数等。

2、creted

是个方法,在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图

3、monted

在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

4、computed

是计算属性,也可以理解为一个方法。无需再data中声明,其中计算的结果如果不发生改变就不会触发,

且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。

<div v-for="(item,index) in adList" :key='index'>i{{item}}</div> 
adList() {
	let tmp = this.$store.state.adList;
	if (!tmp) {
		tmp = [];
	}
	return tmp;
}

5、watch

监听数据变化、列如v-model的input值什么的、但是必须在data中声明

watch:{
	dataTime(val,newVal){
		.......
	}
}
6、onload

页面加载完成后触发函数html、css、js,属于js方法,一个页面只会调用一次

7、onshow

页面切换后触发,可用于切换页面刷新数据等

相关推荐
Joeysoda3 天前
Java数据结构 (从0构建链表(LinkedList))
java·linux·开发语言·数据结构·windows·链表·1024程序员节
清风-云烟5 天前
使用redis-cli命令实现redis crud操作
java·linux·数据库·redis·spring·缓存·1024程序员节
Joeysoda5 天前
Java数据结构 (链表反转(LinkedList----Leetcode206))
java·linux·开发语言·数据结构·链表·1024程序员节
比特在路上5 天前
StackOrQueueOJ3:用栈实现队列
c语言·开发语言·数据结构·1024程序员节
0xCC说逆向7 天前
Windows图形界面(GUI)-QT-C/C++ - Qt键盘与鼠标事件处理详解
c语言·开发语言·c++·windows·qt·win32·1024程序员节
明明真系叻8 天前
2025.1.18机器学习笔记:PINN文献精读
人工智能·笔记·深度学习·机器学习·1024程序员节
0xCC说逆向9 天前
Windows图形界面(GUI)-QT-C/C++ - Qt List Widget详解与应用
c语言·开发语言·c++·windows·qt·win32·1024程序员节
明明真系叻11 天前
2025.1.12机器学习笔记:GAN文献阅读
人工智能·笔记·深度学习·机器学习·1024程序员节
比特在路上12 天前
OJ12:160. 相交链表
c语言·数据结构·算法·链表·1024程序员节
earthzhang202113 天前
《深入浅出HTTPS》读书笔记(28):DSA数字签名
开发语言·网络协议·算法·https·1024程序员节