Vue3.0-01 API学习

升级到Vue3

升级VueCLI

VueCLI需要在4.3.1以上才可以支持Vue3

npm update -g @vue/cli

vue -V
@vue/cli 4.4.6

创建项目

vue create vue3-learning
vue add vue-next # 添加 vue3 插件升级为 vue3

在创建项目时选择手动添加配置，选择vue-router和Vuex，这样创建完的项目各个插件也都会升级为支持Vue3的版本

{
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.6",
    "vuex": "^4.0.0-alpha.1"
  }
}

创建Vue实例

import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

创建Router

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

创建路由的方式与以前有所变化，路由模式除了Hash模式（createWebHashHistory）和History模式（createWebHistory），还多了带缓存的History路由（createMemoryHistory）

使用路由跳转的API也有所变化：

import {useRouter} from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goHome = () => router.push('/');
    return {goHome}
  }
}

关于router的具体变化，后面再单独学习

创建Store

import {createStore} from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    changeCount(state, isAdd) {
      state.count = isAdd ? state.count + 1 : state.count - 1;
    }
  },
  actions: {},
  modules: {}
});

使用：

import {useStore} from 'vuex';

export default {
  setup() {
    const store = useStore();
    const storeState = store.state;
    return {storeState}
  }
}

可以看出来，Vuex和vue-router，API都有了一些变化，与React Hooks的API很类似，但是基本原理没有太大变化

setup

setup函数是新的Composition API的入口点

调用时机

Props初始化后就会调用setup函数，在beforeCreate钩子前被调用

返回值

setup返回的对象的属性将被合并到组件模板的渲染上下文，也可以返回一个渲染函数

参数

接受props作为第一个参数，使用的时候，需要首先声明props：

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}

props是响应式的，前提是不对props进行解构，解构后会失去响应性

setup第二个参数是上下文对象，从2.x中的this选择性地暴露出一些属性，例如attrs/slots/emit等，可以解构取值不会失去响应性

this的用法

this在setup中不可用

响应式系统API

reactive

const obj = reactive({ count: 0 })

返回一个普通对象的响应式代理，响应式转换是深层的，会影响对象内部嵌套的属性，基于ES2015的Proxy实现，返回的代理对象不等于原始对象，避免使用原始对象

经过试验，Vue3中可以通过修改数组下标来响应式的更改数组成员的值了

ref

ref的引入是为了以变量形式传递响应式的值而不再依赖访问this:

const count = ref(0)

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

ref主要目的是保证基本类型值的响应式，如果传入的参数不是基本类型，会调用reative方法进行深层响应式转换

ref使用时：

• ref的返回值setup中返回应用在模板中时，会自动解构，不需要书写.value
• ref作为reactive对象的属性被