# vue3精讲

# ✨ 官网地址

官网文档:https://v3.cn.vuejs.org/

# 一、vue3安装与项目创建【掌握】

参考地址:https://www.vue3js.cn/docs/zh/guide/installation.html

# 准备工作:升级脚手架

对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli@next。要升级,你应该需要全局重新安装最新版本的 @vue/cli

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next
1
2
3

然后在 Vue 项目运行:

vue upgrade --next
1

# 方式1:以原有vueCli脚手架创建

创建项目:

vue create demo
1

直接选择 Vue 3 Preview ,并回车,不考虑eslint问题。

然后执行:

# 进入目录
cd demo
# 用vscode打开当前目录
code .
# 运行项目
yarn serve
1
2
3
4
5
6

# 方式2:vite创建

npm init vite-app demo
# 相当于
npx create-vite-app demo

# 安装后执行
npm install
# or
yarn

# 运行项目
npm run dev
# or
yarn dev
1
2
3
4
5
6
7
8
9
10
11
12
13

创建项目并运行,会发现我们 npm run dev 后是秒开项目的,运行速度极快。

# 二、Composition API(组合式API)【掌握】

相当于 React Hooks

我们先使用以前vue2的方式实现一个累加:

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
</template>

<script>
export default {
    data(){
        return {
            count: 0
        }
    },
    methods: {
        btnClick(){
            this.count++;
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这套代码可以实现一个累加的效果,但如果以后我们想把这个组件中的 count 字段与 btnClick 单独拎出来管理,那就比较麻烦了,因为 countbtnClick 不在同一个方法内,很难抽离。

# 1、setup

setup有以下特性:

1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

2、setup函数是 Composition API(组合API)的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

4、由于我们不能在 setup函数中使用 data 和 methods,所以Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

5、setup函数只能是同步的不能是异步的

# 2、API - ref

我们先来体验一下vue3怎么处理这个累加效果:

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
</template>

<script>
import {ref} from 'vue'
export default {
    data(){
        return {
            count: 0
        }
    },
    setup(){
        const count = ref(1);	// 此时我们使用ref指定count的默认值为1,因此上面data中的count会失效
        let btnClick = () => {
            count.value++;		// 修改ref中的值要用xxx.value
        }
        return {count, btnClick}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

此时如果我想单独管理这个累加效果,我就可以这么操作:

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
</template>

<script>
import {ref} from 'vue'
export default {
    data(){
        return {
            // count: 0		// 一旦把setup中的代码抽离,return中对应的值要去掉,否则ref无效
        }
    },
    setup(){
      	// 函数调用后就会返回一个对象,因此我们直接return
        return clickCountFn()
      	// 如果后期还想同时返回其他数据,可以将clickCountFn()的返回结果展开
      	// return {...clickCountFn(), 其他数据}
    }
}

// 封装一个函数,这样这块功能我们就能单独管理了
function clickCountFn(){
    const count = ref(1);
    let btnClick = () => {
        count.value++;
    }
    return {count, btnClick}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 3、API - reactive

再来了解另一个API :

reactive函数和ref作用非常接近,但是它的参数是一个对象,我们可以在对象中定义其方法,而通过这个形式,就不需要再对其进行进行 .value 调用了。

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
  <p>姓名:{{obj.username}}</p>
  <button @click="btnClick1">修改姓名</button>
</template>

<script>
import {ref, reactive} from 'vue'
export default {
    setup(){
      	// 使用reactive
        let obj = reactive({
            username: "Jack"
        })
        let btnClick1 = () => {
            obj.username = "Mary"
        }
				return {...clickCountFn(), obj, btnClick1}
    }
}

function clickCountFn(){
    const count = ref(1);
    let btnClick = () => {
        count.value++;
    }
    return {count, btnClick}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

使用 reactive 生成的对象与 ref 生成的值都是响应式的。

这里可以看到我们在 html 中调用数据时,使用的是 obj.username ,那我们是否可以直接写 username 呢?答案是可以的,但这里需要注意:

由于reactive返回的对象本质上已经是一个Proxy对象,所以通过…扩展符号展开的属性,是无法进行响应式的

也就是说,如果这么写:

return {...clickCountFn(), ...obj, btnClick1}
1

那么是无法实现的。

# 4、API - toRefs

正确的写法应该是:

<template>
  <h2>{{count}}</h2>
  <button @click="btnClick">累加</button>
	<!-- 无需obj.username,直接username即可 -->
  <p>姓名:{{username}}</p>
  <button @click="btnClick1">修改姓名</button>
</template>

<script>
// 新增toRefs方法
import {ref, reactive, toRefs} from 'vue'
export default {
    setup(){
        let obj = reactive({
            username: "Jack"
        })
        let btnClick1 = () => {
            obj.username = "Mary"
        }
        // 通过toRefs方法
        let refObj = toRefs(obj);
      	// 通过...refObj将数据扩展
        return {...clickCountFn(), ...refObj, btnClick1}
    }
}

// 其他代码...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 三、Provide与Inject(提供/注入)【掌握】

# 1、Vue2写法

以往我们的父传子是通过props传的:

<!-- Father.vue父组件 -->
<template>
  <Child :num="num" />
</template>

<script>
import Child from './Child.vue'
export default {
    data(){
        return {
            num: 123
        }
    },
    components: {
        Child
    }
}
</script>

<!-- Child.vue子组件 -->
<template>
  <h2>父组件传过来的值:{{num}}</h2>
</template>

<script>
export default {
    props: ['num']
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这个时候限制死了数据必须来自父组件,我们其实还有 ProvideInject

<!-- Father.vue父组件 -->
<template>
  <Child />
</template>

<script>
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    provide: {
        num: 456
    }
}
</script>

<!-- Child.vue子组件 -->
<template>
  <h2>父组件传过来的值:{{num}}</h2>
</template>

<script>
export default {
    inject: ['num']
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Provide/Inject 相比于 props 的好处在于:

如果组件嵌套较多,那么 props 需要一级一级往下传递,后期很难维护。Provide+Inject 相当于是跨级组件传值,比如孙子组件也想用上面这个 num 的值,就不用一级一级往下传,直接在孙子组件使用即可:

<!-- Sun.vue孙子组件 -->
<template>
  <h4>孙子组件:{{num}}</h4>
</template>

<script>
export default {
	  // 将Sun组件在Child组件中引入,即可实现跨级组件传值
    inject: ['num']
}
</script>
1
2
3
4
5
6
7
8
9
10
11

# 2、Vue3写法

vue3中的 provide/inject。两者都只能在当前活动实例的 setup() 期间调用。

格式为:

// provide
import {provide} from 'vue' // 显式导入
export default {
  setup() {
    // 此处name必须是String类型,value则不限制
    provide(name, value)
  }
}

// inject
import {inject} from 'vue' // 显式导入
export default {
    setup(){
      	// name即为传过来的字段,第二个参数可选,可填写默认值
        const val = inject(name, defaultValue);
      	return {val}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们修改以上案例的代码:

<!-- Father.vue父组件 -->
<template>
  <Child />
</template>

<script>
import {provide} from 'vue' // 显式导入
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    setup(){
        provide('num', 789)
    }
}
</script>

<!-- Sun.vue孙子组件 -->
<template>
  <h4>孙子组件:{{mynum}}</h4>
</template>

<script>
import {inject} from 'vue' // 显式导入
export default {
    setup(){
        const mynum = inject('num');
        return {mynum}
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 3、响应性

所谓的 Provide/Inject 响应性,其实就是把传递的值结合上文提及的 refreactive 一起使用:

<!-- Father.vue父组件 -->
<template>
  <Child />
  <button @click="changeNumFn">修改num</button>
</template>

<script>
import {provide, ref} from 'vue' // 显式导入
import Child from './Child.vue'
export default {
    components: {
        Child
    },
    setup(){
      	// 使用ref来定义num的值
        const num = ref(123);

      	// 声明一个函数,专门用于修改num
        let changeNumFn = () => {
            num.value = 456;
        }

        provide('num', num)

      	// 返回这个函数
        return {changeNumFn}
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

此时,当你点击按钮时,孙子组件接收到的 num 就会被修改了。

# 四、Teleport(传送门)【掌握】

在vue2中,想要将子节点渲染到存在于父组件以外的 DOM 节点时,需要通过第三方库 portal-vue (opens new window) 去实现。而vue3中,Teleport 是一种能够将我们的模板移动到 DOMVue app 之外的其他位置的技术。

官方文档:《teleport》 (opens new window)

举个最简单的例子:

我们在 index.html#app 同级的地方新增一个 #test 元素:

<div id="app"></div>
<div id="test"></div>
1
2

由于vue的 main.js 中规定了打包出来的代码都放入 #app 中:

createApp(App).mount('#app')
1

因此,你现在没有办法将代码放入 #test 中。此时,我们可以使用传送门:

App.vue 中:

<template>
  <Home />
</template>

<script>
import Home from './components/Home.vue'
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

Home.vue 中:

<template>
  <p>这段话是渲染在#app中的</p>
  <teleport to="#test">
      <p>这段话是渲染在#test中的--1</p>
  </teleport>
	<teleport to="#test">
      <p>这段话是渲染在#test中的--2</p>
  </teleport>
</template>
1
2
3
4
5
6
7
8
9

此时,你打开浏览器控制台,就可以看到第2、3个p标签已经被渲染到 #test 中。

备注:

1、<teleport>标签身上都to属性,填写的是css选择器。

2、多个传送门书写时,会按照自上而下的顺序传送至另一个DOM元素。

# 五、Suspense(等待)【掌握】

Suspense组件用于在等待某个异步组件解析时显示后备内容。

那我们什么时候需要使用异步组件呢?多了去了,比如:

  • 在页面加载之前显示加载动画
  • 显示占位符内容
  • 处理延迟加载的图像

那么,让我们看看 Suspense 怎么使用,我们先来提一个需求:

在等待组件获取数据并解析时显示“玩命加载中…”之类的内容

OK,我们来写一个 Article.vue 组件:

<template>
  <p>{{ content }}</p>
</template>

<script>
import { ref } from "vue";
export default{
  async setup() {
    let content = ref('内容')
    content.value = await new Promise((resolve,reject)=>{
        setTimeout(() => {
            // 3秒后修改content
            resolve("你好世界");
        }, 3000);
    })
    return {content}
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

用个 Home.vue 组件来调用它:

<template
  <Suspense>
      <template #default>
          <Article></Article>
      </template>
      <template #fallback>
          <p>玩命加载中...</p>
      </template>
  </Suspense>
</template>

<script>
import Article from './Article.vue'
export default {
    components:{
        Article
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

可以看出,<Suspense> 中,包含了两个template标签,#default 定义了我们要写入的内容, #fallback 定义了我们要预显示的内容。

⚠️ 注意:

作为template中的内容(即插槽),必须要有根元素。

# 六、Fragment(碎片)【了解】

vue2中,如果你创建一个Vue组件,那么它只能有一个根节点。这意味着不能创建这样的组件:

<template>
	<div>你好</div>
	<div>世界</div>
</template>
1
2
3
4

原因是代表任何Vue组件的Vue实例需要绑定到一个单一的DOM元素中。唯一可以创建一个具有多个DOM节点的组件的方法就是创建一个没有底层Vue实例的功能组件。

这情况同样存在于react,但react可以使用空标签 <></> 来包裹,或者是使用一个名为Fragment的虚拟元素:

class Columns extends React.Component {
  render() {
    return (
    	<React.Fragment>
      	<td>你好</td>
        <td>世界</td>
      </React.Fragment>
    )
  }
}
1
2
3
4
5
6
7
8
9
10

尽管Fragment看起来像一个普通的DOM元素,但它是虚拟的,根本不会在DOM树中呈现。目前你可以在Vue 2中使用vue-fragments库来使用Fragments,而在Vue 3中,你直接使用就行了,无需引入任何库。

# 七、TreeShaking(消除未使用代码)【了解】

TreeShaking 是一个术语,指的是在打包构建过程中移除没有被引用到的代码,这些代码可以成为 dead code。这个概念最早在基于 ES6 的打包工具 Rollup 中提出,后来被引入到 webpack 中。TreeShaking 比较依赖于 ES6 模块系统的静态结构特性,比如 importexport

文档参考:https://vue3js.cn/docs/zh/guide/migration/global-api-treeshaking.html#_2-x-%E8%AF%AD%E6%B3%95

举个例子:

vue2中我们常使用 Vue.nextTick(()=>{}) 来预操作DOM,但有时候我们不用这个 nextTick ,比如改用别的方式来代替(如setTimeout),那么项目打包时,vue 全局的 nextTick 就成为一个多余的代码,从而使你的项目打包体积变大。

在vue3中,官方团队重构了所有全局 API 的组织方式,让所有的 API 都支持了 TreeShaking。所以vue3中如果还想使用全局的 nextTick ,就需要引入:

import { nextTick } from 'vue';
 
nextTick(() => {
  // 和 DOM 有关的一些操作
});
1
2
3
4
5

如果你在 Vue 3 中不引入而直接调用 Vue.nextTick() ,就会得到一个报错:undefined is not a function

官方也给出了Vue 2.x 中的受此更改影响的全局 API:

  • Vue.nextTick
  • Vue.observable (用 Vue.reactive 替换)
  • Vue.version
  • Vue.compile (仅全构建)
  • Vue.set (仅兼容构建)
  • Vue.delete (仅兼容构建)

# 八、Performance(性能)【了解】

vue3.0相对于vue2.0来说性能快1.2到1.5倍,主要原因如下:

# 1、diff方法优化

  • Vue2 中的虚拟dom是进行全量的对比
  • Vue3 新增了静态标记(PatchFlag),只比对带有 PF 的节点,并且通过 Flag 的信息得知 当前节点要比对的具体内容。

# 2、静态提升

  • Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染
  • Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可

# 3、cacheHandlers 事件侦听器缓存

  • 默认情况下onClick会被视为动态绑定, 所以每次都会去追踪它的变化
  • 但是因为是同一个函数,所以没有追踪变化, 直接缓存起来复用即可

# 4、ssr渲染

  • 当有大量静态的内容时候,这些内容会被当做纯字符串推进一个buffer里面, 即使存在动态的绑定,会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。
  • 当静态内容大到一定量级时候,会用_createStaticVNode方法在客户端去生成一个static node, 这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染。

# 九、Setup的生命周期【了解】

组合式API需要在setup中使用,setup中含有的生命钩子与vue的大体一致:

具体参考:《setup生命周期钩子》 (opens new window)

# 十、TypeScript支持【了解】

vue3新增了对TS语法的支持。

支付宝打赏 微信打赏
Last Updated: 12/16/2021, 5:56:10 PM