建网站和建小程序多少钱,wordpress原图对比插件,百度搜索指数入口,网络挣钱的正经路子VUE3照本宣科——应用实例API与setup 前言一、应用实例API1.createApp()2.app.use()3.app.mount() 二、setup 前言 #x1f468;#x1f4bb;#x1f468;#x1f33e;#x1f4dd;记录学习成果#xff0c;以便温故而知新 “VUE3照本宣科”是指照着中文官网和菜鸟教… VUE3照本宣科——应用实例API与setup 前言一、应用实例API1.createApp()2.app.use()3.app.mount() 二、setup 前言 记录学习成果以便温故而知新 “VUE3照本宣科”是指照着中文官网和菜鸟教程这两个“本”来学习一下VUE3。以前也学过VUE2当时只再gitee留下一些代码却没有记录学习的心得体会有时也免不了会追忆一下。
以后出现“中文官网”不做特殊说明就是指https://cn.vuejs.org/菜鸟教程就是指https://www.runoob.com/vue3/vue3-tutorial.html 一、应用实例API
中文文档中应用实例API 有很多本文选择前文所述的“zbxk”项目中默认代码中出现的API介绍。
前文讲过“index.html”是前端应用的入口 首先能看到的是一个ID为app的div这是SPA渲染的根然后看到的是引入了src目录下的“main.js”。 接着看main.js如图 从截图中可以看到createApp() 、app.use() 及app.mount() 3个应用实例API中文文档实际上有一堆的应用实例API但是zbxk项目中没有出现所以不做介绍。有需要深入了解的请参看应用实例 API 。
1.createApp()
功能是创建一个应用实例。 function createApp(rootComponent: Component, rootProps?: object): App 第一个参数是根组件。第二个参数可选它是要传递给根组件的 props。 项目中的代码
const app createApp(App)是用组件App创建应用app而组件App是整个项目的父组件
2.app.use()
功能是安装一个插件。 interface App { use(plugin: Plugin, …options: any[]): this } 第一个参数应是插件本身可选的第二个参数是要传递给插件的选项。 插件可以是一个带 install() 方法的对象亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。 若 app.use() 对同一个插件多次调用该插件只会被安装一次。 项目中的代码
app.use(createPinia())
app.use(router)安装了2个插件分别是状态管理器与路由。
3.app.mount()
功能是将应用实例挂载在一个容器元素中。 参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。 如果该组件有模板或定义了渲染函数它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下容器元素的 innerHTML 将被用作模板。 对于每个应用实例mount() 仅能调用一次。 项目中的代码
app.mount(#app)是把新建的实例app挂载到ID为app的div上。有时也会说成渲染到ID为app的div上所表达的是一个意思。
二、setup
setup() 钩子是在组件中使用组合式 API 的入口通常只在以下情况下使用 1.需要在非单文件组件中使用组合式 API 时。 2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。 对于结合单文件组件使用的组合式 API推荐通过 script setup 以获得更加简洁及符合人体工程学的语法。
所以本系列如果不做特别说明都是尽量使用script setup
在src/view目录下AboutView.vue文件添加如下代码
script
export default {setup(props, context) {// 透传 Attributes非响应式的对象等价于 $attrsconsole.log(context.attrs)// 插槽非响应式的对象等价于 $slotsconsole.log(context.slots)// 触发事件函数等价于 $emitconsole.log(context.emit)// 暴露公共属性函数console.log(context.expose)}
}
/script来看一下setup() 钩子的效果。 运行效果如图 setup 函数的第一个参数是组件的 props。和标准的组件一致一个 setup 函数的 props 是响应式的并且会在传入新的 props 时同步更新。 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值。 setup() 中需要介绍的内容内容还有一些zbxk项目没有现成代码所以就放到后续来介绍。
setup() 请参看https://cn.vuejs.org/api/composition-api-setup.html script setup 请参看https://cn.vuejs.org/api/sfc-script-setup.html
