为什么要学习vue3呢？
vue2.0也是现在比较稳定的一个版本，社区还有周边都比较完善，如果不是非必要其实我们不需要着急直接升级到vue3.0;
那为什么还要学习，主要是还是为了了解一下vue3.0相较于2.0的优势和特性，方便之后3.0版本的社区和周边完善之后，我们直接升级到3.0去使用，还有就是为了提升一下技术和涨薪资，毕竟3.0刚出的时候就受到了业内各个大佬的关注，现在的前端圈最火的也就是vue3.0了，所以不管是为了学习新的知识，还是学习尤大的编程思想，亦或者是为了涨薪资我们都有必要去看一看学一学。
怎么从2.0版本升级到3.0版本？
首先我们想要体验3.0版本还是得先升级，下边先介绍几个可以升级到3.0版本的方法；
1.第一种方式, 使用官方的vue-cli脚手架升级;如果有看不明白的同学可以直接去官网查看vue-cli
// 先把脚手架升级到最新版本，如果之前没有安装过的话，直接全局安装就是最新版本的4.0
npm install -g @vue/cli
or
yarn global add @vue/cli
// 如果已经安装过的可以升级一下版本
npm update -g @vue/cli
or
yarn global upgrade --latest @vue/cli
ps: 把版本升级到最新之后，就可以直接开始安装了，先创建一个vue3.0的项目
vue create vue3 // 默认选择3.0版本创建就可以了，创建之后就可以运行一下体验了
cd vue3 // 进去之后
yarn serve
ps: 如果忘了选择3.0？没事的不打紧还可以进入项目中安装
// 如果你创建的项目是默认选择的2.0版本, 按下边的操作就可以
yarn add vue-next // add vue-next 会自动升级到vue3的版本
2.第二种方式使用vite安装，这个也是尤大的力作 vite github 地址
// 首先我们需要先把vite代码clone到本地
git clone https://github.com/vitejs/vite.gi
cd vite // 进入文件
yarn // 开始安装依赖
yarn build // 打包
yarn link
ps: 开始创建你的项目
yarn create vite-app project-name
cd project-name
yarn
yarn dev
ps: 完成上述操作就可以开始愉快的体验vue3.0了
vue3的composition API的简单介绍和使用 compositon API 使用官方手册
1.首先先来认识一下composition API
什么是composition API？字面解释就是组合式API，也就是将原来的很多底层的方法拆分开，暴露出来让大家去使用；
比如原来的方法只能写在methods里边，但是在vue3中是有一定变化的，要放到setup中去使用;
下边先来看几个我觉得比较重要的API，先简单的介绍下使用方式?感受下跟之前的2.0有什么不一样的地方;
1.createApp // 顾名思义，创建一个APP实例，不过要怎么使用呢？
// 先导入createApp模块
import { createApp } from 'vue';
import App from './App.vue';
// 使用createApp方法将我们的入口文件放进去，最后挂载
createApp(App).mount('#app');
2.onMounted // 跟之前的写法不一样了不过，多了一个on
// 先导入onMounted模块
import { onMounted, defineComponent } from 'vue';
export default defineComponent({
setup () {
// 使用的时候需要放在setup里边
onMounted(() => {
console.log('组件挂在结束开始打印。。。')
})
}
})
3.computed 计算机属性
import { computed, ref } from 'vue';
// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误！
import { computed, ref } from 'vue';
// 可以修改值
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
},
})
plusOne.value = 1
console.log(count.value) // 0
4.watch 监听器
import { reactive, watch } from 'vue';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
5.watchEffect 监听器的升级版本，立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> 打印出 0
setTimeout(() => {
count.value++
// -> 打印出 1
}, 100)
停止侦听,当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时， 侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
const stop = watchEffect(() => {
/* ... */
})
// 之后
stop()
6.reactive 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable(),注意在源码中明确显示需要传递一个对象，否则会抛出异常，如果想要对一个单独的变量使用响应式，可以使用ref下边介绍
const obj = reactive({ count: 0 }) // 返回的就是响应式对象
// 使用
obj.count ++
console.log(obj.count) // 输出的是1
如果想要在组件内使用这个变量需要在setup中返回
第一种返回形式
<template>
<!-- 这种形式在组件内使用的时候需要obj.count -->
<p>{{ obj.count }}</p>
</template>
import { reactive } from 'vue';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { obj } // 这种形式在组件内使用的时候需要obj.count
}
})
第二种返回形式
<template>
<!-- 这种形式在组件内使用的时候跟之前一样 -->
<p>{{ count }}</p>
</template>
import { reactive, toRefs } from 'vue';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { ...toRefs(obj) }
}
})
7.toRefs 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。
上边的例子为什么要用toRefs包裹起来呢，因为是这样的, reactive,实际上是使用的proxy代理了整个对象，返回的是整个对象都是响应式，但是如果这个对象里边的层级很多怎么办，对象中还有对象，那么里边的对象就不是一个响应式了，所以就用toRefs包裹一下，这样相当于是整个对象里边的属性，在源码内部已经做了一次递归，把所有的属性都做了判断，如果是引用类型就会使用proxy再次代理一次，所以整个对象的属性都是响应式的，也就是下边这样的写法；
import { reactive, toRefs } from 'vue';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { ...toRefs(obj) }
}
})
8.ref 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
9.toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
10.nextTick 跟之前的作用一样只不过呢写法略有不同，想要详细了解的话可以看这里vue nextTick 异步更新机制
import { nextTick } from 'vue';
export default defineComponent({
setup () {
nextTick(() => {
console.log('--- DOM更新了 ---')
})
}
})
关于composition API的介绍就先介绍到这里了，感兴趣的同学可以看这里:
composition API
Vue 组合式 API 心智负担
ps: 有兴趣的同学，想要用一下但是不清楚具体怎么使用我写了一个简单地demo可以帮助大家熟悉一下vue3 demo
喜欢的朋友记得点赞、收藏、关注哦！！！
