vue3项目的创建、入口文件、全局方法、生命周期函数、setup中的生命周期函数使用、data的函数方式

---

1. 创建vue3项目

1.1 基于webpack的工程创建

在用这种方式创建vue3项目时，要注意以下几点：

1. 确保你的vue-cli 脚手架版本在 4.5.0 以上，这样才能创建
2. 检查脚手架版本 vue -V 或 vue --version
3. 如果版本低话，请重新安装 vue-cli，使用命令为：npm install -g @vue/cli

创建流程：

1. 在命令提示符输入vue create vue3-project

2. 选择安装方式：

   

3. 选择安装的模块

   

4. 选择安装的vue版本

   

5. 路由的模式

   

6. ccs预处理

   

7. 配置文件的存储位置

   

8. 不保存创建项目的设置,到此项目创建成功

   

1.2 通过vite来创建vue3项目

1. 在命令提示符输入以下命令：yarn create vite myapp01_vite

   

2. 选中vue进行创建

   

3. 选择语言模式

   

4. 至此，项目创建完成，按提示运行项目

   

最后，我们来看一下创建成功后的目录结构：

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>