没有看过前篇的童鞋请移步第二篇 juejin.cn/user/808858…
今天一起学习composition api，及vuex 和 vue-router的支持，如果各位童鞋用过react的hooks 会惊呼一下这不一样么，本人用react hooks开发过一段时间，总结一下我的感受
用法基本一样，但是vue功能更多且比react更简单，但是两个的实现原理还是有天壤之别的，原理的问题随着学习的深入咱们在慢慢学习
一、最常用的几个API
1、修改文件RouterDemoOne.vue
<style lang="less">
</style>
<template>
<h1>RouterDemoOne</h1>
<h2>计数器：{{count}}</h2>
<p>
<a-button @click="countAdd">计数器++</a-button>
</p>
<p>
<a-button @click="goRouterDemoTwo">编程导航测试</a-button>
</p>
<h2>vuex中取值 {{stateDemo}}</h2>
<router-link to="/RouterDemoTwo">goRouterDemoTwo</router-link>
</template>
<script>
//篇幅有限只说一下最常用的API 之后会对各个API分别说，目前我们先run起来
import { reactive, ref, watchEffect, onMounted, toRefs } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import { useStore } from "vuex";
export default {
setup(props) {
const count = ref(0);
const router = useRouter();
const route = useRoute();
const store = useStore();
const state = reactive(store.state);
const countAdd = () => {
console.log(this) //忘了this 忘了this 忘了this
count.value++;
};
let timer1;
let timer2;
watchEffect(() => {
console.log("---watchEffect 组件挂载---");
console.log("输出route对象", route);
timer1 = setInterval(() => {
state.stateDemo++;
}, 3000);
});
//编程式导航测试
const goRouterDemoTwo = () => {
router.push({
path: "/RouterDemoTwo",
query: { a: 1, b: "aaa" }
});
};
// 生命周期
//setup 函数的执行相当于之前的 beforeCreate 和 created
onMounted(() => {
console.log("---mounted 组件挂载---");
timer1 = setInterval(() => {
console.log(`---${timer1},副作用函数1---`);
}, 3000);
});
onBeforeRouteLeave(() => {
console.log(`---onBeforeRouteLeave，清除副作用函数1---`);
clearInterval(timer1);
});
//-------------------------------------
return {
count, //return 的时候不用加.value
countAdd,
goRouterDemoTwo,
// ...toRefs(state),
...state,
};
}
};
</script>
2、API说明
import { reactive, ref, watchEffect, onMounted, toRefs } from "vue";
reactive和ref 跟react hooks中的useState很像，具体作用是让对象或者基础类型具备响应式，原理呢就是大家熟知的proxy做的拦截，一般情况下 对象使用reactive，基础类型使用ref
watchEffect 副作用函数会在setup中被调用一次
onMounted 对你没看错 就是之前大家熟悉的mounted 生命周期，作用也是一毛一样的，
之前的created 对应的是setup函数
当然还有其他生命周期可以移步官方文档
composition-api.vuejs.org/zh/api.html…
toRefs 这个应该算是个工具函数可以把reactive管理的响应式对象转换成多个ref管理的基础类型响应式，为什么这么做，因为当你需要解构reactive时 直接解构会让reactive里面的字段失去响应式 这个函数就是用来解构并且让这些被结构出来的字段具备响应式
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
接下来说一下vue-router中常用的api
useRouter 相当于 之前 this.$router的用法 使用之前要执行一下useRouter
const router = useRouter();
useRoute 相当于之前的this.$route的用法 使用之前要执行一下useRoute
const route = useRoute();
vuex由于API特别多，之后会单写个文章来说 这里就先简单使用一下
import { useStore } from "vuex";
使用前让被管理的具有响应式，当然这不是标准用法 之后单说
const store = useStore();
const state = reactive(store.state);
setup(props)
setup函数会接收到一个参数，用来接收父组件传递过来的参数
并且在setup中执行代码的周期 相当于 beforeCreate 和 created
然后 定义在setup 中的function 不管你是使用箭头函数 还是 function this的预期不在和之前一样了，所以大家忘了this 忘了this 忘了this
最后说一下return
return {
count, //return 的时候不用加.value
countAdd,
goRouterDemoTwo,
...toRefs(state),
//...state,
};
return的时候不要解构props 和 reactive 这样会让门失去响应式 如果需要解构，请使用
toRefs
二、总结一下
个人感觉compostion api 与hooks最大的区别就是setup函数仅执行一次，这个让开发起来的感觉很顺畅也更符合开发的感觉，不会像function 组件执行多次 给人带来困惑
