Vue3语法和使用总结（更新ing）

news/2025/1/11 7:12:57/

文章目录

  • 组合式API
    • setUp语法
      • 原始写法
      • 语法糖写法
    • rective
    • ref
    • rective 和 ref
    • computed计算函数
    • watch监听函数
      • 监听多个数据
      • immediate（立即执行）
      • deep（深度监听）
        • 精确监听某个属性
    • 生命周期函数
    • 父子通信（父 -> 子）
      • 传递单个数据
      • 传递响应式数据
    • 父子通信（子 -> 父）
    • 分别获取dom对象和组件实例对象
      • defineExpose()
    • 跨层传递普通数据
  • slot插槽

组合式API

vue2

<script>
export default {data(){return{count:0}},methods:{addCount(){this.count++}}
}
</script>

vue3

<script setup>
import {ref} from 'vue'
const count = ref(0)
const addCount = ()=>count.value++
</script>

setUp语法

原始写法

<script>
export default {setup() {const message = 'this is message'const logMessage = () => {console.log(message)}return {message,logMessage}},
}
</script><template>
<div>{{message}}</div><button @click="logMessage"></button>
</template>

语法糖写法

<!--setup-开关：允许在script书写组合式API-->
<script setup>
const message = 'this is message'
const logMessage = () => {console.log(message)}
</script><template><div>{{ message }}</div><button @click="logMessage"></button>
</template>

rective

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import {reactive} from "vue";//2.执行函数 传入一个对象类型的参数，变量接收
const state = reactive({count:0
})const setCount = ()=>{state.count ++
}
</script><template><button @click="setCount">{{state.count}}</button>
</template><style scoped>
</style>

ref

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import {ref} from 'vue'//2.执行函数 传入一个参数[简单类型 + 对象类型]，变量接收
const count = ref(0)
console.log(count)
const setCount = ()=>{//脚本区域修改ref产生的响应式对象数据 必须通过.value属性count.value++
}
</script><template><button @click="setCount">{{count}}</button>
</template>

rective 和 ref

  1. reactive和ref函数的共同作用是什么 ？
    用函数调用的方式生成响应式数据
  2. reactive vs ref ？
    reactive不能处理简单类型的数据
    ref参数类型支持更好但是必须通过.value访问修改
    ref函数的内部实现依赖于reactive函数
  3. 在实际工作中推荐使用哪个？
    推荐使用ref函数，更加灵活，小兔鲜项目主用ref

computed计算函数

它可以根据其它数据的值进行计算，并且在该数据发生变化时自动更新。computed 的计算结果会被缓存，只有当计算所依赖的数据发生变化时才会重新计算。

<!--setup-开关：允许在script书写组合式API-->
<script setup>import {ref} from 'vue'
import {computed} from 'vue'const list = ref([1,2,3,4,5,6,7,8])const computedState = computed(() => {return list.value.filter(item => item > 2)
})setInterval(() => {list.value.push(9, 1)
}, 3000)
</script><template><div>原始数据{{list}}<br>计算属性筛选后{{computedState}}</div>
</template>

watch监听函数

作用：监听一个或者多个数据变化，数据变化时执行回调函数
两个额外参数：

  1. immediate（立即执行）
  2. deep（深度监听）
<!--setup-开关：允许在script书写组合式API-->
<script setup>import {ref,watch} from 'vue'
const count = ref(1)const setCount = ()=>{count.value += count.value
}watch(count,(newValue,oldValue) => {console.log('count发生了变化,从' + oldValue + '变为' + newValue)
})
</script><template><button @click="setCount">{{count}}</button>
</template>

监听多个数据

<!--setup-开关：允许在script书写组合式API-->
<script setup>import { ref, watch } from 'vue'const count = ref(1)
const name = ref('张三')const setCount = () => {count.value += count.value
}const setName = () => {name.value = '李四'
}watch([count, name], ([countValue, nameValue], [prevCountValue, prevNameValue]) => {console.log(`count从${prevCountValue}变为${countValue}，name从${prevNameValue}变为${nameValue}`)
})
</script><template><button @click="setCount">{{count}}</button><button @click="setName">{{name}}</button>
</template>

