Vue3.0学习（一）

1.Vue脚手架创建

通过npm命令可以创建Vue3的脚手架工程：

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

2.关于setup

Vue中支持两种Api风格：选项式、组合式。官网中解释：
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

使用组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 setup 搭配使用。本质是增加了一个前置生命周期setup，通过语法糖使操作更加方便。不使用语法糖本质就是：

//未使用setup attribute 
<script>
export default {
   setup(){
      let a = 1;
      return{
            a
      }
   }
}
</script>

//使用了setup attribute 
<script setup>
let a = 1;
</script>

3、关于响应式编程 ref、reactive

一旦使用的setup，哪些数据支持响应式编程就需要开发手动操作下。使用的具体函数分别是ref和reactive。

3.1 ref 函数

ref函数支持创建任何类型，但是在脚本中使用要加value。可以使用插件来简化这部分的操作。

3.2 reactive 函数

reactive函数支持创建一个响应式对象或数组，使用时不需要使用value来操作值。

<template>
  <div class ="card">
    {{ count }}
    <button class="btn" @click="addCount">点击数字增加</button>
  </div>

  <div class="card">
    {{ person.firstName }}
    <button class="btn" @click="changeFirstname">修改firstName</button>
    {{fullName}}
  </div>

  <div class="card">
    {{ car.name }} {{car.cost}} 万
    <button class="btn" @click="changeCardStatus">修改汽车状态</button>
  </div>

</template>

<script setup lang="ts">
import {ref,computed,watch, reactive, watchEffect} from 'vue'

let count = ref(0)

let person = ref({ 
  firstName: "ajie",
  secondName:"ae"
})

let car = reactive({
  name:"奔驰",
  cost:17
})

function addCount() {
  count.value++;
}

function changeFirstname() {
  person.value.firstName = person.value.firstName + "~";
}

function changeCardStatus(){
  car.name = "宝马";
}


let fullName = computed(()=>{
 return person.value.firstName +"-"+ person.value.secondName;
});

watch(count,(oldValue,newValue)=>{
  console.log("监听到了" + oldValue);
  console.log("监听到了" + newValue);
});

watchEffect(()=>{
  console.log("监听到了" + car.name);
});

</script>

<style scoped>
.card{
  width: 100%;
  height:fit-content;
  padding: 5px 5px;
  margin: 5px auto;
  background-color: #c9c9c9;
  border-radius: 5px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
}

.btn{
  width: fit-content;
  height: fit-content;
  padding: 3px,3px;
}

</style>

4.关于computed函数

computed是计算属性，它的好处是当依赖数据不变时，它调用的是之前缓存下来的数据，这能大大提高程序的性能（methods没有缓存的概念）。

<template>
<div class="card">
      <ui v-for="item in filteredTodos" :key="item.index">
            <li>{{item.index}} - {{item.name}} - {{item.status}}</li>
      </ui>
      {{v}}
      <div class="btns-div">
            <button class="btn" @click="selectAll">All</button>
            <button class="btn" @click="selectDoing">doing</button>
            <button class="btn" @click="selectDone">done</button>
            <button class="btn" @click="selectTodo">todo</button>
            <button class="btn" @click="addOne">addOne</button>
      </div>
</div>
</template>

<script setup lang="ts">
import { ref,computed, reactive } from 'vue';

let todoList = reactive({
      "todos":[
            {"index":1,"name":"A","status":"doing"},
            {"index":2,"name":"B","status":"done"},
            {"index":3,"name":"C","status":"done"},
            {"index":4,"name":"D","status":"todo"},
            {"index":5,"name":"E","status":"todo"},
            {"index":6,"name":"F","status":"doing"},
            {"index":7,"name":"G","status":"doing"}
      ],
      filter: 'all'
});

let v = ref(0);

const filteredTodos = computed(() => {
      console.log("exec computed")
  if (todoList.filter === 'all') {
    return todoList.todos
  } else if (todoList.filter === 'doing') {
    return todoList.todos.filter(todo => todo.status === 'doing')
  } else if (todoList.filter === 'done') {
    return todoList.todos.filter(todo => todo.status === 'done')
  }else if (todoList.filter === 'todo') {
    return todoList.todos.filter(todo => todo.status === 'todo')
  }
})

let selectDoing = function(){
      todoList.filter = "doing";
}

let selectDone = function(){
      todoList.filter = "done";
}

let selectTodo = function(){
      todoList.filter = "todo";
}
let selectAll = function(){
      todoList.filter = "all";
}
let addOne = function(){
      v.value += 1;
}

</script>

<style scoped>
.card{
  width: 100%;
  height:fit-content;
  padding: 5px 5px;
  margin: 5px auto;
  background-color: #c9c9c9;
  border-radius: 5px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
}
.btn{
  width: fit-content;
  height: fit-content;
  padding: 3px,3px;
  margin: 5px;
}

.btns-div{
      height: fit-content;
      width: 100%;
      display: flex;
}
</style>

5.关于路由rounter

1.页面导航区、展示区
2.创建路由器
3.制定路由的具体规则，路由表 (什么路径，对应着什么组件)
4.形成一个一个的[???.vue] class.vueSubject .vue