Vue的项目创建以及项目目录与组合式API

一.创建Vue

1.Vue-CLI:创建Vue的脚手架工具

2.Create-vue：是Vue官方提供的脚手架之一,底层采用官方自主研发的vite,快捷，开发方便。

3.准备工作:系统中需要安装nodejs环境，在该环境中提供npm包管理器

4.创建Vue项目的命令:npm init vue@latest

5.切换至新建的项目目录下:cd vue-demol1

6.安装项目的基础依赖:npm install

7.需要注意的是：npm安装比较慢时，需要将npm镜像地切换至国内镜像，参考API

8.启动项目:npm run dev

9.默认访问界面

二.项目目录

node_models:包管理器

main.js:入口文件

index.html:挂载文件

app.vue:根组件

vite.config.js:项目配置文件，基于vite的配置

packege.json:项目的包文件，包含启动信息，依赖版本配置

三.组合式API

将项目中需要核心API进行封装,提供setup的语法糖

通常情况下:组合式API的优先级最高

setup选项的执行时机?

在组件加载时最先执行，优先级高于钩子函数beforeCreate()

setup写代码的特点是什么?

定义数据+函数

setup中this是否还指向组件实例?

this默认情况下指向undefined

3.2reactive和ref函数

实现双向数据绑定(响应式数据)的组合式api

3.2.1.reactive

接收对象类型数据参数,返回响应式对象

如何使用:

导入reactive
使用reactive函数

优点:语法清晰，使用简单

缺点:只支持对象类型的数据

3.2.2.ref

接受简单数据或者对象数据类型参数,返回响应式对象

如何使用:

导入ref
使用ref函数

优点:支持多种数据类型，页面元素中可以直接使用引用名

缺点:脚本中需要通过value属性控制数据

reactive和ref函数的共同作用是什么?

用函数调用的发式生成响应式数据，实现双向数据绑定

reactive和ref对比谁更好?

reactive不能处理简单类型数据

ref支持更多种数据类型,需要通过value属性操作数据

ref内部是依赖reactive

3.3computed

计算属性:实现的功能与Vue2的语法一致，在Vue3中只是改变语法结构

如何使用:

导入computed
执行函数完成计算过程

计算属性的缺点?

计算属性在异步请求中会出现数据不匹配的情况

计算属性的特点?

计算属性用于进行运算,避免直接修改值

3.4Watch

watch函数用于监听数据变化,可以侦听一个或多个的变化

函数参数:newVal新数据。oldVal旧数据。Immediate（立即执行），deep深度侦听

如何使用:

导入函数
调用执行函数

作为函数的第一个参数,ref对象需要通过value获取值吗?

不需要,watch会自动读取

Watch能侦听什么样的数据?

单个或多个数据

不开启deep,直接修改对象中的属性值会触发回调函数吗?

不会,默认浅层监听

不开启deep，需要侦听对象中的某一个属性，怎么执行回调函数?

将第一个参数传入函数，返回需要监听的属性

3.5.生命周期函数

在组件的初始化，挂载，元素加载前，更新，销毁等环节自动调用的回调函数

选项式API(Vue2)	组合式API(Vue3)
beforeCreate/created	setup
beforeMount	onBeforeMount
mounted	onmounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

如何使用:

调用工具
使用函数

组合式API中的生命周期函数语法格式是什么?

可以像调用函数一样去使用。on+生命周期的名字

在组合式API中如何调用onCreated函数?

在组合式API中没有onCreated函数,已经集成到setup中了

beforeCreate与setup谁的优先级更高?

setup优先级更高

组合式API中,组件卸载完毕调用哪一个钩子函数?

onUnmounted

钩子（hook）函数是处理拦截在软件组件之间传递的函数调用、事件或消息的代码，本质上是用以处理系统消息的程序，通过系统调用将其挂入系统中。

四.调用setup

1.App.vue里面的<script></script>中

console.log('调用了setup')
      const message="今天天气不错";
      const logMessage=()=>{
        console.log(message)
      }

在template中写

{{ message }}
    <button @click="logMessage">gotoLog</button>

2.使用reactive

在App.vue文件中的<script></script>中

import { reactive,ref } from 'vue'; 
     
    const state=reactive({count:0})
    const setCount=()=>{
      state.count++
    }

