vue3新特性（一）
vue3相对于vue2有以下几个优化点：
- 性能提升：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54
- 新推出的Composition API 使组件更易维护，减少无用数据绑定页面更流畅
- 更好的支持TypeScript，可以在创建命令里直接配置。
如何快速开始vue3.0
如果您想在新项目中快速试用 Vue 3，可以通过 CDN： ，或者使用脚手架搭建：
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
复制代码接下来，我们来看看vue3有哪些新特性？
Composition API
vue3.0的升级有个重要的新特性就是这个Composition API(组合api)
vue有个很重要的思想就是组件化，它允许我们提取UI、接口、逻辑等可重复部分及其功能封装成组件，引入到我们所需要的地方，vue2.0已经实现了这一点，这可以使我们的应用程序在可维护性和灵活性方面有重大的提升。但是当应用程序变得非常大时——想想数百个组件。在处理如此大型的应用程序时，共享和重用代码变得尤为重要。vue3.0为了解决这一问题，而引入了Composition API(组合api)这一重大改变，这可以说是vue3.0最重要的新特性，没有之一。
Composition API能够使相同逻辑关注点相关的代码整合到一起，从而解决了逻辑关注点碎片化难以理解和维护的痛点，尤其是在一个大型复杂的组件中。说了这么多，那Composition API到底长什么样，要如何使用呢，接下来我们一起来看看。
setup组件选项
在vue组件中我们使用Composition API的地方，我们称为setup。setup组件选项在创建组件执行，也就是在beforeCreate这个生命函数之前就执行了，因此在setup中不能通过this来获取实例。
vue3.0 组合式api示例：
setup (props) {
let repositories = []
return {
repositories
}
}
复制代码反应性变量 ref
ref在 Vue 3.0 中，用于使变量具有响应性，视图才能被更新以反映变化。ref接受参数并将其返回包装在具有value属性的对象中，然后可以使用该属性访问或改变反应变量的值，如下所示：
import { ref } from 'vue'
const counter = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
复制代码换句话说，ref的创建对我们价值的反应性引用。
setup内部注册生命周期
组合 API 上的生命周期钩子与选项 API 的名称相同，但前缀为on: 如mounted变成onMounted。这些函数接受一个回调，该回调将在组件调用钩子时执行。
import { ref, onMounted } from 'vue'
// in our component
setup (props) {
const repositories = ref([])
const getUserRepositories = () => {
console.log(repositories)
}
onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`
return {
repositories,
getUserRepositories
}
}
复制代码watch api
如何使用watch api对变量的变化作出反应呢？watch它接受 3 个参数：
- 我们想要观察的响应式引用或 getter 函数
- 回调
- 可选配置选项
如下所示：
import { ref, watch } from 'vue'
const counter = ref(0)
watch(counter, (newValue, oldValue) => {
console.log('The new counter value is: ' + counter.value)
})
复制代码computed api
与watch类似，计算属性也可以使用computed从 Vue 导入的函数在 Vue 组件之外创建。
import { ref, computed } from 'vue'
const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)
counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2
复制代码在这里，该computed函数返回一个只读的 响应式引用，指向作为第一个参数传递给 .getter 的回调的输出computed。为了访问新创建的计算变量的值，我们需要像使用ref属性一样，用.value。
Teleport
当我们引入子组件时，该子组件的html元素都是渲染在父组件引用子组件所在的位置，如果子组件最外层元素有position: absolute，也是以其最近的相对定位父级元素作参考。
Teleport 提供了一种简洁的方法，允许我们控制我们希望在 DOM 中的哪个父级下渲染一段 HTML，而无需求助于全局状态或将其拆分为两个组件，就像哆啦A梦的“任意门”。像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多。原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。
const app = Vue.createApp({
template: `
Root instance
This is a parent component
Hello, vue3
`
})
复制代码
这时Hello, vue3将会渲染到id为endofbody的元素下面。
如果有多个
A
B
A
B
复制代码
Fragments（片段）
我们都知道在vue2.x中，不支持多个根组件，并且会在用户意外创建多根组件时发出警告。所以用户在写组件时，必须用一个div包裹多个组件
...
...
复制代码
现在vue3.x就不需要有这个操作，在 3.x 中，组件可以有多个根节点
...
...
复制代码
未完待续...
作者：不会打代码的程序员
链接：https://juejin.cn/post/7061468227867508772
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。