深圳网站建设网络推广公司,免费虚拟主机网站源码,关键词分析工具有哪些,个体户可以做开发网站业务嘛重新认识一下 vue 应用实例
#x1f495; 创建应用实例
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数#xff0c;可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
//…重新认识一下 vue 应用实例 创建应用实例
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
// main.js
import App from ./App.vue
import { createApp } from vueconst app createApp(App)
app.mount(#app)因此我们可以在入口文件中通过创建多个 DOM 节点并在 main.js 文件中创建多个应用实例 app.createApp()、app.createSSRApp()
✔createApp 除了可以传递第一个参数是根组件外还可以传递第二个参数可选它是要传递给根组件的 props
// main.js
import App from ./App.vue
import { createApp } from vueconst app createApp(App, { msg: 我是通过 createApp 传递给到 根组件 的 })
app.mount(#app)// App.vue
const props defineProps({msg: {type: String}
})
onMounted(() {console.log(props.msg) // 我是通过 createApp 传递给到 根组件 的
})✔createSSRApp()以 SSR 激活模式创建一个应用实例。用法与 createApp 完全相同。 app.mount()、app.unmount()
✔mount将应用实例挂载在一个容器元素中。对于每个应用实例mount 仅能调用一次。
参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)
app.mount(#app)
app.mount(document.body.firstChild) // 挂载到一个实际的 DOM 元素✔unmount卸载一个已挂载的应用实例。卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子。
import App from ./App.vue
import { createApp } from vueconst app createApp(App)
app.mount(#app)// 2s 后 销毁掉 应用实例
setTimeout(() {app.unmount()
}, 2000)在组件 HelloWorld 中当应用挂载完成后2s 后销毁应用可以发现其应用组件树内所有组件的卸载生命周期钩子都会触发
script setup
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from vue
onMounted(() {console.log(HelloWorld Mounted)
})
onBeforeMount(() {console.log(HelloWorld BeforeMount)
})
onBeforeUnmount(() {console.log(HelloWorld BeforeUnmount)
})
onUnmounted(() {console.log(HelloWorld UnMounted)
})
/scriptapp.component()
✔component用于全局组件的注册后续在该应用实例下的所有组件都可以使用该组件无需再次局部注册
import App from ./App.vue
import { createApp } from vue
import HelloWorld from ./components/HelloWorld
const app createApp(App)
app.mount(#app)// 注册全局组件
app.component(HelloWorld, HelloWorld)但全局注册有以下几个问题
✨如果你全局注册了一个组件即使它并没有被实际使用它仍然会出现在打包后的 JS 文件中tree-shaking✨在父组件中使用子组件时不太容易定位子组件的实现。和使用过多的全局变量一样这可能会影响应用长期的可维护性
相比之下局部注册的组件需要在使用它的父组件中显式导入并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确并且对 tree-shaking 更加友好。
script setup
import HelloWorld from ./components/HelloWorld.vue
/script
templateHelloWorld /
/templateapp.directive()
✔ directive全局注册自定义指令 什么是自定义指令 利用组件的生命周期钩子函数重用涉及普通元素的底层 DOM 访问的逻辑。vue 提供了内置指令如v-model、v-show、v-if 在组件中实现自定义指令
script setup
const customFocus {// 组件挂载时自动获取焦点 mounted: (el) el.focus()
}
/script
template
input custom-focus /
/template全局注册这里实现一个权限控制的自定义指令
button v-auth[importUser]/button// authBtn.js
import store from /storefunction checkPermission (el, binding) {// 获取绑定的值此处为权限 value: [importUser]const { value } binding// 获取所有的功能指令后端请求回来的数据const points store.getters.userInfo.permission.points// 当传入的指令集为数组时if (value value instanceof Array) {// 匹配对应的指令const hasPermission points.some(point {return value.includes(point)})// 如果无法匹配则表示当前用户无该指令那么删除对应的功能按钮if (!hasPermission) {// 移除节点el.parentNode el.parentNode.removeChild(el)}} else {// eslint-disabled-next-linethrow new Error(v-permission value is [admin,editor])}
}export default {// 在绑定元素的父组件被挂载后调用mounted (el, binding) {checkPermission(el, binding)},// 在包含组件的 VNode 及其子组件的 VNode 更新后调用update (el, binding) {checkPermission(el, binding)}
}// 指令入口文件将定义的组件进行抛出
import authBtn from ./authBtn
export default app {app.directive(v-auth, authBtn)
}import App from ./App.vue
import { createApp } from vue
import HelloWorld from ./components/HelloWorld
const app createApp(App)
app.mount(#app)// main.js
import installDirective from /directives
installDirective(app)app.use()
✔use安装一个插件 如何安装一个插件 安装一个插件的本质是通过传递应用实例对象给到自定义插件中在插件中针对这个对象进行操作 那它是通过什么方式将应用实例对象进行传入的 通过 use 方法进行安装默认会调用插件的 install 方法有点 component 的使用方式 import App from ./App.vue
import { createApp } from vue
import myPlugin from ./pluginconst app createApp(App)
// 安装插件
app.use(myPlugin, {type: 参数类型,msg: 自定义插件
})app.mount(#app)const myPlugin {install: (app, options) {console.log(安装自定义的组件)console.log(app, 应用实例对象)console.log(options, 配置参数)// 进行安装操作。。。。// 如挂载一个全局变量注册全局组件依赖注入等}
}export default myPluginapp.mixin()
✔mixin应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。 不推荐 Mixins 在 Vue 3 支持主要是为了向后兼容因为生态中有许多库使用到。在新的应用中应尽量避免使用 mixin特别是全局 mixin // main.js
import App from ./App.vue
import { createApp } from vue
const app createApp(App)const myMixin {data() {return {message: Hello World}},created() {console.log(Mixin created);},methods: {someMethod() {console.log(Mixin method);},}
}// 注入 mixin
app.mixin(myMixin)app.mount(#app)!-- HelloWorld --
div{{ message }}button clicksomeMethod测试/button
/div
script
export default {created() {console.log(Component created)},methods: {componentMethod() {console.log(Component method);}}
}
/scriptapp.provide()
✔provide提供一个值可以在应用中的所有后代组件中注入使用
import App from ./App.vue
import { createApp } from vue
const app createApp(App)// 全局注入
app.provide(msg, hello)
app.mount(#app)在应用的某个组件中
!-- HelloWorld --
script setup
import { inject } from vue
const msg inject(msg)
/script
template
{{ msg }}
/template同理在某个组件中也可以通过provide 的方式将变量方法进行注入
script setup
import { provide } from vue
const location ref(North Pole)
const updateLocation () {location.value South Pole
}
provide(location, {location,updateLocation
})
/scriptscript setup
import { inject } from vueconst { location, updateLocation } inject(location)
/scripttemplatebutton clickupdateLocation{{ location }}/button
/templateapp.runWithContext()
✔runWithContext使用当前应用作为注入上下文执行回调函数vue3.3 以上
import { inject } from vueapp.provide(id, 1)const injected app.runWithContext(() {return inject(id)
})console.log(injected) // 1app.version
✔version提供当前应用所使用的 Vue 版本号
通过判断当前 vue 版本执行不同的安装插件方式
export default {install(app) {const version Number(app.version.split(.)[0])if (version 3) {console.warn(This plugin requires Vue 3)}}
}app.config.globalProperties
✔globalProperties用于注册能够被应用内所有组件实例访问到的全局属性的对象
app.config.globalProperties.$msg 123templateHelloWorld :msg$msg /
/template不常用 app.config.optionMergeStrategies
✔optionMergeStrategies一个用于定义自定义组件选项的合并策略的对象
const app createApp({// 自身的选项msg: Vue,// 来自 mixin 的选项mixins: [{msg: Hello }],mounted() {// 在 this.$options 上暴露被合并的选项console.log(this.$options.msg)}
})// 为 msg 定义一个合并策略函数
app.config.optionMergeStrategies.msg (parent, child) {return (parent || ) (child || )
}app.mount(#app)
// 打印 Hello Vue不常用 app.config.errorHandler()
✔errorHandler用于为应用内抛出的未捕获错误指定一个全局处理函数
interface AppConfig {errorHandler?: (err: unknown, // 错误对象instance: ComponentPublicInstance | null, // 触发该错误的组件实例info: string // 指出错误来源类型信息的字符串) void
}它可以从下面这些来源中捕获错误
组件渲染器事件处理器生命周期钩子setup() 函数侦听器自定义指令钩子过渡 (Transition) 钩子
app.config.errorHandler (err, instance, info) {console.log(err, err)console.log(instance, instance)console.log(info, info)
}script setup
const throwError () {throw new Error(错误信息)
}
/script
templatebutton clickthrowError抛出错误/button
/template不常用 app.config.warnHandler()
✔warnHandler用于为 Vue 的运行时警告指定一个自定义处理函数
interface AppConfig {warnHandler?: (msg: string, // 警告信息instance: ComponentPublicInstance | null, // 组件实例trace: string // 组件追踪字符串) void
}不常用 app.config.performance
✔performance设置此项为 true 可以在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪。 不常用 app.config.compilerOptions
✔ 官方解释 ✔ 自己的理解运行编译 vue 文件时需要调用一些内部内部compilerOptions配置好的方法。我们可以通过修改 compilerOptions 提供的方法来改写编译过程的一些方法。不对的话请多多指教 不常用 app.config.compilerOptions.isCustomElement()
✔isCustomElement用于指定一个检查方法来识别原生自定义元素
// 将所有标签前缀为 ion- 的标签视为自定义元素
app.config.compilerOptions.isCustomElement (tag) {return tag.startsWith(ion-)
}不常用 app.config.compilerOptions.whitespace
✔whitespace用于调整模板中空格的处理行为 类型 condense | preserve 默认 condense 详细信息 Vue 移除/缩短了模板中的空格以求更高效的模板输出。默认的策略是“缩短”表现行为如下 元素中开头和结尾的空格字符将被缩短为一个空格。包含换行的元素之间的空白字符会被删除。文本节点中连续的空白字符被缩短成一个空格。 设置该选项为 preserve 则会禁用 (2) 和 (3) 两项。 不常用 app.config.compilerOptions.delimiters
✔delimiters用于调整模板内文本插值的分隔符 类型 [string, string] 默认 [{{, }}] 详细信息 此项通常是为了避免与同样使用 mustache 语法的服务器端框架发生冲突。 不常用 app.config.compilerOptions.comments
✔comments用于调整是否移除模板中的 HTML 注释 详细信息 默认情况下Vue 会在生产环境移除所有注释设置该项为 true 会强制 Vue 在生产环境也保留注释。在开发过程中注释是始终被保留的。这个选项通常在 Vue 与其他依赖 HTML 注释的库一起使用时使用
