文章目录
vite_2">1. vite
vue官方提供了两种快速创建工程化项目的方式，一种是基于 vue-cli 创建的SPA项目，另一种就是基于 vite 创建的SPA项目。两者的区别如下：
| 说明 | vite | vue-cli |
|---|---|---|
| 支持的vue版本 | 仅支持vue3.x | 支持vue3.x、2.x |
| 是否基于webpack | 否 | 是 |
| 运行速度 | 快 | 较慢 |
| 功能完整度 | 小而巧（正在慢慢完善） | 大而全（基本完善） |
| 企业及项目完整情况 | 向主流发展 | 目前主流 |
vite作为新新一代的构建工具，他的优势有以下几点：
- 开发环境中，无需打包快速冷启动
- 轻量级热重载，按需编译等
vue3x_18">2. 创建vue3.x项目
vite_19">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
vue3x_63">2.2 使用vue-cli创建vue3.x项目
- 安装最新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
- 创建项目：
执行命令
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
vue3x__142">3. vue3.x 基本使用
3.1 响应式基础
响应式对象其实是 JavaScript Proxy （Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等），其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。
要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。
3.1.1 reactive() 方法
reactive() API 有两条限制：
- 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
- 因为 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>
vue3vue2_299">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()方法
- vue引入reactive或者ref
- 使用reactive()方法来声名对象数组等类型的数据为响应性数据，ref()方法来声明String，Number等类型的数据为响应性数据
- 用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据
import { reactive } 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 传参
- 父组件传子组件
在父组件的子组件标签中定义一个属性，在子组件中用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' }
}
},
})
- 子组件传父组件
父组件
<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. 总结、注意事项
- setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）
- setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数
- 执行 setup 时，组件实例尚未被创建，this不指向vue实例，vue将setup函数中的this指向改成undefined。
- 与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)
注意事项：
- setup中不能使用this，setup中的this是undefined。
- setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
如果需要解构 prop，通过使用 setup 函数中的toRefs 来完成
本章内容到此结束，希望能该你带来帮助
