自从尤大的3.0横空出世以来，备受关注。感觉写法越来越像React,不过尤大也说了，其中一部分是受到了React hooks的思想影响。本系列文章将先带大家了解vue3.0, 会用vue3.0，以及最后了解vue3.0源码。
先带大家了解下vue3.0的新特性玩法：（至于怎样创建vue3.0项目这里不再做更多的阐述，想了解的可以一移步官网。）：
setup
setup是新的组件选项。它充当在组件内部使用入口点。
- 调用时间
setup创建组件实例时，在初始组件解析后立即调用。在生命周期方面，它在beforeCreate之后, created之前被调用（2.x）。
- 模板使用
如果setup返回一个对象，则该对象的属式将合并到组件模板的渲染上下文中：
<template> <div>{{ count }} {{ object.foo }}</div> </template> <script> import { ref, reactive } from 'vue' export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) // expose to template return { count, object } } } </script>
请注意，setup 在模板中访问时，从ref返回的引用将自动解包，因此模板中使用不需要.value。在setup中访问必须需要.value
- Render/ JSX用法
setup 还可以返回一个render函数：
import { h, ref, reactive } from 'vue' export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) return () => h('div', [ count.value, object.foo ]) } }
接收 props 数据
- 第一个接收的是props数据：
export default { props: { name: String }, setup(props) { console.log(props.name) } }
props数据可以用 watch 方法来监听:
export default { props: { name: String }, setup(props) { watch(() => { console.log(`name is: ` + props.name) }) } }
在开发过程中，props对象不可更改（如果用户代码尝试对其进行更改，则会发出警告）.
- 第二个参数提供了一个上下文对象，该对象公开了先前在2.x API中使用this公开的属式：
// 2.0 中 this.$emit() const MyComponent = { setup(props, context) { console.log(context) context.attrs context.slots context.emit context.ref } }
context中的对象使用方式和2.0中的保持一致：
attrs并且slots是内部组件实例上对应值的代理。这样可以确保即使在更新后它们也始终显示最新值，以便我们可以对它们进行结构解析而不必担心访问陈旧的引用：
const MyComponent = { setup(props, { attrs }) { // a function that may get called at a later stage function onClick() { console.log(attrs.foo) // guaranteed to be the latest reference } } }
- this用法
this里面没有setup()。由于setup()是在解析2.x选项之前调用的，因此this内部setup()（如果可用）的行为将与this其他2.x选项完全不同。避免this进入的另一个原因setup()是对于初学者来说非常常见的陷阱：
setup() { function onClick() { this // not the `this` you'd expect! } }
reactive
取得一个对象并返回原始对象的响应式代理。这等效于2.x的Vue.observable()。
const obj = reactive({ count: 0 })
响应式转换是“深度”的：它影响所有嵌套的属式。在基于ES2015代理的实现中，返回的代理不等于原始对象。建议仅与响应式代理一起使用，并避免依赖原始对象。
