Vue3+vite，vue3基本使用文档

1. vite

vue官方提供了两种快速创建工程化项目的方式，一种是基于 vue-cli 创建的SPA项目，另一种就是基于 vite 创建的SPA项目。两者的区别如下：

说明	vite	vue-cli
支持的vue版本	仅支持vue3.x	支持vue3.x、2.x
是否基于webpack	否	是
运行速度	快	较慢
功能完整度	小而巧（正在慢慢完善）	大而全（基本完善）
企业及项目完整情况	向主流发展	目前主流

vite作为新新一代的构建工具，他的优势有以下几点：

1. 开发环境中，无需打包快速冷启动
2. 轻量级热重载，按需编译等

2. 创建vue3.x项目

2.1 使用vite创建的项目

兼容性注意：
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用NPM创建：

1｜ $ npm create vite@latest
或
1｜$ npm init vite-app 项目名称

2｜cd 项目名称

3｜npm install

4｜npm run dev

使用yarn：

1｜$ yarn create vite

2｜cd 项目名称

3｜yarn install

4｜yarn dev

然后按照提示操作就行。

也可以通过附加的命令来直接定义项目名称和钥匙用的模板，比如我们创建一个vite + vue3.x的项目，我们可以这样写

# npm 6.x
npm create vite@latest 项目名称 --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest 项目名称 -- --template vue

# yarn
yarn create vite 项目名称 --template vue

2.2 使用vue-cli创建vue3.x项目

1. 安装最新vue-cli

最新的vue-cli名称改成了 @vue/cli。如果你安装2.x以下版本请先卸载Vue Cli 4.x版本，Node.js版本要求v10以上版本

可以使用以下命令安装：

npm install -g @vue/cli
# 或
yarn global add @vue/cli

查看版本：

vue --version
# 或
vue -V

升级全局Vue Cli版本：

npm update -g @vue/cli
# 或
yarn global upgrade --latest @vue/cli

2. 创建项目：

执行命令

1| vue create hello-world

执行完上面的命令会出现以下选择配置项

Please pick a preset:
  Default ([Vue 2] babel, eslint)									// 版本2
> Default (Vue 3 Preview) ([Vue 3] babel, eslint) 					// 版本3
  Manually select features											// 手动选择

选择第三项后手动配置：

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

上下箭头移动，按空格键选中，按回车进入下一步


选择vue版本：选择3.x(Preview)

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter      
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  2.x
> 3.x (Preview)

后面操作根据自己需求进行配置

创建好以后

2| cd 项目名称
3| npm install
4| npm run serve

3. vue3.x 基本使用

3.1 响应式基础

响应式对象其实是 JavaScript Proxy （Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等），其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。

要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。

3.1.1 reactive() 方法

reactive() API 有两条限制：

1. 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
2. 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失：

let state = reactive({ count: 0 })
state = reactive({ count: 1 })
这种写法不具响应式

我们可以使用 reactive() 函数创建一个响应式对象或数组：

import { reactive } from 'vue'

export default {
  // `setup` 是专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })

    // 一定要暴露出去 state，不然模板娶不到值
    return {
      state
    }
  }
}

我们也可以在同一个作用域下定义改变响应式数据的方法。同样，我们需要吧方法也要暴露出去

import { reactive } from 'vue'

export default {
  setup() {
    const state = num({ count: 0 })
    function count() {
      state.num++
    }
    return {
      state,
      count
    }
  }
}

暴露的方法就是事件监听器，模版中使用该方法：

<button @click="count">
  {{ state.count }}
</button>

3.1.2 ref() 方法

Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式 ref，他并没有限制

import { ref } from 'vue'

