目录
创建vue3
创建vue3项目工程代码命令
npm create vite@latest vue3-js-vite-project --template vue组合式api
函数式编程，而不是分散在选项式 API 的各个选项中（如 data、methods、computed）
vue2为选项式编程，结构冗余
vue3 响应式数据和方法直接在 <script setup> 中定义，代码简洁
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>- 生命周期钩子：
- 如
onMounted、onUnmounted等，替代选项式 API 的mounted、beforeDestroy等。
- 如
-
computed：创建派生数据，自动追踪依赖并缓存结果
ref&reactive
- ref用于创建基本类型或对象引用的响应式数据。
在代码中访问、修改ref修饰的变量要通过.value的方式；模板中可以直接访问。
- reactive用于创建深层响应式的复杂对象，直接访问属性。
声明引用类型时，嵌套层次不深时，两者都可以。嵌套层次深时，使用reactive
从
reactive对象中解构属性时，解构出的变量会变成普通值（原始类型）或普通对象（引用类型），与原始响应式对象断开连接。原始类型属性：解构后变成普通变量，修改时无法触发响应式更新
引用类型属性：虽然解构后仍指向同一对象，但若该对象未被
reactive递归代理（例如浅层响应式对象），其内部属性的修改也不会触发更新
组件间的数据传递
props传参
子组件中定义props，父组件向子组件传递参数
//子组件msg-sample
<script setup>
defineProps({
msg: String,
})
</script>
<template>
<div>{{ msg }}</div>
</template>
//父组件
<template>
<msg-sample msg="在渲染子组件时，父组件向子组件传递msg" />
</template>emit 发射事件
子组件向父组件发射事件并携带参数。父组件监听到时，触发相应事件接受参数
//子组件msg-sample
<script setup>
const msgFromComponent = ref("父组件监听到，子组件传递给父组件的msg")
let emit = defineEmits(["clickSample"])
function onClick(){
emit("clickSample",msgFromComponent)
}
</script>
<template>
<button @click="onClick">SampleButton</button>
</template>
//父组件
<script setup>
function sampleClicked(msg){
console.log("子组件被点击");
console.log(msg.value);
}
</script>
<template>
<msg-sample @clickSample="sampleClicked"/>
</template>provide&inject
祖先组件使用provide提供数据，后代组件通过inject获取数据
//APP.vue
<script setup>
let complexObj = reactive({
id : 0,
content : "祖先组件提供的msg"
})
provide("provideApp",complexObj)
</script>
<template>
<msg-root></msg-root>
</template>//msgRoot.vue
<script setup>
</script>
<template>
<msg-sample/>
</template>//msgSample.vue
<script setup>
let msgFromApp = inject("provideApp");
</script>
<template>
<div>{{ msgFromApp }}</div>
</template>完整代码
App.vue
<script setup>
import { provide, reactive } from 'vue';
import MsgRoot from './components/MsgRoot.vue';
let complexObj = reactive({
id : 0,
content : "祖先组件提供的msg"
})
provide("provideApp",complexObj)
</script>
<template>
<msg-root></msg-root>
</template>
<style scoped>
</style>
msgRoot.vue
<script setup>
import { inject, ref, reactive, provide } from 'vue'
import MsgSample from './MsgSample.vue';
function sampleClicked(msg){
console.log("子组件被点击");
console.log(msg.value);
}
</script>
<template>
<msg-sample @clickSample="sampleClicked" msg="在渲染子组件时，父组件向子组件传递msg" />
</template>
<style scoped>
</style>msgSample.vue
<script setup>
import { provide, reactive, ref, inject } from 'vue'
defineProps({
msg: String,
})
const msgFromComponent = ref("父组件监听到，子组件传递给父组件的msg")
let emit = defineEmits(["clickSample"])
function onClick(){
emit("clickSample",msgFromComponent)
}
let msgFromApp = inject("provideApp");
</script>
<template>
<div>MsgSample.vue</div>
<div>{{ msg }}</div>
<button @click="onClick">SampleButton</button>
<div>{{ msgFromApp }}</div>
</template>
<style scoped>
</style>