onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式

作者：Mingle

转发链接：https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ

前言

背景：2019年2月6号，React 发布 「16.8.0」 版本，vue紧随其后，发布了「vue3.0 RFC」

Vue3.0受React16.0 推出的hook抄袭启发(咳咳...)，提供了一个全新的逻辑复用方案。使用基于函数的 API，我们可以将相关联的代码抽取到一个 "composition function"(组合函数)中 —— 该函数封装了相关联的逻辑，并将需要暴露给组件的状态以相应式的数据源的方式返回出来。

本文目的

本文会介绍Vue3.0「组合api的用法和注意点」。最后会用一个 Todolist 的项目实战，向大家介绍「Vue3.0的逻辑复用写法以及借用provide和inject的新型状态管理方式」

本文提纲：

• 如何新建一个使用vue3.0的项目
• conposition api
• 逻辑复用(hook)和状态管理(provide+inject)
  • 结合项目实战，做一个todo list

正文

如何新建一个使用vue3.0的项目

接下来向大家简单介绍下如何尝鲜 -- 自己创建一个vue3.0的项目。

1. 安装vue0-cli

我这边使用的是最新版本的vue-cli 4.4.0

npm install -g @vue/cli# ORyarn global add @vue/cli

2. 将vue升级到bata版本

vue add vue-next

ok了。就这么简单！

conposition api

#### 目录

• 基本例子
• setup()
• reactive
• ref
• computed
• watchEffect
• watch
• 生命周期
• 依赖注入

基本例子

    

count is { { count.count }}

    

plusOne is { { plusOne }}

    count++  

setup

❝

该setup功能是新的组件选项。它是组件内部暴露出所有的属性和方法的统一API。

❞

调用时机

创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用

模板中使用

如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文

{ { count }} { { object.foo }}

setup 参数

1. 「props」第一个参数接受一个响应式的props，这个props指向的是外部的props。如果你没有定义props选项，setup中的第一个参数将为undifined。props和vue2.x并无什么不同,仍然遵循以前的原则；

• 不要在子组件中修改props；如果你尝试修改，将会给你警告甚至报错。

• 不要结构props。结构的props会失去响应性。

2.「上下文对象」第二个参数提供了一个上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property。

const MyComponent = {  setup(props, context) {    context.attrs    cont