在template中写

<button @click="setCount">{{ state.count }}</button>

3.computed计算属性

const count=ref(0)
    const setCount=()=>{
      count.value++//ref会将值存放在value属性中,通过调用该属性获取数据
    }

<button @click="setCount">{{ count}}</button>

<script setup>
//export default{
  // setup(){
    //   console.log('调用了setup')
    //   const message="今天天气不错";
    //   const logMessage=()=>{
    //     console.log(message)
    //   }
    //   return{
    //     message,
    //     logMessage
    //   }
    // },
  //}  
    

    
      // console.log('调用了setup')
      // const message="今天天气不错";
      // const logMessage=()=>{
      //   console.log(message)
      // }
      //使用reactive()
     import { reactive,ref } from 'vue'; 
     
    // const state=reactive({count:0})
    // const setCount=()=>{
    //   state.count++
    // }
    //computed计算属性
    // const count=ref(0)
    // const setCount=()=>{
    //   count.value++//ref会将值存放在value属性中,通过调用该属性获取数据
    // }
    // import { computed } from 'vue';
    // const list=ref([1,2,3,4,5,6,7,8,9])
    // const computedList=computed(()=>{
    //   return list.value.filter(item=>item>2)
    // })
    // //3秒之后源list中的值增加
    // setTimeout(()=>{
    //   list.value.push(10,11)
    // },3000)
    //watch侦听属性
    // import { watch } from 'vue';
    // const count=ref(0)
    // const setCount=()=>{
    //   count.value++
    // }
    // const username=ref('wahaha')
    // const setUsername=()=>{
    //   username.value='zhangsan'
    // }
    //侦听一个数
    // watch(count,(newVal,oldVal)=>{
    //   console.log('count变化了',newVal,oldVal)
    // })
    //侦听多个数据
    //参数1:数组，侦听多个数据
    //参数2的参数1:新值
    //参数2的参数2:旧值
    // watch([count,username],([newVal,newVal1],[oldVal,oldVal1])=>{
    //    console.log('count变化了',[newVal,newVal1],[oldVal,oldVal1])
    //  })
    //立即侦听,页面渲染完毕，先执行一次侦听动作
  // import {ref,watch} from 'vue'
  // const count=ref(0)
  // const setCount=()=>{
  //   count.value++
  // }
  // watch(count,()=>{
  //   console.log('count值变化了')
  // },{immediate:true})
  //深度侦听
    // import {ref,watch} from 'vue'
    // const state=ref({count:0})
    // const setStateByCount=()=>{
    //   state.value.count++
    // }
    // watch(state,()=>{
    //   console.log('state中的count值变化了')
    // },{
    //   deep:true
    // })
  //深度侦听对象数据中某一个属性(精确侦听)
  // import {ref,watch} from 'vue'
  // const info=ref({
  //   username:'wahaha',
  //   age:18
  // })
  // const setInfoByName=()=>{
  //   info.value.username='张三'
  // }
  // const setInfoByAge=()=>{
  //   info.value.age=28
  // }
  // watch(()=>
  //   info.value.age
  // ,()=>{
  //   console.log('age变化了')
  // })
  //生命周期函数
  // import { onMounted } from 'vue';

  // onMounted(()=>{
  //   console.log('元素加载完毕执行了mounted函数1')
  // })
  // onMounted(()=>{
  //   console.log('元素加载完毕执行了mounted函数2')
  // })
</script>

<template>
  this is div
  <div>
    <!-- {{ message }}
    <button @click="logMessage">gotoLog</button> -->
    <!-- <button @click="setCount">{{ state.count }}</button> -->
    <!-- <button @click="setCount">{{ count}}</button> -->
     <!-- 原值{{ list }}
    计算属性返回值{{ computedList }} -->
    <!-- <button @click="setCount">{{ count}}</button> -->
    <!-- <button @click="setUsername">{{ username}}</button> -->
    <!-- <button @click="setCount">{{ count}}</button> -->
     <!-- {{ state.count }}
    <button @click="setStateByCount">修改state中的count值</button> -->
    <!-- {{ info.username }}
    {{ info.age }}
    <button @click="setInfoByName">修改姓名</button>
    <button @click="setInfoByAge">修改年龄</button> -->
  </div>
</template>

<style scoped>

</style>