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 钩子之前被调用

<script>
export default {
   
    setup(){
   
        console.log("steup")
    },
    beforeCreate(){
   
        console.log("beforeCreate")
    },
    created(){
   
        console.log("created")
    }

}
</script

浏览器打印顺序：

2、响应式系统 API

（1）、ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。主要用于数字、字符串的创建。
动态修改ref对象的值时，需要利用.value去修改。但是setup 返回的 ref 在模板中会自动解开，不需要写 .value。
点击按钮，展示的num的值就会变为9999

<template>
  <div class="hello">
      <p>{
   {
   num}}</p>
      <p>{
   {
   str}}</p>
    <button @click="onChange">修改num</button>
  </div>
</template>
<script>
  import {
   ref} from 'vue'
export default {
   
    setup(){
   
        let num = ref(333)
        let str = ref('fffff');
        let onChange = ()=>{
   
            num.value = 9999;
        }
        return{
   
            num,
            str,
            onChange
        }
    }
}
</script>

（2）、reactive

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

<template>
  <div class="hello">
    <p>{
   {
   obj.name}}</p>
    <button @click="onChange">