vue3-基础

&小胖&

已于 2024-08-21 20:45:22 修改

阅读量172

点赞数 7

分类专栏： Vue3 文章标签：前端 vue.js

于 2024-08-21 20:42:05 首次发布

本文链接：https://blog.csdn.net/a2739294436/article/details/141400441

版权

Vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、创建vue3项目

npm init vue@latest

二、语法介绍

1.< script setup>语法糖

<script setup>
const aa = '123'
const clickFn = () => {
  console.log(123);
}
</script>
<template>
  <div>{{ aa }}</div>
  <button @click="clickFn">aa</button>
</template>

2.响应式函数

2.1reactive()

2.1.1介绍

接收一个对象类型数据的参数传入并返回一个响应式的对象

2.1.2使用

<script setup>
    import { reactive } from 'vue'
    const rea = reactive({ aa: 123, bb: '22' })
    const clickFn = () => {
        console.log(123);
        rea.aa += 1
    }
</script>
<template>
     <div>{{ rea.aa }}</div>
     <button @click="clickFn">aa</button>
</template>

2.2 ref()

2.2.1介绍

接收简单类型或者对象类型的数据传入并返回一个响应式对象

2.2.1使用

<script setup>
    import { ref } from 'vue'
    const re = ref(0)
</script>
<template>
    <div>{{ re }}</div>
</template>

2.3比较ref和reactive

1.reactive不能处理简单类型的数据
2.ref参数类型支持更好但是必须通过.value访问修改
3.ref函数的内部实现依赖于reactive函数

推荐使用ref函数，更加灵活

3.computed计算属性

3.1使用

<script setup>
    import { ref, computed } from 'vue'
    const aa = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
    const com = computed(() => {
      return aa.value.filter(item => item > 2)
    })
    setTimeout(() => {
      aa.value.push(9, 10)
    }, 3000)
</script>
<template>
    <div>
      原值 -{{ aa }}
      计算属性-{{ com }}
    </div>
</template>

3.2注意

1.计算属性不能直接修改dom或异步请求
2.计算属性应该是只读的

4.watch函数

4.1介绍

介绍
watch是用来监听一个或多个数据变化的。数据变化时执行回调函数

定义
watch(值, (newv, oldv) => {
  console.log(newv, oldv, 1);
},{
 immediate:true,
 deep:true
})

参数属性
immediate  立即执行
deep       深度监听

4.2监听单个数据

<script setup>
    import { ref, watch } from 'vue'
    const aa = ref(0)
    const clickFn = () => {
      aa.value += 1
    }
    watch(aa, (newv, oldv) => {
      console.log(newv, oldv, 1);
    })
</script>
<template>
    <div>
      <button @click="clickFn">aa</button>
    </div>
</template>

4.3.监听多个数据的变化

<script>
    import { ref, watch } from 'vue'
    const aa = ref(0)
    const bb = ref('qa')
    const clickFn = () => {
      aa.value += 1
    }
    const clickFn1 = () => {
      bb.value += 1
    }
    watch([aa, bb], (newv, oldv) => {
     //只要有其中一个数据变化就会触发 
      console.log(newv, oldv, 1);
    }, {
      immediate: true
    })
</script>
<template>
  <div>
    <button @click="clickFn">aa</button>
    <button @click="clickFn1">bb</button>
  </div>
</template>

4.4 立即执行监听

<script setup>
    import { ref, watch } from 'vue'
    const aa = ref(0)
    const clickFn = () => {
      aa.value += 1
    }
    watch(aa, (newv, oldv) => {
      console.log(newv, oldv, 1);
    })
</script>
<template>
  <div>
    <button @click="clickFn">aa</button>
  </div>
</template>

4.5 深度监听

<script setup>
    import { ref, watch } from 'vue'
    const aa = ref({ aa: 123 })
    const clickFn = () => {
      aa.value.aa += 1
    }
    watch(aa, (newv, oldv) => {
      console.log(newv, oldv, 1);
    }, {
      deep: true
    })
</script>
<template>
  <div>
    {{ aa.aa }}
    <button @click="clickFn">aa</button>
  </div>
</template>

4.6 监听对象中的某个值

<script setup>
    import { ref, watch } from 'vue'
    const aa = ref({ aa: 123, bb: 235 })
    const clickFn = () => {
      aa.value.aa += 1
    }
    const clickFn1 = () => {
      aa.value.bb += 1
    }
    watch(() => aa.value.aa, (newv, oldv) => {
      console.log(newv, oldv, 1);
    }, {
      deep: true
    })
