vue3项目的创建、入口文件、全局方法、生命周期函数、setup中的生命周期函数使用、data的函数方式
vue2 中的全局方法都是添加在 Vue 类的静态方法或属性当中,而在 vue3 中,我们把全局方法都添加在了 app 实例当中。由于组合API(setup())中生命周期钩子函数能够执行多次,所以我们可以使用自定义钩子,实现不同的功能。注意:setup中,它不能使用this,它里面没有 beforeCreate和created生命周期。// setup中,它不能使用this,它里面没有 befo
文章目录
1. 创建vue3项目
1.1 基于webpack的工程创建
在用这种方式创建vue3项目时,要注意以下几点:
- 确保你的vue-cli 脚手架版本在 4.5.0 以上,这样才能创建
- 检查脚手架版本 vue -V 或 vue --version
- 如果版本低话,请重新安装 vue-cli,使用命令为:
npm install -g @vue/cli
创建流程:
-
在命令提示符输入
vue create vue3-project
-
选择安装方式:
-
选择安装的模块
-
选择安装的vue版本
-
路由的模式
-
ccs预处理
-
配置文件的存储位置
-
不保存创建项目的设置,到此项目创建成功
1.2 通过vite来创建vue3项目
-
在命令提示符输入以下命令:
yarn create vite myapp01_vite
-
选中vue进行创建
-
选择语言模式
-
至此,项目创建完成,按提示运行项目
最后,我们来看一下创建成功后的目录结构:
vue3插件推荐
1.3 通过npm init vue@3创建项目
使用create-vue来创建vue3项目,它也是基于vite来构建的
命令:
npm init vue@3
指定项目名称:
选择需要的配置:
2. vue3入口文件
vue3 的入口文件,相对于 vue2 做了一定改变:
// 创建vue入口程序,由原来的类实例,变成现在的函数方式,为了更好在打包时优化代码
import { createApp } from 'vue'
// 根组件
import App from './App.vue'
// 实例化一个Vue顶层组件
const app = createApp(App)
app.mount('#app')
3. vue3中的全局方法修改
vue2 中的全局方法都是添加在 Vue 类的静态方法或属性当中,而在 vue3 中,我们把全局方法都添加在了 app 实例当中。
2.x Global API | 3.x Instance API(app) |
---|---|
Vue.config | app.config |
Vue.config.productionTip | 已移除 |
Vue.config.ignoredElements | app.config.isCustomElement |
Vue.component | app.component |
Vue.directive | app.directive |
Vue.mixin | app.mixin |
Vue.use | app.use |
示例:
入口文件(main.js):
// 创建vue入口程序,由原来的类实例,变成现在的函数方式,为了更好在打包时优化代码
import { createApp, h } from 'vue'
// 根组件
import App from './App.vue'
// 实例化一个Vue顶层组件
const app = createApp(App)
// vue3中把之前vue2中的全局方法进行了改变,全都迁移到app实例上
// 定义一个全局组件
app.component('loading', {
render() {
return h('h1', null, '加载中...')
}
})
// 给vue添加全局的成员属性
app.config.globalProperties.$http = '我是网络请求对象'
// 全局自定义指令 v-red
// 7个钩子函数:created beforeMount mounted beforeUpdate updated beforeUnmount unmounted
app.directive('red', {
created(el) {
el.style.cssText = 'color:red;'
},
// 删除app组件
// mounted(el) {
// el.remove()
// }
})
// 全局混入
app.mixin({
data() {
return {
title: '我是全局混入'
}
},
mounted() {
console.log('全局混入 -- mounted');
}
})
// 全局插件
app.use(instanceVue => {
// console.log(instanceVue);
instanceVue.component('test', {
render() {
return h('h3', null, '我是插件中定义的组件')
}
})
})
app.mount('#app')
App组件(App.vue):
<template>
<div>
<h3 v-red>App组件--{{ title }}</h3>
<!-- 全局组件 -->
<loading />
<test />
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$http, '组件内')
}
}
</script>
<style lang="scss" scoped>
</style>
4. vue3中封装全局方法
入口文件(main.js):
// 创建vue入口程序,由原来的类实例,变成现在的函数方式,为了更好在打包时优化代码
import { createApp } from 'vue'
// 根组件
import App from './App.vue'
import createGlobalComponent from './components'
import globalProperties from './config/globalProperties'
// 实例化一个Vue顶层组件
const app = createApp(App)
// 创建全局组件
// createGlobalComponent(app)
app.use(createGlobalComponent)
app.use(globalProperties)
app.mount('#app')
App组件(App.vue):
<template>
<div>
<h3>App组件</h3>
<loading />
<test />
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
console.log(this.$http, '组件内')
}
}
</script>
<style lang="scss" scoped></style>
commponents入口文件(index.js):
import loading from './loading'
import test from './test'
const createGlobalComponent = app => {
loading(app)
test(app)
}
export default createGlobalComponent
loading组件(index.js):
import loading from './loading.vue'
export default app => app.component('loading', loading)
loading组件(loading.vue):
<template>
<div>
<h3>加载中</h3>
</div>
</template>
<script>
export default {
setup() {
return {}
}
}
</script>
<style lang="scss" scoped>
h3 {
color: red;
}
</style>
test组件同loading组件代码基本一致,这里省略。
全局成员属性配置文件(config/globalProperties.js):
export default app => {
// 给vue添加全局的成员属性
app.config.globalProperties.$http = '我是网络请求对象'
}
运行结果:
5. vue3生命周期函数
执行顺序:
6. setup中生命周期使用
<template>
<div>
<h3>App组件</h3>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
// setup 配置选项出现,为了照顾vue2,又想使用vue3
// setup它就是组合Api的入口
// setup中,它不能使用this,它里面没有 beforeCreate和created生命周期
// 返回值 {} | ()=>{}
setup() {
// setup中的生命周期能执行多次
onMounted(() => {
console.log('我是一个mounted生命周期')
})
onMounted(() => {
console.log('我是一个mounted生命周期')
})
onMounted(() => {
console.log('我是一个mounted生命周期')
})
onMounted(() => {
console.log('我是一个mounted生命周期')
})
return {}
},
// 这个生命周期只能执行一次
// mounted(){
// console.log('aaa');
// }
}
</script>
<style lang="scss" scoped>
</style>
由于组合API(setup())中生命周期钩子函数能够执行多次,所以我们可以使用自定义钩子,实现不同的功能。
注意:setup中,它不能使用this,它里面没有 beforeCreate和created生命周期。
我们可以创建一个 hooks 文件,用来存储,我们自定义的钩子函数,例如下面这个函数:
usePrintHook.js:
import { onMounted } from 'vue';
const usePrintHook = () => {
// 在挂载完成后,输出一句话
// 初始化时,进行网络请求
// 挂载完成后,进行dom操作
onMounted(() => {
console.log('我是一个mounted生命周期')
})
// 可以书写返回值
return 'abc'
}
export default usePrintHook
App组件(App.vue):
<template>
<div>
<h3>App组件</h3>
</div>
</template>
<script>
import usePrintHook from './hooks/usePrintHook'
export default {
setup() {
let ret = usePrintHook()
return {}
}
}
</script>
<style lang="scss" scoped>
</style>
7. data函数方式
data 只能定义成一个函数,例如下面这样:
<template>
<div>
<h3>{{ count }}</h3>
<button @click="handleAddClick">add</button>
</div>
</template>
<script>
import _ from 'lodash'
export default {
// vue3中的data属性,要求全都为函数且返回一个对象
data() {
return {
count: 100
}
},
// 它是一个方法,每次来获取都是新,复用时,不会受到相互的影响,对于性能是一种提升
created() {
// this.handleAddClick = () => this.count++
this.handleAddClick = _.debounce(() => this.count++, 100)
},
methods: {
// 这种方法对于可复用组件有潜在的问题,因为它们都共享相同的防抖函数。
// 为了使组件实例彼此独立,可以在生命周期钩子的 created 里添加该防抖函数
// handleAddClick() {
// this.count++
// }
}
}
</script>
<style lang="scss" scoped></style>
更多推荐
所有评论(0)