创建Vue3的项目以及响应式基础

一、创建新项目

1.首先我们通过在新建项目文件夹在集成终端中打开，输入npm init vue@latest进行创建vue3的项目，然后他会提示你进行选择功能，包括ts,route,test,jsx等等，通过选择yes./no进行选择。选择完成我们就新建了一个基础的vue3框架了

2.当我们创建完成，看脚手架的结构目录，我们会发现多一个vite.config.js这个文件，具有和webpack相同的功能，值得注意的是，vue3取消了对低版本浏览器即使用es6以下版本的浏览器的兼容，这样的目的使大幅度提高了性能，但是这里边并没有第三方依赖的资源包，所以我们通过npm install进行安装，这里注意的是，要在我们新建的项目作为当前目录的集成终端进行输入，否则会出现错误

3.通过运行npm run dev 运行dev 查看当前效果 

二、vue3框架的简单介绍

1. vue3所有Vue单页应用都是从一个creatApp创建一个应用实例开始，通过app实例下的use方法去使用插件，来给应用程序扩展功能，app.mount('#app')将vue的应用程序渲染到id为app的dom元素下

const app = createApp(App)

app.use(router)

app.mount('#app')

2.通过：root定义全局的变量

:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

 3.新增了一个生命周期setup，在beforeCreate 和created之间执行，用于实现组合式api，在这个生命周期不能使用this,因为此时还没有组件实例，在script标签上使用setup,表示此标签下的脚本代码，都是在setup中执行的<切记不能使用this>

三、响应式基础

1.vue2中通过给组件添加data数据属性来完成响应式系统的

2.在vue3中的写法：

1）在vue3中，这里定义的任何变量/函数都可以直接在template中使用，即这段代码是可以执行的,我们发现button和msg并没有用一个div去进行包裹，说明vue3中可以不在是单根元素，可以实现多根元素，下边代码中msg并不是响应式的，我们点击按钮时页面上以及组件中显示的msg都没有改变，只有控制台输出的是修改后的，所以并不是响应式的

<script setup>
  let msg='hello world';
change(text){
msg=text;
console.log(msg);
}
</script>

<template>
  <main>
  {{msg}}
  <button @click='change("你好，world")'>修改msg</button>
  </main>
</template>
<style></style>

2）我们想要实现响应式的有两种方式：

第一种：(reactive方法)用reactive方法去定义一个响应式的数 据，我们需要先从vue中引入reactive，在使用reactive我们需要传入一个对象类型的参数；这样msg就是响应式的了，注意的是，在这里不能用解构赋值，会失去响应式

<script setup>
  import {reactive} from 'vue';
 let msgobj=reactive({msg:'hello world'});
  function change(aa){
  msgobj.msg=aa;
 }

</script>
    
<template>
  <main>
  {{msgobj.msg}}
  <button @click="change('你好')">click</button>
  </main>
</template>
<style>

</style>

第二种：(ref方法) 首先我们需要在vue中引入ref组件，值得注意的是，实质上ref也是通过代理对象实现响应式，只是默认把其转化为对象，给其下边的value赋值然后在转换为基本属性，所以在我们更改的时候我们需要取到下边的value进行修改(即代码中的msg.value)；来实现响应式

<script setup>
  import {reactive,ref} from 'vue';
 let msg=ref('hello world');
function change(aa){
  msg.value=aa;
 }

</script>
    
<template>
  <main>
  {{msg}}
  <button @click="change(ref('你好'))">click</button>
  </main>
</template>
<style>

</style>