uniapp-小白式上手vue.3版本

满满的干货。让你vue2-vue3丝滑过渡

step1、准备工作

1、创建uniapp项目

2、打开项目后，打开manifest.json;选择vue3版本

3、一个简单项目的启动，从开发角度。我归类为一下的步骤

1、生命周期
2、数据绑定
3、事件绑定
4、数据传递
5、项目部署

掌握以上简单的用法，简单的业务页面开发也基本顺利。更复杂的用法，是一步一步再实际业务开发中再去详细摸索

无需根元素，这是vue3很爽的一个点，减少了很多没有必要的元素层级

<template>
    <view>111</view>
    <view>无需根元素，这是vue3很爽的一个点，减少了很多没有必要的元素层级</view>
    <view>{{ title }}</view>
</template>

项目基础API

setup / 生命周期

setup 为vue3新的组合式API入口，在组件创建之前， props被解析之后执行。简单理解，可以代替vue2的create生命周期。 同时setup有两种写法，一种是script_setup（无需再次抛出数据使用）,一种setup()。以下会做比较
更详细的说明的话，仔细看一下官网文档

vue3较vue2更为轻便的一个原因就是，你所需的API可按照你所需的接入进来

script_setup 模式

setup 中的生命周期：左边为vue2的生命周期，右边为setup内可使用的生命周期函数

<script setup>
    import { onMounted } from 'vue'
    onMounted(() => {})
</script>

<script>
export default {
    setup (props) {
       import { onMounted } from 'vue'
       onMounted(() => {
           console.log('组件已经加载完毕')
       })
    }
}
</script>

数据双向绑定 ref, reactive

这两者都是用作双向绑定的，简单的区别为
ref：基础类型数据的双向绑定，例如，数字类型，字符串类型
reactive： 复杂类型的数据绑定，例如 多层对象。 虽然是这样子，但是ref也是可以定义数组/对象，更简单理解，ref更像是reactive二次封装。所以我们根据实际的业务场景来使用

<template>
    <input v-model="inputValue" />
    
    <input v-model="form.time" />
    
    普通的数据则无需双向绑定
    <view v-for="item in list" :key="item" @click="handleClick(item)">
        点击改变input的值{{ item }}
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue'
    const inputValue = ref('初始值可以直接填入括号内')
    // 取值，或者重新赋值的则是需要.value
    console.log(inputValue.value) // 初始值可以直接填入括号内
    
    const form = reative({time: 0})
    // 无需.value获取值
    console.log(form.time) // 0
    
    const list = [1, 2, 3]
    
    // 点击改变input的值
    const handleClick = (item) => {
        inputValue.value = item
        form.time = new Date()
    }
</script>

setup() 需要通过return把所用的值返回到template

<script>
export default {
    setup () {
        const inputValue = ref()
        const form = reactive({time: ''})
        const list = []
        // 暴露到给template
        return {
            inputValue, form, list
        }
    }
}
</script>

获取页面参数

<template>
    <view>获取到的页面参数{{ query.title }}</view>
</template>

<script>
export default {
    data () {
        return {
            query: {}
        }
    },
    onLoad (query) {
        this.query = { ...query }
    }
}
</script>

<script setup>
import { getCurrentInstance } from 'vue'
const query = getCurrentInstance.data.query // 页面参数
</script>

组件之间的传参

父子传参

子组件

<script setup>
import { defineExpose, ref, reative, defineEmits } from 'vue'

const visible = ref(true)

const show = () => {
    visible.value = true
}

// 通过defineExpose可以暴露可对外使用的参数
defineExpose({ show })

// 通过defineEimts主动向父元素传参
const emit = defineEmits(['change'])

const change = () => {
    emit('change', visible.value)
} 
</script>

父组件

<template>
    <child ref="childDom" @change="handleChange" />
</template>

<script setup>
import { defineExpose, ref, onMounted } from 'vue'
import child from './child.vue'

// 通过ref调用子组件方法
const childDom = ref(null)

onMounted(() => {
    childDom.value.show()
})

// 子组件触发的方法
const hanldeChange = (value) => {
    console.log(value) // 子组件传递过来的参数
}

</script>

父子组件双向绑定数据

子组件

<template>
    <input v-model="val" />
</template>

<script setup>
import { defineEmits, watch, ref } from 'vue'

const emit = defineEmits(['update:modelValue'])

const val = ref()

watch(val, (newVal, oldVal) => {
    emit('update:modelValue', newVal)
})
</script>

父组件

<template>
    <child v-model="childVal" />
</template>

我会持续更新该笔记文档