片段
在Vue2.x中,由于Vue实例需要绑定到单个的DOM上面,而为了生成一个Vue实例,就需要一个唯一的根入口。因此,所有的组件都必须包含在一个根组件中,即必须由<div>
将组件包装起来。
1 | <template> |
而在Vue3.x中,组件可以支持多个根元素。但是,需要明确定义属性分布在哪里。在单个根元素时,非 prop attribute 将自动添加到根节点的 attribute 中。如果没有显式绑定$attrs
,将发出警告。在例子中,$attrs
被传递到<main>
上。
1 | <template> |
更多关于非 prop attribute的信息可以查看:非 Prop 的 Attribute
组合式 API 基础
通过下面这个例子,来大致了解组合式API。
因为组件API将组件属性公开为函数,所以第一步需要将所需的函数导入。
import {ref, computed, onMounted} from 'vue'
在该例子中,通过ref
设置响应式变量(即对值创建了一个响应式的引用,使之行为保持统一),通过computed
来建立计算属性(返回值是一个ref
的实例),通过onXXX来注册生命周期钩子(即mounted -> onMounted
)。
setup()函数
setup()函数接受两个参数:
props
;context
;
其中,props
是响应式的,即传入新的prop时,该参数将会更新。但是,由于props
是响应式的,不能使用ES6的解构,否则会消除prop的响应式。
当然,如果需要解构,可以通过toRefs
来保持响应式。
1 | import { toRefs } from 'vue' |
更多关于Refs的内容可以查看:Refs
在setup
中返回的refs在模板中使用的时候,将自动展开为其内部值,因此不用在模板中使用.value
。
由于是在解析其它组件选项之前被调用的,setup
中的this
是undefined
。而在参数context
中,暴露了一些以前在this
上暴露的 property 的选择列表:
attrs
slots
emit
注意:执行setup()函数的时候,组件实例还没有被创建,因此无法访问:
data
computed
methods
更多关于组合式API的内容可以查看:组合式API