Vue（五）：2.0语法转3.0、setup函数、reactive函数、ref函数、isRef和toRefs方法、路由配置

1、2.0语法转3.0

vue3.0对vue的主要3个特点：响应式、模板、对象式的组件声明方式，进行了全面的更改，底层的实现和上层的api都有了明显的变化，基于Proxy重新实现了响应式，基于treeshaking内置了更多功能，提供了类式的组件声明方式。
https://www.jianshu.com/p/1e09e244bdc3

2、setup函数

 setup(props, context){
    
      attrs: (...) == this.$attrs
      emit: (...) == this.$emit
      listeners: (...) == this.$listeners
      parent: (...) == this.$parent
      refs: (...) == this.$refs
      root: (...) == this.$root
}

按照官方给出的说法，setup函数是一个的Vue组件选项，是用于在组件中使用Composition API的入口。

export default {
    setup(props, context) {
      context.attrs
      context.slots
      context.parent
      context.root
      context.emit
      context.refs
        ………
    }
}

3、reactive函数

Reactive（声明单一对象时使用）
取得一个对象并返回原始对象的响应数据处理。
const obj = reactive({ count: 0 })

const menuTab = reactive([
   		// 声明数组 即声明对象
        { txt: '登录', current: true, type: 'login' },
        { txt: '注册', current: false, type: 'register' }
      ]);

import { reactive } from '@vue/composition-api';

依赖Composition API
npm install @vue/composition-api --save
Main.js：
import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);

4、ref函数

ref（声明基础数据类型变量时使用）
内部值并返回一个响应性且可变的ref对象。ref对象具有.value指向内部值的单个属性。
const number = ref(0);
获取值方式：number.value

5、isRef和toRefs方法

检查一个对象是否是ref对象：

const unwrapped = isRef(foo) ? foo.value : foo;

function useMousePosition() {
    const pos = reactive({
        x: 0,
        y: 0
    });
    return toRefs(pos);
}
const { x, y } = useMousePosition();

model是基础数据类型返回true 若是引用数据类型则返回false

toRefs将reactive对象转换为普通对象，保证对象解构或拓展运算符不会丢失原有响应式对象的响应。

6、路由配置

先创文件夹

登录后的界面分为主界面(index)和左导航(Mymenu)、右内容(Content)
路由配置↓↓↓↓↓↓↓↓↓↓↓↓router/index.js

import Layout from '../views/Layout/index.vue'
import Login from '../views/Login/Login.vue'

const routes =[
    {
        path:'/',
        component:Layout
    },
	{
    path:'/login',
    name:'Login',
    component:Login
	}
]

布局Layout/index.vue

<template>
  <div class="layout">
      <!-- 左侧导航区域 -->
      <MyMenu class="menu" :isCollapse='isCollapse'/>
      <!-- 右侧内容区域 -->
      <Content class="content" :class="{isActive:isCollapse}" @changeCollapse='changeCollapse' :isCollapse='isCollapse'/>
  </div>
</template>

<script>
import MyMenu from './Mymenu.vue'
import Content from './Content.vue'
export default {
    components:{
        MyMenu,
        Content
    },
    data(){
        return {
            isCollapse:false,
        }
    },
    methods:{
        changeCollapse(){
            this.isCollapse = !this.isCollapse;
        }
    }
}

App.vue< router-view/ >为出口

补充：菜单分栏子路由

router/index.js：

import Home from '../views/Home/index.vue'

// 异步
const Goods = ()=>import('../views/Goods/index.vue')
const GoodsList = ()=>import('../views/Goods/GoodsList/Goods.vue')
const GoodsVerify = ()=>import('../views/Goods/GoodsVerify/index.vue')
const Params = ()=>import('../views/Params/Params.vue')
const Specifications =()=>import('../views/Params/ParamsInfo/Specifications.vue')
//子级路由
const AddGoods = ()=>import('../views/Goods/GoodsList/AddGoods.vue')

children:[
      {
        path:'/',
        name:'Home',
        component:Home
      },
      {
        path:'/goods',
        name:'Goods',
        component:Goods,
        redirect:'/goods/goods-list',
        children:[
          {
            path:'goods-list',
            name:'GoodsList',
            component:GoodsList
          },{
            path:'goods-verify',
            name:'GoodsVerify',
            component:GoodsVerify
          }
        ]
      },
      {
        path:'/add-goods',
        name:'AddGoods',
        component:AddGoods
      },
      {
        path:'/params',
        name:'Params',
        component:Params,
        redirect:'/params/specifications',
        children:[
          {
            path:'specifications',
            name:'Specifications',
            component:Specifications
          }
        ]
      },

左导航(Mymenu)：

测试通过引入element