Vue3进阶语法

vue3语法(进阶用法)

(默认已经有了vue2基础,以及vue3基础)

使用create-vue创建vue3项目

这里我使用的是pnpm

pnpm create vue

简单回顾一下vue3的一些语法:

组合式API-setup语法

setup语法的执行时机在beforecreate的执行时间之前

在vue3的setup语法中的this不再像vue2一样生效

响应式数据

在普通的数据中,不能具有响应式数据,

利用下面的两个可以让数据具有响应式的特点

1. reactive

   <scripte setup>
   const number = reactive({
   	number:12,
   	count:34
   })
   </scripte>

   缺点:这个reactive只能支持的是reactive

2. #####ref

<scripte setup>
const number = ref(0)
const numberadd = () => {
    number.value++
}
</scripte>

在脚本中的ref必须要.value

ref响应式,可以是对象,也可以不是一个对象

计算属性

首先要导入计算属性computed

import { computed } from 'vue'

计算属性的写法:

<script setup>
import { computed } from 'vue'
import { ref } from 'vue'
const number = ref([12,23,1,2,1,1,1,121,13,12,13,1,2131])
const computednumber  = computed(() => {
    return number.value.filter(item => item > 2)
})
</script>
<template>
    <div>{{ computednumber }}</div>
</template>

watch函数

首先要导入这个函数

1.对于单个的数据

import { watch } from 'vue'

<script setup>
import { watch } from 'vue'
import { ref } from 'vue'
const number = ref(12)
watch(number,(newnumber, oldeunmber) => {
    console.log(newnumber, oldeunmber);
})
</script>
<template>
    <div @click="unmber.value++">{{ unmber }}</div>
</template>

2.对于多个数据

用数组的形式进行表示

<script setup>
import { watch } from 'vue'
import { ref } from 'vue'
const number1 = ref(12)
const unmber2 = ref(23)
watch([number1, unmber2],([newnumber1, newnumber2],[oldeunmber1, oldeunmber2]) => {
    console.log(newnumber1, oldeunmber1,newnumber2, oldeunmber2);
})
</script>
<template>
    <div @click="unmber1.value++">{{ unmber1 }}</div>
    <div @click="unmber2.value++">{{ unmber2 }}</div>
</template>

3.immediate立即执行

<script setup>
import { watch } from 'vue'
import { ref } from 'vue'
const number = ref(12)
watch(number,(newnumber, oldeunmber) => {
    console.log(newnumber, oldeunmber);
}, {
    immediate:true
})
</script>
<template>
    <div @click="unmber.value++">{{ unmber }}</div>
</template>

4.deep深度监听

对于对象不能够进行深度监听,必须要加上deep才能进行深度监听,注意!!!:deep深度监听用的式递归实现的,会损耗性能,能不用尽量不要用

<script setup>
import { watch } from 'vue'
import { ref } from 'vue'
const number = ref({
    ans:23
})
watch(number,(newnumber, oldeunmber) => {
    console.log(newnumber, oldeunmber);
}, {
    deep:true
})
</script>
<template>
    <div @click="unmber.value.ans++">{{ unmber.ans }}</div>
</template>

对于监听函数的deep监听,对于监听一些对象可能会造成浪费,这个时候就可以用精确监听的写法

这个可以实现精确监听

<script setup>
import { watch } from 'vue'
import { ref } from 'vue'
const number = ref({
    ans:23,
    app:111111
})
watch(
() => number.value.ans,
() => {
console.log('ans增加了');
})
</script>
<template>
    <div @click="unmber.value.ans++">{{ number.value.ans }}</div>
</template>

生命周期函数

首先要导入的是这个生命周期函数

import { onMounted } from 'vue'

其余的语法和vue2的相差不大

可以写多个钩子函数

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
    console.log('这里可以写一些代码');
})
onMounted(() => {
    console.log('这里也是');
})
</script>
<template>
   <div></div>
</template>

组合式API-父传子

注意:!!!下面的是建立在组件的基础上实现的,我的代码是简化的,没有写在组件上的,只是作为一个语法介绍,学了vue2的能明白

在子组件中需要添加的是

<script setup>
defineProps({
    message:Number
})
</script>
<template>
   <div>{{ message }}</div>
</template>

注意:如果想要传递的是一个响应式的数据,在父组件中需要对传过来的那个数据进行ref相应式的处理,还有的是,在父组件中传过来的数据的前面要加上冒号:

<div :app="count"></div>

组合式API-子传父

这里就不在写,应该都会了

组合式API-模板引用

<script setup>
import { ref } from 'vue'
const app = ref(null)
console.log(app.value);
</script>
<template>
   <div ref="app"></div>
</template>

//可以获得这个的dom元素

2.对于组件

在组件上绑定一个ref的属性,可以得到这个组件的一些内部变量,方法等,但是需要注意的是,无法直接访问到子组件,必须要子组件暴露出来

在这里也可以暴露出来一些方法,不仅仅是一些数据

<script setup>
import { ref } from 'vue'
const app = ref(null)
defineExpose({
    app
})
</script>
<template>
   <div>{{ app }}</div>
</template>

####组合式API-provide和inject

跨层传递普通数据

1. 顶层组件同构provide函数提供数据

   首先要导入的是provide

   import { provide } from 'vue'

   provide('key','这个是传送的顶层数据')

2. 底层组件通过inject函数获取数据

   import { inject } from 'vue'

   const message = inject('key')

想要传递的是响应式的数据,这个时候就可以在父组件中让传递下来的数据通过ref变成响应式的数据传递下来,就是响应式的数据了

在这里,想要通过底层组件想要修改顶层组件的一些数据的值,在这个情况下就可以实现的就是顶层组件传递下来一个方法到底层组件进行修改,体现了自己的数据自己进行修改的原则,传递的方法和上面的传递数据的方法是一样的

获取路由中的值id,可以这样:获取id值,前提是路由配置中规定/:id​

import { useRoute } from "vue-router"

const route = useRoute()
const id = route.params.id