《Vue.js前端开发技术与实践（第二版）》 课件 第5章 Vue常用组合式API

第5章Vue常用组合式API模板引用模板引用背景Vue通过指令对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。1、如何访问通过设置Dom元素的ref属性，需要声明一个同名的ref：在组件挂载后才能访问模板引用。//声明一个ref来存放该元素的引用

//必须和模板里的ref同名templatescriptsetupconstinput=ref(null)<inputref="input"/>componentonMounted(()=>{input.value.focus()})声明一个ref来存放该元素的引用必须和模板里的ref同名在组件挂载后才能访问模板引用console.log(input.value)//nullDom元素的ref属性在v-for中使用模板引用当在v-for中使用模板引用时，对应的ref中包含的值是一个数组，它将在元素被挂载后包含对应整个列表的所有元素：声明一个

ref([])组件上的ref板引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例。使用了<scriptsetup>的组件是默认私有的：一个父组件无法访问到一个使用了<scriptsetup>的子组件中的任何东西，除非子组件在其中通过defineExpose宏显式暴露：当父组件通过模板引用获取到了该组件的实例时，得到的实例类型为{a:number,b:number}组合式函数特定功能相关的所有东西都放到一起维护方便。比如功能A相关的响应式数据，操作数据的方法等放到一起。设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理组合式函数组合式函数核心逻辑完全一致，只是把它移到一个外部函数中去，并返回需要暴露的状态。在组合式函数中可以使用所有的组合式API命名：组合式函数约定用驼峰命名法命名，并以“use”作为开头。返回值：（1）对象解构，维持响应性连接。（2）对象属性的形式来使用组合式函数中返回的状态，回的对象用reactive()包装一次。回的对象用

reactive()

包装一次

插件(Plugins)插件插件(Plugins)是一种能为Vue添加全局功能的工具代码。插件安装：import{createApp}from'vue'constapp=createApp({})app.use(myPlugin,{/*可选的选项*/

})插件

插件是一个拥有install方法的对象，

也可以直接是一个安装函数本身。安装函数install安装函数会接收到安装它的应用实例和传递给app.use()的额外选项作为参数。constmyPlugin={install(app,options){//配置此应用

}}import{createApp}from'vue'constapp=createApp({})app.use(myPlugin,{/*可选的选项*/})插件应用场景主要包括以下几种：通过ponent()和app.directive()注册一到多个全局组件或自定义指令。通过vide()使一个资源可被注入进整个应用。向app.config.globalProperties中添加一些全局实例属性或方法状态管理抽取出组件间的共享状态，放在一个全局单例中来管理。组件树就变成了一个大的“视图”，而任何位置上的组件都可以访问其中的状态或触发动作。/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api动态组件比如Tab界面，会需要在两个组件间来回切换应用场景再比如不同权限的用户，看到界面有所不同动态组件实现<component>元素和特殊的isattribute实现的<component:is=“组件名称变量"></component>

markRaw（）

:is的值可以是以下几种：被注册的组件名导入的组件对象v