前言

2020年9月21日更新:Vue3 正式发布

Vue3.0 RC已经发布一段时间,正好这段时间准备拿 Vue 自己写个导航网站,于是就想到使用新版的Vue3.0来作为新项目的开发框架。

安装

首先安装脚手架

1
npm i @vue/cli -g

已经安装过的话再次执行命令就是安装到最新版,使用vue -V查看当前脚手架版本

安装完毕后通过vue create创建一个脚手架项目

1
vue create vue3-demo

按下回车后即可完成创建,启动项目后即可看到熟悉的界面:

打开项目后,可以发现main.js文件对比Vue之前的版本有了明显了区别:

  • Vue 2.x

    1
    2
    3
    4
    5
    6
    7
    import Vue from 'vue'
    import App from './App'

    new Vue({
    el: '#app',
    render: h => h(App)
    })
  • Vue 3

    1
    2
    3
    4
    import { createApp } from 'vue'
    import App from './App.vue'

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

可以看到,Vue3 取消了 new Vue ,取而代之的是引入了一个vue中的createApp方法

createApp 会产生一个实例,该实例拥有全局的可配置上下文

通过产生的实例然后挂载到根节点上

接下来,顺着文档来理解这些新特性

setup

setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

  • 该函数接收props作为第一个参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>{{ name }}</div>
</template>

<script>
export default {
props: {
name: String,
},
setup(props) {
console.log('props: ', props)
},
}
</script>

可以看到,我们获取到的结果是一个 Proxy 对象,而这也正是响应式设计的改动之一:使用Proxy来改写之前的Object.defineProperty

  • props 对象是响应式的,但是解构props对象会使其失去响应性

  • 第二个参数从原来2.x中的this选择性的暴露了一些property

  • 另外:thissetup()函数中不可用

响应式系统

reactive

1
2
3
4
5
6
export default {
setup() {
const name = reactive('dong')
return {name}
}
}

reactive方法接收一个普通对象然后返回该普通对象的响应式代理

ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 value

1
2
3
4
setup() {
const name = reactive({name: 'dong'})
return {name}
}

provide&inject

provide在组件中注入一个值传递到任一层级的子组件中,子组件通过inject获取到这个值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 提供者
export default {
setup() {
provide('name', 'dong')
}
}

// 使用者
export default {
setup() {
const dong = inject('name')
console.log(dong) // 'dong'
}
}

inject接收可选的默认值作为第二个参数,如果未能provide提供的值,则inject使用第二个参数的默认值

如果需要注入的值具有响应性,可以通过ref来保证注入的值的响应性

1
2
3
4
5
6
export default {
setup() {
const dong = ref('dong')
provide('name', dong)
}
}

这样,注入的值会得到同步