文章目录
前言
文章vue3语法
setup
1.若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。
2.若返回一个渲染函数：则可以自定义渲染内容。
3.V3里this不再是指向Vue实例，访问this会是undefined
import {
ref, reactive,computed } from 'vue'
export default {
name: 'Home',
setup(props, context) {
1. ref和reactive创建响应式数据
const title = ref('标题')
const data = reactive({
value: '哈哈哈'
})
console.log(title.value)
console.log(data.value)
computed计算属性
2.computed计算属性
// 简写语法
let fullName = computed(() => {
return person.firstName + '-' + person.lastName
})
// 完整语法
let fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
.watch 监听
3.watch 监听
ref 响应式数据
sum or [sum,sum]
watch(sum, (newValue, oldValue) => {
console.log('sum变化了', newValue, oldValue)
}, {
immediate:true})
reative响应式数据
[() => person.job,() => person.job] or () => person.job or person.job
watch(() => person.job, (newValue, oldValue) => {
console.log('person的job变化了', newValue, oldValue)
}, {
immediate:true, deep:true })
watchEffect 监听回调
4，watchEffect 监听回调
// 回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(() => {
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})
```
# 生命周期
```javascript
5.生命周期
V3生命周期全都写在setup中
beforeDestroy 改名为 beforeUnmount
destroyed 改名为 unmounted
beforeCreate => setup
created => setup
beforeMount => onBeforeMount
mounted => onMounted
beforeUpdate => onBeforeUpdate
updated => onUpdated
beforeUnmount => onBeforeUnmount
unmounted => onUnmounted
customRef函数
6.customRef函数
// 实现防抖函数
const fn = function(value, delay = 500) {
let timeout
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
clearInterval(timeout)
timeout = setTimeout(() => {
console.log(newValue)
value = newValue
trigger()
}, delay)
}
}
})
}
const keyword = fn('', 500)
provide & inject 通信
7.provide & inject 通信
// 祖组件
setup(){
let car = reactive({
name:'奔驰', price:'40万' })
provide('car', car)
}
// 后代组件
setup(props, context){
const car = inject('car')
return {
car }
}
```
```javascript
8.判断响应式数据
1.1检查一个值是否为一个ref对象
const val = ref('xxx')
isRef(val) // true
1.2检查一个值是否为一个isReactive对象
const val = isReactive({
})
isRef(val) // true
1.3检查一个对象是否是由readonly创建的只读代理
const state = readonly({
name: 'John'
})
console.log(isReactive(state)) // true
1.4检查对象是否是由reactive或readonly创建的proxy
const state = reactive({
name: 'John'
})
console.log(isProxy(state)) // true
return {
title,
data,
fullName
}
}
}
以上1-8写在setup里
teleport 移动dom组件
<teleport to="移动位置">
<div v-if="isShow" class="mask">
<div class="dialog">
<h3>我是一个弹窗</h3>
<button @click="isShow = false">关闭弹窗</button>
</div>
</div>
</teleport>
// to的格式
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />
// disabled的格式
<teleport to="#popup" :disabled="displayVideoInline">
<video src="./my-movie.mp4">
</teleport>
Suspense 异步渲染组件
<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template #default>
<Child/>
</template>
<template #fallback>
<h3>加载中.....</h3>
</template>
</Suspense>
</div>
</template>
import {
defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('./components/Child.vue'))
components: {
Child
}
将全局的API，即：Vue.xxx调整到应用实例（app）上
V2的api V3的api
Vue.config.xxxx app.config.xxxx
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties
Ref获取DOM
<div ref="Qrcode" class="qr_codeode_url" />
import {
ref } from 'vue'
export default {
setup() {
const Qrcode = ref(null)
// 挂载后
onMounted(() => {
console.log(Qrcode.value)
})
return {
Qrcode
}
}
}
循环中的ref 函数push进数组
V3中在for循环元素上绑定ref将不再自动创建$ref数组。要从单个绑定获取多个ref，请将ref绑定到一个更灵活的函数上
itemRefs不必是数组：它也可以是一个对象，其ref可以通过迭代的key被设置
如有需要，itemRef也可以是响应式的，且可以被侦听
<div v-for="item in list" :ref="setItemRef"></div>
import {
onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}
emits自定义事件
定义一个组件可以向其父组件触发的事件
// 在子组件中
<h1 @click="father">{
{
msg }}</h1>
export default {
name: 'HelloWorld',
props: {
msg: {
type: String,
default: ''
}
},
emits: ['close'],
setup(props, {
emit }) {
const father = function() {
emit('close', 'child')
}
return {
father
}
}
}
// 在父组件中
<HelloWorld :msg="msg" @click="fn" @close="fn2"
$nextTick 异步更新
import {
nextTick } from 'vue'
nextTick(() => {
// ...
})
hook 生命周期事件
通过事件来监听组件生命周期中的关键阶段
// V2的语法
<template>
<child-component @hook:updated="onUpdated">
</template>
// V3的语法
<template>
<child-component @vnode-updated="onUpdated">
</template>
// 驼峰写法
<template>
<child-component @vnodeUpdated="onUpdated">
</template
总结
提示：vue3语法