uniapp vue3版本的基本使用
话说前头，要学vue3中 setup语法 要知道本身还是vue 逻辑作用都时没有发生变化的，，唯一变的就只有写法不同而已 ；；一味复制代码是无用的，注释比代码更懂你~多看注释
前期准备
安装步骤
1. npm install -g @vue/cli（全局安装vue脚手架-----如已安装请忽略）2. npx degit dcloudio/uni-preset-vue#vite my-vue3-project(下载vue脚手架项目 )3. cd my-vue3-project4. npx @dcloudio/uni-app(下载uniapp依赖 )npm install5. npm install(下载依赖 )6. npm i sass(下载sass )7. npm i sass-loader -D(下载sass-loader )
请安装以上步骤执行即可运行起来
生命周期的使用；以及监听事件、计算事件的使用（2022/7/26 +）
// vue2
<script>
export default{
onLoad(options){
console.log('页面初始化')
},
onShow(){
console.log('页面出现时')
}
}
</script>
// vue3
<script setup>
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {
watch,
computed
}
from "vue";
onLoad((options) => {
console.log('页面初始化')
});
onShow(() => {
console.log('页面出现时')
});
// 其他方法也是一样，监听页面滚动,上拉加载 下拉刷新 等等都是一样的使用方式
// 监听事件与计算属性与生命周期略有不同
// 这里我们假设计算一个名为name的变量 这是vue3中的写法 如果有多个计算方法 ，那么我们只需要将这个方法复制一个即可
const name = ref('默认值');
const name2 = ref ('默认值2')
const name = computed(() => {
let style = ""
// do something
// 当这个方法内的所有用到的值发生改变时 都会重新执行并计算
return style ;
})
const name2 = computed(() => {
let style = ""
// do something
return style ;
})
// 相当于vue2 中写法是：
// computed: {
// name () {
// let style = ""
// // do something
// return style ;
// }
//}
// 假设监听 一个 name 变量
watch(name, (newValue, oldValue) => {
// do something
// 这里就是当 name 属性值发生变化时 ，就会执行此方法
})
// 如果需要监听多个变量，且要做的事情是一样的 那么我们只需要把第一个参数变为数组即可
watch([name, name2], (newValue, oldValue) => {
// do something
// 这里就是当 name或者name2 值发生变化时 ，就会执行此方法
})
</script>
定义变量
// vue2
<script>
export default{
data() {
return {
name: '我是变量'
}
}
// js内使用变量 this.name
}
</script>
// vue3
<script setup>
import { ref } from "vue";
const name = ref('我是变量')
// 使用 console.log(name.value)
// 重新赋值 name.value = '我是新的值'
</script>
定义方法
// vue2
<script>
export default{
methods:{
action(id) {
console.log('我是一个方法')
}
}
// js内使用变量 this.action()
}
</script>
// vue3
<script setup>
const action = (id) => {
console.log('我是一个方法')
}
// 使用 action()
</script>
组件通讯
// vue2
// 父组件 index.vue
<view>
<card @action="action" :name="name" ref="card"></card>
</view>
<script>
export default{
data() {
return {
name: '我是变量'
}
},
methods:{
action(id) {
console.log('我是一个方法')
},
action2(){
this.$refs.card.demo() // 调用子组件方法
this.$refs.card.shopName // 调用子组件属性
}
}
}
</script>
// 子组件 card.vue
<view @tap="handle()">
{{ name }}
</view>
<script>
export default{
props: {
name: {
type: [Number, String],
default: ''
}
},
data() {
shopName: "商品名称"
},
methods:{
handle() {
this.$emit('action') // 子组件回调
},
demo() {
console.log('我被调用了！')
}
}
}
</script>
// vue3
// 父 index.vue
<view>
<card @action="action" :name="name" ref="card"></card>
</view>
<script setup>
import { ref } from "vue";
const card = ref(null) // 需要定义
card.value.demo() // 调用子组件方法
card.value.shopName // 调用子组件变量
const name = ref('我是变量');
const action = (id) => {
console.log('我是一个方法')
}
</script>
// 子 card.vue
<view @tap="handle()">
{{ props.name }}
</view>
<script setup>
import { ref } from "vue";
const emit = defineEmits(['action']);
const props = defineProps({
name: {
type: [String, Number],
default: ''
}
})
const shopName = ref('商品名称');
const handle = () => {
emit('action') // 子组件回调
};
const demo = () => {
console.log('被使用了')
};
// 将子组件内的某个方法暴露后方可被外部调用
defineExpose({
demo
})
</script>
获取当前页面栈（获取vue2 中的this）
// vue2
this.$http()
// vue3
const self = getCurrentPages()?. [0]
self.$http()代码都是一个个手写的，不是复制粘贴的 如有什么问题可以私信或评论
后续我会慢慢的梳理更多的基本使用。有什么需要的也可以评论私聊
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