</script>
<template>
  <div>
    {{ aa.aa }}
    <button @click="clickFn">aa</button>
    <button @click="clickFn1">aa1</button>
  </div>
</template>

5.生命周期函数

5.1介绍

介绍
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数；
3、onMounted() : 组件挂载完成后执行的函数；
4、onBeforeUpdate(): 组件更新之前执行的函数；
5、onUpdated(): 组件更新完成之后执行的函数；
6、onBeforeUnmount(): 组件卸载之前执行的函数；
7、onUnmounted(): 组件卸载完成后执行的函数；
8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

注意
生命周期函数可以执行多次，多次执行时传入的回调会在时机成熟时依次执行

5.2使用

<script setup>
    import { onMounted } from 'vue'
    // 组件挂载
    onMounted(() => {
      console.log('组件挂载');
    })
</script>

6.传参方法

6.1.父子通信

6.1.1父传子

//在父组件中
<script setup>
    import children from './components/children.vue'
    import { ref } from 'vue'
    const data = ref('ccc')
</script>
<template>
  <div>
    <children :data="data"></children>
  </div>
</template>

//在子组件中
<script setup>
    const props = defineProps({
      data: String
    })
</script>
<template>
  <div>{{ data }}</div>
</template>

6.1.2子传父

//在子组件中
<script setup>
    //通过defineEmits生成emit方法 数组中可以创建多个值
    const emit = defineEmits(['child'])
    const send = () => {
      emit('child', 123)
    }
</script>
<template>
    <button @click="send">aaa</button>
</template>

//在父组件中
<script setup>
    import children from './components/children.vue'
    const child = (data) => {
      console.log(data);
    }
</script>
<template>
  <div>
    <children @child="child"></children>
  </div>
</template>

6.2获取dom实例或组件对象

6.2.1使用

<script setup>
    //导入子组件
    import child from './components/children.vue'
    import { onMounted, ref } from 'vue'
    // 使用ref创建refs对象
    const aa = ref(null)
    const bb = ref(null)
    // 组件挂载完成之后获取对象
    onMounted(() => {
      console.log(aa.value);
      console.log(bb.value);
    })
</script>
<template>
  <!-- 通过ref标识绑定ref对象 -->
  <div ref="aa">
    123
  </div>
  <!-- 通过ref标识绑定组件 -->
  <child ref="bb"></child>
</template>

6.2.2defineExpose()

    介绍

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开发给父组件访问的，
可以通过defineExpose()编译宏指定那些属性和方法允许访问

    使用

//在子组件
<script setup>
    import { ref } from "vue"
    const aa = ref(0)
    //透露给父组件的值
    defineExpose({
      aa
    })
</script>
<template>
  <div>{{ aa }}</div>
</template>

//在父组件
<script setup>
    import child from './components/children.vue'
    import { onMounted, ref } from 'vue'
    const bb = ref(null)
    // 组件挂载完成之后获取对象
    onMounted(() => {
      console.log(bb.value.aa);
    })
</script>
<template>
  <!-- 通过ref标识绑定组件 -->
  <child ref="bb"></child>
</template>

6.3.provide和inject

6.3.1介绍

在顶层组件通过provide传数据
在底层组件通过inject接收数据

6.3.2使用

组件嵌套关系 父组件-> children.vue -> 底层组件

//在父组件
<script setup>
    import child from './components/children.vue'
    //传值
    provide('value123', '顶层数据')
    //传响应式数据
    const aa = ref(0)
    provide('value234', aa)
    //传方法
    const setAA = () => {
     aa.value += 1
    }
    provide('value345', setAA)
</script>
<template>
 <!-- 通过ref标识绑定组件 -->
 <child ref="bb"></child>
</template>

//在底层组件
<script setup>
    import { inject } from "vue";
    const bb = inject('value123')
    const aa = inject('value234')
    const setAA = inject('value345')
</script>
<template>
 <div>{{ bb }}</div>
 <div>{{ aa }}</div>
 <button @click="setAA">aa</button>
</template>

&小胖&

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3-基础

/script>接收一个对象类型数据的参数传入并返回一个响应式的对象接收简单类型或者对象类型的数据传入并返回一个响应式对象介绍watch是用来监听一个或多个数据变化的。数据变化时执行回调函数定义watch(值, (newv, oldv) => {},{deep:true})参数属性immediate 立即执行deep 深度监听介绍。
复制链接

扫一扫

专栏目录