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

 

　　本文提纲：如何新建一个使用vue3.0的项目conposition api逻辑复用（hook）和状态管理（provide+inject）结合项目实战，做一个todo list如何新建一个使用vue3.0的项目接下来向大家简单介绍下如何尝鲜 -- 自己创建一个vue3.0的项目。安装vue0-cli

 

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

 

　　将vue升级到bata版本

 

　　ok了。就这么简单！

 

　　conposition api#### 目录基本例子setup（）reactiverefcomputedwatchEffectwatch生命周期依赖注入基本例子setup?

 

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

 

　　？调用时机

 

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

 

　　模板中使用

 

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

 

　　setup 参数「props」第一个参数接受一个响应式的props，这个props指向的是外部的props。如果你没有定义props选项，setup中的第一个参数将为undifined。props和vue2.x并无什么不同，仍然遵循以前的原则；不要在子组件中修改props；如果你尝试修改，将会给你警告甚至报错。不要解构props。解构的props会失去响应性。

 

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

 

　　Tip:

 

　　由于vue3.x向下兼容vue2.x,所以我在尝试之后发现，一个vue文件中你可以同时写两个版本的东西。

 

　　当然这边不推荐你在项目中这么用，但是抱着尝鲜和探究的态度，我们势必要弄清如果这么写要注意哪些？

 

　　如果我写了mounted（2.x），在setup函数中又写了onMounted（3.x），谁先执行？

 

　　setup中的先执行。因为setup（） 在解析 2.x 选项前被调用；

 

　　我在vue2.x选项中中定义在this上的变量，在setup上可以通过this访问吗？可以重复定义吗？可以return吗？

 

　　首先在setup中的this将不再指向vue,而是undefined;所以在setup函数内部自然无法访问到vue实例上的this。

 

　　setup内部定义的变量和外表的变量并无冲突；

 

　　但是如果你要将其return 暴露给template,那么就会产生冲突。

 

　　reactive?

 

　　接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable（）

 

　　？ref?

 

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