export default {
  setup() {
    const num = ref(0)
    // ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象：
    console.log(num) // { value: 0 }
	console.log(num.value) // 0
	
	function count() {
	  num.value++
	  console.log(num.value) // 1
	}


	// 一个包含对象类型值的 ref 可以响应式地替换整个对象
	const objectRef = ref({ count: 0 })
	// 这是响应式的替换
	objectRef.value = { count: 1 }

	// ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：
	const obj = {
	  foo: ref(1),
	  bar: ref(2)
	}
	// 该函数接收一个 ref
	// 需要通过 .value 取值
	// 但它会保持响应性
	callSomeFunction(obj.foo)
	// 仍然是响应式的
	const { foo, bar } = obj

	return {
		num,
		obj，
		count
	}
  }
}

在模板中使用num

<template>
  <button @click="count">
    {{ num }} <!-- 无需 .value -->
  </button>
</template>

3.2 script setup

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用

<script setup>
import { reactive } from 'vue'

const state = reactive({ num: 0 })

function num() {
  state.num++
}
</script>

<template>
  <button @click="num">
    {{ state.num }}
  </button>
</template>

3.3 响应性语法糖

通常我们用了ref（）就必须得用.value来获取ref的值，非常繁琐，然而，通过编译时转换，我们可以让编译器帮我们省去使用 .value 的麻烦。Vue 提供了一种编译时转换，使得我们可以像这样书写之前的“计数器”示例：

<script setup>
let count = $ref(0)

function num() {
  // 不需要 .value
  count++
}
</script>

<template>
  <button @click="num">{{ count }}</button>
</template>

3. vue3和vue2不同之处

3.1 启动方式不同

vue3 启动方式

import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

vue2 启动方式

import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")

3.2 全局挂载方式不同

vue3 挂载

app.config.globalProperties.$alert = function(message){alert(message)}

vue2 挂载

Vue.prototype.$alert = function(message){alert(message)}

3.3 根节点有所改变

vue3 可以有多个根节点

<template>
  <div>hello world</div>
  <div>hello world111</div>
  <div>hello world222</div>
  <div>hello world333</div>
</template>

vue2 只允许有一个根节点

<template>
  	<div>
		<div>hello world</div>
		<div>hello world111</div>
		<div>hello world222</div>
		<div>hello world333</div>
	</div>
</template>

3.4 数据 data

vue3 需要用到setup()方法

1. vue引入reactive或者ref
2. 使用reactive()方法来声名对象数组等类型的数据为响应性数据，ref()方法来声明String，Number等类型的数据为响应性数据
3. 用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

import { reactive,ref } from 'vue'

export default {
  setup () {
    let state = reactive({
      name: '',
      password: ''
    })

	let num = ref(12)
    
    return { state,num }
  }
}

vue2 直接把数据放到了data属性中

import { reactive } from 'vue'

export default {
  data () {
    return {
      name: '',
      password: '',
      num: 12
    }
  }
}

3.5 组件之间传参不同

vue3 传参

1. 父组件传子组件

在父组件的子组件标签中定义一个属性，在子组件中用defineProps接收父组件传来的值，

父组件

<template>
  <son msg="父组件传的msg"></son>
</template>

<script setup>
import {ref,onMounted} from  'vue'
import son from '@/components/son.vue'
</script>

子组件

<template>
	<p>父组件传过来的：{{msg}}</p>
</template>

<script setup>
import {ref} from 'vue'
defineProps({
  msg: String,
})
</script>

defineProps接受数据类型和vue2中props一样，可以定义接收类型，定义初始值，加校验、

例如：

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
})

2. 子组件传父组件

父组件

<template>
  <section class="parent">
    <Child  @count="handleIncrease"></Child>
  </section>
</template>

<script setup>
  import Child from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
  const handleIncrease = () => {
    nums.value++;
  };
</script>

子组件

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
  const emits = defineEmits();
  const handelClick = () => {
    emits('count');
  };
</script>

vue2 子父传参就不多介绍了。相信大家都会

4. 总结、注意事项

1. setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）
2. setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数
3. 执行 setup 时，组件实例尚未被创建，this不指向vue实例，vue将setup函数中的this指向改成undefined。
4. 与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

注意事项：

1. setup中不能使用this，setup中的this是undefined。
2. setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，通过使用 setup 函数中的toRefs 来完成

本章内容到此结束，希望能该你带来帮助