Vue3.0重磅来袭
1. Vue3.0项目创建（脚手架方式）
## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project
接下来按步骤走即可
- Please pick a preset - 选择 Manually select features
- Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
- Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
- Use class-style component syntax - 直接回车
- Use Babel alongside TypeScript - 直接回车
- Pick a linter / formatter config - 直接回车
- Use history mode for router? - 直接回车
- Pick a linter / formatter config - 直接回车
- Pick additional lint features - 直接回车
- Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
- Save this as a preset for future projects? - 直接回车
也可以直接选择默认版本先玩一下
2. 拉开序幕 —— setup()
- 为什么用拉开序幕这个词？因为它可以代替许多东西，用起来特别爽
2.1 简介：
- 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
- 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
2.1.1 一般使用场景（返回对象）
<template>
<div>
<h1>玩一波setup</h1>
<h2>姓名：{
{
name}}</h2>
<h2>年龄：{
{
age}} </h2>
<button @click="sayName">说话</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
setup(){
// 此处的数据是无法实现响应式的
// 下一小节讲如何让它变成响应式
let name = "法外狂徒张三"
let age = 3
function sayName(){
console.log(`我是${
name}, 我${
age}岁了`)
}
// 返回的数据可以直接显示在模板中
return{
name,
age,
sayName
}
}
}
</script>
- 可以在setup()中直接定义数据和方法
2.1.2 也可以用于返回一个模板（不常用，了解即可）
- 直接返回一个模板
return() => h('h1', 'vue3.0很牛逼')
3. 基本数据的响应式实现 —— ref()
- 先将 ref() 引入进来
- ref 用于处理基本数据类型
- 如果让它处理引用数据类型会很麻烦
<template>
<div>
<h1>玩一波setup</h1>
<h2>姓名：{
{
name}}</h2>
<h2>年龄：{
{
age}} </h2>
<button @click="change">修改</button>
</div>
</template>
<script>
import {
ref} from 'vue'
export default {
name: 'HelloWorld',
setup(){
let name = ref("法外狂徒张三")
let age = ref(3)
function change(){
// 基本数据 第一层用的是get set 第二层 对象用的是 Proxy代理
name.value = "李四";
age.value = 38;
}
return{
name,
age,
change
}
}
}
</script>
- 点击按钮，数据就会进行修改
4. 引用数据的响应式实现 —— reactive()
- 先将 reactive() 引入进来
- reactive()不能用于基本数据类型，会报错
<template>
<div>
<h1>玩一波setup</h1>
<h3>女朋友名字：{
{
gf.gfName}}</h3>
<h3>女朋友年龄：{
{
gf.gfAge}}</h3>
<h3>新属性C：{
{
gf.a.b.c}}</h3>
<h3>爱好： {
{
gf.hobby}}</h3>
<button @click="change">修改</button>
</div>
</template>
<script>
import {
reactive} from 'vue'
export default {
name: 'HelloWorld',
setup(){
let gf = reactive({
gfName: '刘亦菲',
gfAge: 18,
a:{
b:{
c: '我是属性C'
}
},
hobby: ['唱','跳','rap','篮球']
})
function change(){
gf.gfName="杨幂"
gf.gfAge = 38
// 深层次的对象可以处理
gf.a.b.c = "新的C属性"
// 数组可以直接改
gf.hobby[0] = "撩妹"
}
return{
gf,
change
}
}
}
</script>
5. FAQ（需要注意的地方）
5.1 setup()执行的时机
- 在beforeCreate之前执行(一次), 此时组件对象还没有创建
- this是undefined, 不能通过this来访问data/computed/methods / props
- 其实所有的composition API相关回调函数中也都不可以
5.1 setup()的返回值
- 一般都返回一个对象，为模板提供数据。也就是模板中可以直接使用此对象中的所有属性/方法
- 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
- 返回对象中的方法会与methods中的方法合并成功组件对象的方法
如果有重名, setup优先
注意:
- 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
- setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
5.3 reactive 与 ref 细节
-
这两者是Vue3的 composition API中2个最重要的响应式API
-
ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
-
如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
-
ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
-
reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
-
ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
-
本文先更新这几个API，后续会持续更新Vue3.0的内容，大家可以关注一波~
-
干货满满，并且会讲的非常详细！
1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我