immediate（立即执行）

创建watch时立即进行一次回调，然后等待变化之后继续产生回调

<!--setup-开关：允许在script书写组合式API-->
<script setup>import { ref, watch } from 'vue'const count = ref(0)
watch(count,()=>{console.log('count发生了变化')
},{immediate:true
})const setCount = ()=>{count.value++
}
</script><template><button @click="setCount">{{count}}</button>
</template>

deep（深度监听）

（有性能消耗，尽量不开启）
watch默认是浅层监听，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

<!--setup-开关：允许在script书写组合式API-->
<script setup>import { ref, watch } from 'vue'const state = ref({count:0})
watch(state,()=>{console.log('数据变化了')
},{deep:true
})const setCount = ()=>{state.value.count ++
}
</script><template><button @click="setCount">{{state.count}}</button>
</template>

精确监听某个属性

<!--setup-开关：允许在script书写组合式API-->
<script setup>import { ref, watch } from 'vue'const state = ref({count:0,age:20})const setCount = () => {state.value.count ++
}const setName = () => {state.value.age++
}watch(()=> state.value.age,()=>{console.log('age变化了')}
)
</script><template><button @click="setCount">{{state.count}}</button><button @click="setName">{{state.age}}</button>
</template>

生命周期函数

在这里插入图片描述

代码演示

<!--setup-开关：允许在script书写组合式API-->
<script setup>import { onMounted } from 'vue'onMounted(() =>{console.log('mount1')
})onMounted(() => {console.log('mount3')
})onMounted(() => {console.log('mount2')
})
</script>

父子通信（父 -> 子）

基本思想

  1. 父组件中给子组件绑定属性
  2. 子组件内部通过props选项接收

传递单个数据

子

<!--Vue3组合式api实现-->
<script setup>const props = defineProps({message: String})console.log(props)
</script><template>{{message}}
</template>

父

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";</script><template><HelloWorld message="this is app message"></HelloWorld>
</template>

传递响应式数据

<!--Vue3组合式api实现-->
<script setup>const props = defineProps({message: String,count:Number})console.log(props)
</script><template>{{message}}---{{count}}
</template>
<!--setup-开关：允许在script书写组合式API-->
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
import {ref} from 'vue'
const count = ref(100)</script><template><HelloWorld :count="count" message="this is app message"></HelloWorld>
</template>

父子通信（子 -> 父）

基本思想

  1. 父组件中给子组件标签通过@绑定事件
  2. 子组件内部通过 $emit

子

<!--Vue3组合式api实现-->
<script setup>
const emit = defineEmits(['get-message'])const sendMsg = () =>{emit('get-message','this is son msg')
}
</script><template><button @click="sendMsg">sendMsg</button>
</template>

父

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
const getMessage = (msg) =>{console.log(msg)
}
</script><template><HelloWorld @get-message="getMessage"></HelloWorld>
</template>

分别获取dom对象和组件实例对象

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import {onMounted, ref} from 'vue'
import HelloWorld from "@/components/HelloWorld.vue";
const h1Ref = ref(null)
const comRef = ref(null)
// 组件挂在完毕之后才能获取
onMounted(()=>{console.log(h1Ref.value)console.log(comRef.value)
})
</script><template><h1 ref="h1Ref">我是dom标签h1</h1><HelloWorld ref="comRef"></HelloWorld>
</template>

defineExpose()

默认情况下在

子

<!--Vue3组合式api实现-->
<script setup>
const sendMsg = () =>{console.log('test')
}defineExpose({sendMsg
})
</script><template><button @click="sendMsg">sendMsg</button>
</template>

父

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import {onMounted, ref} from 'vue'
import HelloWorld from "@/components/HelloWorld.vue";
const h1Ref = ref(null)
const comRef = ref(null)
// 组件挂在完毕之后才能获取
onMounted(()=>{console.log(h1Ref.value)console.log(comRef.value)
})</script><template><h1 ref="h1Ref">我是dom标签h1</h1><HelloWorld ref="comRef"></HelloWorld>
</template>

