全局创建挂载
在main.js中添加
import {
createApp } from 'vue'
import App from './App'
import store from '@store'
import router from '@router/index'
const app = createApp(App)
app.config.globalProperties.$httpUrl = 'https://www.baidu.com'
app.use(router)
.use(store)
.use(elementPlusUI)
.mount('#app')
全局方法
import {
createApp } from 'vue'
import App from './App'
import router from '@router/index'
const app = createApp(App).app.use(router).mount('#app')
app.config.globalProperties.$demoe = 'demo'
setup
<script>
export default {
setup(props) {
const readersNumber = ref(0)
return {
readersNumber,
}
}
}
</script>
<script steup></script>
响应式核心
ref
接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。
<script setup>
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
</script>
<template>
<!-- 自动浅解包 -->
<p>{
{
count}}</p>
</template>
reactive
const obj = reactive({
count: 0 })
// reactive 将解包所有深层的 refs，同时维持 ref 的响应性
const count = ref(1)
const obj1 = reactive({
count }) // reactive({ count: count })
console.log(obj1.count === count.value) // true，ref 会被解包
count.value++ // 它会更新 `obj.count`
console.log(count.value, obj1.count) // 2 2
obj1.count++ // 它也会更新 `count` ref
console.log(count.value, obj1.count) // 3 3
// 如果 obj1 = reactive({ count: count.value })，则不会解包ref，也不存在响应性
compouted
接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。
const count = ref(1)
const plusOne = computed(() => count.value + 1)
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})
watch
watch API 完全等同于选项式 API this.$watch。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
// 侦听深度嵌套对象或数组
watch(
() => obj,
(obj, prevObj) => {
console.log('deep', obj, prevObj)
},
{
deep: true, immediate: false }
)
watchEffect
立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数
const count = ref(0)
setTimeout(() => count.value++, 100)
watchEffect(() => console.log(count.value))
readonly
包裹一个对象（普通、响应式、ref），返回其只读代理，也是深度的，同样ref会自动解包
const raw = {
count: ref(123)
}
const copy = readonly(raw)
生命周期
beforeMount 挂载之前 改名 onBeforeMount
mounted 挂载之后 改名 onMounted
beforeUpdate 数据更新之前 改名 onBeforeUpdate
updated 数据更新之后 改名 onUpdated
beforeDestroy 销毁前 改名 onBeforeUnmount
destoryed 销毁后 改名 onUnmounted
activated -> onActivated
deactivated -> onDeactivated
依赖注入
对于嵌套多层的组件，想要传递参数，可以使用该api
provide：上层组件提供数据
inject：下层组件使用数据
// 上层组件
setup() {
provide('location', 'North Pole')
provide('geolocation', {
longitude: 90,
latitude: 135
})
}
// 下层组件
setup() {
const userLocation = inject('location', 'The Universe')
const userGeolocation = inject('geolocation')
return {
userLocation,
userGeolocation
}
}
// 响应式
setup(){
const color = ref("red");
provide('color',color)
return {
color
}
},
组件相关
defineProps 和 defineEmits : defineProps , defineEmits 无需导入，可直接使用
<script setup>
const props = defineProps({
foo: String })
const emit = defineEmits(['change', 'delete'])
</script>
<script setup>
defineProps({
foo: String })
</script>
<template>
<p>{
{
foo}}</p>
</template>
使用 setup的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何 setup 中声明的绑定。
为了在 setup组件中明确要暴露出去的属性，使用 defineExpose 编译器宏”
<script setup>
import {
ref,onMounted } from 'vue'
import Comp from './Comp.vue'
const comp = ref()
onMounted(() => {
console.log(comp.value.b)
comp.value.func()
})
</script>
<template>
<Comp ref="comp" />
</template>
<script setup>
import {
ref } from 'vue'
const a = 1
const b = ref(2)
function func() {
console.log('execute func')
}
defineExpose({
a, b, func })
</script>