-VUE-_vue 依赖镜像-优快云博客

本文链接：https://blog.youkuaiyun.com/hqHQLwe/article/details/145854252

一、创建Vue项目

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

2.Create-Vue：是Vue官方提供脚手架工具，底层采用官方自主研发的Vite，快捷、开发方便

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

4.创建Vue应用命令：npm init vue@latest

5.切换至新建的项目目录下：cd vue-demo1

6.安装项目的基础依赖：npm install （1）注意：npm比较慢时，需要将npm镜像切换为国内镜像，参考AI

7.启动项目：npm run dev

8.默认访问界面

二、项目目录

node_modules：包管理器 main.js：入口文件 index.html：挂载文件 app.vue：根组件 <script></script>脚本区 <template></template>模板区 <style></style>样式区

vite.config.js：项目配置文件，基于vite的配置 package.json：项目包文件，启动信息，依赖版本配置等

三、组合式API

3.1、setup

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

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

setup选项的执行时机？在组件加载时最先执行，优先级高于钩子函数beforeCreate()

setup写代码的特点是什么？定义数据+函数

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

3.2、reactive和ref函数

实现双向数据绑定（响应式数据）的组合式API

3.2.1、reactive

接受对象类型数据参数，返回响应式对象

如何使用？1.导入reactive 2.使用reactive函数

优点：语法清晰、使用简单缺点：只支持对象型的数据

<script>
    //使用reactive()
    import { reactive,ref } from 'vue';
    const state = reactive({count: 0})
    const setCount = ()=>{
      state.count++
</script>
<template>
    <div>
        <button @click="setCount">{{ state.count }}</button>
    </div>
</template>

当你点击按钮时它会加1

3.2.2、ref

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

如何使用？1.导入ref 2.使用ref函数

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

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

reactive和ref函数的共同作用是什么？用函数调用的方式生成响应式数据，实现双向数据绑定

reactive和ref对比谁更好？ reactive不能处理简单类型数据 ref支持多种数据类型，需要通过value属性操作数据 ref内部式依赖reactive

3.3、computed

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

如何使用： 1.导入computed 2.执行函数完成计算过程

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

计算属性的特点？计算属性用于进行运算，避免直接修改值

<script>
    import {ref} from 'vue'
    //测试计算属性
    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)
</script>
<template>
    <div>
        <button @click="setCount">{{ count }}</button>
          原值{{ list }}
          计算属性返回的值{{ computedList }}
    </div>
</template>

三秒后会自动加 “10，11”

3.4、watch

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

函数参数：newVal新数据、oldVal旧数据、immediate立即执行、deep深度侦听

如何使用？ 1.导入函数 2.调用执行函数

作为watch函数的第一个参数，ref对象需要通过value获取值吗？不需要，watch会自动读取

watch能侦听什么样的数据？单个或多个数据

不开启deep，直接修改对象中的属性值会触发回调函数吗？不会，默认浅层侦听

不开启deep，需要侦听对象中的某一个属性怎么执行回调函数？将第一个参数传入函数，返回需要监听的属性

立即侦听,页面渲染完毕先执行一次侦听活动

<script>
    //立即侦听,页面渲染完毕先执行一次侦听活动
    import {ref,watch} from 'vue'
    const count = ref(0)
    const setCount = ()=>{
      count.value++
    }
    watch(count,()=>{
      console.log('count变化了')
    },{immediate:true})
</script>
<template>
    <div>
        <button @click="setCount">{{ count }}</button>
    </div>
</template>

保存后他的控制台立即就有数据显示，点击按钮控制台也会有新数据显示

深度侦听

<script>
    //深度侦听
    import {ref,watch} from 'vue'
    const state = ref({count:0})
    const setStateByCount = ()=>{
      state.value.count++
    }
    watch(state,()=>{
      console.log('State中的count值变化了')
    },{
      deep:true
    })
</script>
<template>
    <div>
        {{ state.count }}
       <button @click="setStateByCount">修改state中的count值</button>
    </div>
</template>

当你点击按钮时旁边的数字就会加1并且控制台有数据显示

深度侦听对象数据中某一个属性(精确侦听)

<script>
    //深度侦听对象数据中某一个属性(精确侦听)
    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变化了')
    })
</script>
<template>
    <div>
        {{ info.username }}
        {{ info.age }}
        <button @click="setInfoByname">修改username</button>
        <button @click="setInfoByAge">修改age</button>
    </div>
</template>

当点击修改username，旁边的“wahaha”会变为“张三”，当点击修改age时旁边的“18”，会变为“28”，并且控制台会有数据显示

3.5、生命周期函数

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

选项式API（vue2）	组合式API（vue3）
beforeCreate/created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

如何使用： 1.调用工具 2.使用函数

组合式API中的生命周期函数语法格式是什么？可以调用函数一样去使用，on+生命周期的名字

在组合式API中如何调用onCreated函数？在组合式API中没有onCreated函数，已经集成到setup中

beforeCreated与setup谁的优先级更高？ setup优先级更高

组合式API中的组件卸载完毕调用哪一个钩子函数？ onUnmounted

//生命周期函数
    import { onMounted } from 'vue';
    onMounted(()=>{
      console.log('元素加载完毕执行了mounted函数1')
    })
    onMounted(()=>{
      console.log('元素加载完毕执行了mounted函数2')
    })