1. version 版本
vue
提供了一个通用API (version)
, 用于获取当前使用vue
的版本.
示例:
import {version } from 'vue';
console.log('version', version)
version
通用属性的使用方式就是从vue
导入, 导入后的属性值就是当前使用vue
的版本
2. nextTick
nextTick
如果你使用过Vue2
开发, 你是不是有种很熟悉的感觉, 在Vue2
中和nextTick
具有相同功能的就是$nextTick
方法
在Vue2
中, 我们通过组件的实例对象获取$nextTick
, 具体使用为this.$nextTick()
, 通过调用$nextTick()
方法传入回调函数, 在页面下一次刷新完成后执行回调函数.
在Vue3
中直接全局导出了nextTick
API, 用于等待下一次 DOM
更新是执行回调函数, 就不用像vue2
一样通过组件实例对象调用了
和$nextTick
一样, nextTick
通用方法调用时, 参数接收一个回调函数, vue
在下一次DOM
更新时调用回调函数
示例:
<template>
<div>
<div ref="oWrap" class="wrap" :style="{ width: wid }"></div>
<button @click="change">修改宽度</button>
</div>
</template>
<script lang="ts">
import { defineComponent, version, ref, nextTick } from 'vue';
export default defineComponent({
setup() {
// 获取div dom节点对象
const oWrap = ref()
// div 宽度数据
const wid = ref('200px')
// 直接打印获取的dom 对象为null
console.log(oWrap.value)
// nextTick 下一次dom刷新时获取dom节点对象
nextTick(() => {
console.log(oWrap.value) // div dom对象
})
// 修改宽度
const change = () => {
// 修改div 宽度
wid.value = '400px'
// 获取dom 对象的宽度为之前的值:200px, 因为此时dom还没有刷新
console.log(oWrap.value.style.width)
// dom刷新以后之后回调函数, 获取宽度: 400px
nextTick(() => {
console.log(oWrap.value.style.width)
})
}
return { oWrap, wid, change }
}
})
</script>
# 3. defineComponent 在定义 `Vue` 组件时提供类型推导的辅助函数。在理解`defineComponent` API 使用前,我们先分析一下单文件组件的导出方式
3.1 单文件组件导出渲染函数
vue
中单文件组件, 返回可以是组件对象
, 也可以直接返回渲染函数
如果直接返回渲染函数
, 那么template
将失去意义, 因为有了渲染函数
以后, vue
不会再把template
模板编译为渲染函数
.
页面渲染的将是返回渲染函数
执行后得到的虚拟DOM
示例:
<script lang="ts">
import { h } from 'vue';
// 直接返回渲染函数
export default () => {
return h('div', null, 'hello')
}
</script>
运行效果:
可以看到没有template
模板的vue
组件也一样可以渲染内容, 渲染的就是渲染函数返回的vnode
3.2 单文件组件返回组件对象
其实比较常用的还是返回组件对象, 返回组件对象时,返回组件对象也有两种使用方式
- 可以直接在
setup
函数中返回渲染函数
, 不使用template
模板 - 也可以使用
template
模板,setup
函数返回一个对象, 这个对象的所有数据将会加载到组件对象上
setup 钩子函数返回渲染函数
示例:
<script lang="ts">
import { h } from 'vue';
// 返回组件对象
export default {
setup() {
// setup 中返回渲染函数
return () => {
return h('div', null, 'hello')
}
}
}
</script>
使用template 模板, setup 钩子函数返回数据对象
示例:
<template>
<div>{{ msg }}</div>
</template>
<script lang="ts">
export default {
setup() {
// setup 返回数据
return {
msg: 'hello'
}
}
}
</script>
3.3 使用defineComponent时
defineComponent
函数接收两个参数:
- 第一个参数为组件选项对象或setup函数
- 第二个参数: 当第一个参数时setup函数时, 第一个参数为其他选项对象
如果第一个参数为组件选项对象(常用的写法)
示例:
<template>
<div>{{ msg }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
// defineComponent 参数为组件选项对象
export default defineComponent({
name: 'app',
props: {
msg: {
type: String,
default: 'hello'
}
},
setup(props) {
console.log('props', props)
/*
{
msg:'hello'
}
*/
},
})
</script>
如果第一个参数为setup函数
示例:
<template>
<div>{{ msg }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
// defineComponent 参数为setup函数,第二个参数为组件其他选项对象
export default defineComponent(
// 第一个参数时setup函数
(props) => {
console.log('props', props)
return {}
},
// 第二个参数是其他选项对象
{
name: 'app',
props: {
msg: {
type: String,
default: 'hello'
}
},
}
)
</script>