今天给小伙伴们分享一个vue3.0知乎实战项目示例Vue3Zhihu。

vue3-zhihu 基于vue3.x+vuex+vue-router4构建的知乎专栏示例。汇集了vue3相关技术知识点，旨在让大家更快入手vue3项目开发。

快速安装

# 克隆项目git clone https://github.com/huanggengzhong/zhihu-vue3.0.git# 进入目录cd zhihu-vue3.0# 安装依赖npm install# 本地开发npm run serve# 打包项目npm run build

vue3整体下来有些类似React Hook的感觉。只要是能简化代码，提升性能都有必要去学习下。

知识点

setup(props, this(上下文对象))

vue2.x中data、methods、watch等全部都用对应的新增api写在setup()函数中。

• 执行时机在beforecreate与created之间。vue3也是取消了这两个钩子，统一用setup代替；
• 所有方法函数都得调用api写在setup中；
• return出去的数据，类似vue2.x中data(){return{...}}；

ref()函数

ref也是创建响应式数据，区别在于要用xxx.value才能访问到数据值，推荐用ref，然后配合reactive一起使用。

reactive({})函数

该函数传入一个对象，里面的数据会变成响应式的数据，类似于react中的state。

toRefs()函数

用 toRefs 函数来包裹 reactive 数据,用来添加响应式。

computed() 函数

该函数用来创造计算属性，和过去一样，它返回的值是一个ref对象。

vue3全新生命周期(只能在setup中使用)

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

好了，以上是vue3的一些简单分享，后续会使用vue3开发一个实例项目，届时也会分享出来。