setup factory 创建多个快捷方式_vue3.0创建项目及API讲解（一）

一、项目创建

1、检查vue-cli脚手架版本（vue -V），低版本的要更新（npm install @vue/cli -g

）

2、创建项目（vue create vue3test ）

选择default（直接回车enter）,初始化项目

3、进入项目文件夹，更新vue版本（vue add vue-next）

4、运行项目（npm run serve）

5、浏览器上访问（http://localhost:8081），初始化页面展示

二、Vue3API

vue3主要是低侵入式的、函数式的 API，需要用到的函数都必须提前引入。例如：引入ref函数：import { ref} from 'vue'

1、setup函数

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

其他所有的引入函数都必须在其内部执行。

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

浏览器打印顺序：

2、响应式系统 API

（1）、ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。主要用于数字、字符串的创建。

动态修改ref对象的值时，需要利用.value去修改。但是setup 返回的 ref 在模板中会自动解开，不需要写 .value。

点击按钮，展示的num的值就会变为9999

（2）、reactive

接收一个普通对象然后返回该普通对象的响应式代理。

（3）、computed

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。

当点击按钮时，proNum不变，浏览器会提示‘Write operation failed: computed value is readonly’

如果要computed 可以修改值，则需要传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。

（4）、readonly

传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理。一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的。

点击按钮，浏览器中提示‘Set operation on key "value" failed: target is readonly’

（5）、watch

需要侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的数据源变更时才执行回调。

（6）、watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

三、生命周期钩子函数

与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。

组件实例上下文也是在生命周期钩子同步执行期间设置的，因此，在卸载组件时，在生命周期钩子内部同步创建的侦听器和计算状态也将自动删除。