跨层传递普通数据

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

  1. 顶层组件通过provide函数提供数据
  2. 底层组件通过inject函数获取数据

传递一般数据

在这里插入图片描述

传递响应式数据

在这里插入图片描述
在这里插入图片描述

slot插槽

在这里插入图片描述
他这个案例也用了插槽，理解了一点
在这里插入图片描述


http://www.ppmy.cn/news/80643.html

相关文章

【网络原理】TCP原理

【网络原理】TCP原理

✨个人主页&#xff1a;bit me&#x1f447; ✨当前专栏&#xff1a;Java EE初阶&#x1f447; 目 录 &#x1f343;一. 确认应答&#x1f342;二. 超时重传&#x1f341;三. 连接管理&#x1f33f;四. 滑动窗口&#x1f33b;五. 流量控制&#x1f340;六. 拥塞控制&#x1f49…
阅读更多...
Vue组件复杂表格高级编辑功能

Vue组件复杂表格高级编辑功能

Vue 组件复杂表格高级编辑功能 文章目录 Vue 组件复杂表格高级编辑功能1. sync 父子组件数据同步更新2. 在 el-table 中开发高级编辑表格功能3. 参考文献 在vue中组件的定义是希望组件可以做单一的功能&#xff0c;做到高复用&#xff0c;低耦合&#xff0c;所以父子组件之间的…
阅读更多...
kotlin协程高级概念

kotlin协程高级概念

使用kotlin协程提升应用性能 管理长时间运行的任务使用协程确保主线程安全withContext() 的效用 启动协程并行分解 协程概念CoroutineScope作业CoroutineContext 借助 Kotlin 协程&#xff0c;您可以编写干净、简化的异步代码&#xff0c;使您的应用能够及时响应&#xff0c;同…
阅读更多...
iOS App外包开发解决闪退问题

iOS App外包开发解决闪退问题

在iOS应用开发中&#xff0c;闪退&#xff08;应用程序意外退出&#xff09;是一个常见的问题。为了查找和解决闪退问题&#xff0c;可以使用以下工具和方法。今天和大家分享这方面的知识&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开…
阅读更多...
车载基础软件——嵌入式系统时间特性分析

车载基础软件——嵌入式系统时间特性分析

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 人们会在生活中不断攻击你。他们的主要武器是向你灌输对自己的怀疑&#xff1a;你的价值、你的能力、你的潜力。他…
阅读更多...
Golang每日一练(leetDay0076) 第k大元素、组合总和III

Golang每日一练(leetDay0076) 第k大元素、组合总和III

目录 215. 数组中的第K个最大元素 Kth-largest-element-in-an-array &#x1f31f;&#x1f31f; 216. 组合总和 III Combination Sum iii &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日…
阅读更多...
如何设计一个合格的高并发秒杀系统

如何设计一个合格的高并发秒杀系统

一、前言 在前面的文章中&#xff0c;详细阐述了建设秒杀系统的目标与存在的挑战&#xff0c;并且简单罗列了如何应对这些挑战的方式。本章&#xff0c;就详细阐述对秒杀系统存在挑战的应对之道&#xff0c;最终构建出兼具高并发、高性能和高可用的秒杀系统。心中不仅了解建设…
阅读更多...
Android 12.0无源码apk设置默认启动Launcher的相关属性

Android 12.0无源码apk设置默认启动Launcher的相关属性

1.概述 在12.0的系统产品开发中，对于一些产品的需求，需要将一些无源码app的某个MainActivity作为启动Launcher页面的功能实现，由于没有源码，所以需要 利用PMS的安装解析apk的AndroidManifest.xml的时候，在判断是某个Activity的时候，设置Lancher属性来实现某些功能 2.无源…
阅读更多...
最新文章

Copyright @ 2022~2023