其实学过vue和小程序的人再来看uni-app真的会非常简单 其实他就是两种语法的融合
uni-app新增了整个应用程序的生命周期
延用了小程序组件和单页面都有自己不同的生命周期的做法
但有延用了 vue 单个vue文件即为一个组件 也可以是单独页面的特性
页面生命周期更像是小程序的生命周期写法 而组件的生命周期则更像vue2的生命周期函数
小看单页面生命周期的可以阅读我之前的文章
https://blog.csdn.net/weixin_45966674/article/details/121668692?spm=1001.2014.3001.5502
那么我们先来建一个组件
在pages下新建一个文件夹用来存放组件 然后我们在这文件夹下建一个vue文件用来当组件
然后我们 在需要用这个组件的vue文件中通过导入的方法引进来
import text from "../assembly/assembly.vue"
和vue一样我们需要在components中声明该页面用的所有组件
components:{
assembly: text
},
然后即可在页面中使用组件标签
<assembly></assembly>
下面我们来看一下uni-app组件的生命周期
第一个就是beforeCreate
实例开始初始化时执行 这是还拿不到data和页面元素 相对这个声明周期个人觉得并不是很常用
第二个则是created
页面初始化完成时会执行的声明周期函数 可以获取到data中的响应式数据，通常我们会在这里做请求数据和数据绑定的操作，但这个声明周期是不能获取页面元素的因为 组件还没开始挂在元素
第三个则是beforeMount
组件挂在在页面之前要执行的生命周期 老实说 用的比较少
第四个是mounted
组件挂在完成后执行的生命周期函数，相对做可视化之类比较常用的生命周期 因为这个函数是能获取到页面元素的
第五个是beforeUpdate
当data中的响应式数据发生变化时触发
第六个是updated
当数据发生变化后先触发beforeUpdate然后响应式数据会让页面重新渲染，然后渲染完成则执行updated
这两个生命周期挺实用的
第七个就是beforeDestroy
当组件开始销毁时触发的生命周期
最后一个就是destroyed
组件销毁完成后执行的生命周期
可以先在父组件中用v-if让组件销毁 听不懂的建议去vue官网好好看一下v-if
v-if在uni-app中也是非常常用的渲染判断语句
组件生命周期参考代码如下
<template>
<view @click="setname">{
{ name }}</view>
</template>
<script>
export default {
data() {
return {
name: 'uni-app组件应用'
}
},
beforeCreate(){
console.log('实例开始初始化');
},
created(){
console.log('组件初始化完成');
},
beforeMount(){
console.log('准备开始挂在页面元素');
},
mounted(){
console.log('组件挂在完成');
},
beforeUpdate(){
console.log('数据发生变化');
},
updated(){
console.log('数据渲染完成');
},
beforeDestroy(){
console.log('组件开始销毁')
},
destroyed(){
console.log('组件已被销毁')
},
methods: {
setname(){
this.name = "数据修改渲染"
}
}
}
</script>
<style>
</style>