setup 函数是 vue3 的核心 也是所有函数的入口
这个函数传入两个参数，分别为 props 和 context
props 为 父组件传递的参数，而 context 为 attrs, emit, slots
props 是响应式的，但是不可以 使用 解构或者展开，这样会 导致响应式 失败（原因会在第二点讲）
context 可以使用解构，slots 相当于以前的 $slots
emit 相当于以前的 $emit，attrs 则是在组件标签上的内容
props 和 attrs 的区别：
如下面代码 所示，name 属性 在 props 参数对象中定义了的，就会进入 props 里面，
否则 其他在组件标签上的内容会进入 attrs 里面
vue create project_name
vue-router 全局有三个守卫 • router.beforeEach：全局前置守卫，进入路由之前 • router.beforeResolve：全局解析守卫，在 beforeRouteEnter 调用之后调用 • router.afterEach：全局后置钩子，进入路由之后
import Vue from 'vue'
import Router from 'vue-router'
import route from './router'
Vue.use(Router)
const router = new Router({
routes: route // 路由列表
})
// 模拟用户登录与否
const HAS_LOGIN = true
// 全局前置守卫
// 在Router实例上进行守卫
router.beforeEach((to, from, next) => {
// to和from都是路由实例
// to：即将跳转到的路由
// from：现在的要离开的路由
// next：函数
// 如果未登录，就跳到登录页，如果登录了，选择哪个页面跳到哪个页面；如果登录了还去了login页面，就跳到首页。
if (to.name !== 'login') {
if (HAS_LOGIN) next()
else next({ name: 'login' })
} else {
if (HAS_LOGIN) next({ name: 'home' })
else next()
}
})
// 全局解析守卫
router.beforeResolve((to, from, next) => {})
// 全局后置钩子
router.afterEach((to, from) => {})
export default router