前端：Vue3学习

坚持不懈的大白2024-08-27 12:15

前端：Vue3学习

    • [1. 打包发布](#1. 打包发布)
    • [2. vue3 项目构建](#2. vue3 项目构建)
    • [3. vue3- setup选项](#3. vue3- setup选项)
    • [4. vue3 ->reactive 和 ref函数--响应式数据](#4. vue3 ->reactive 和 ref函数--响应式数据)
    • [5. vue3 computed-计算属性](#5. vue3 computed-计算属性)
    • [6. vue3 watch 监听数据变化](#6. vue3 watch 监听数据变化)
    • [7. vue3 生命周期 - 选项式&组合式](#7. vue3 生命周期 - 选项式&组合式)
    • [8. vue3 组件通信](#8. vue3 组件通信)
    • [9. vue3 模板引用&defineExpose](#9. vue3 模板引用&defineExpose)
    • [10. vue3 provide & inject 多层组件数据通信](#10. vue3 provide & inject 多层组件数据通信)

1. 打包发布

(vue2或vue3)打包的作用：

  1. 将多个文件压缩合并成一个文件
  2. 语法降级
  3. less scss ts 语法解析

打包后，可以生成浏览器能够直接运行的网页

打包命令为：yarn build

执行上述命令之后，在项目的根目录会自动创建一个文件夹dist ，dist中的文件就是打包后的文件，只需要放到服务器即可。

默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径。在vue。config.js中进行配置

在项目根目录下运行打包命令：

在项目根目录下生成dist文件夹：

配置publicPath：

打包之后直接运行dist文件夹下的index.html即可

打包优化 ，路由懒加载，当打包构建应用时，js包会变得非常大，影响页面加载。如果把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

在路由配置文件修改对应组件导入方式，如下：

js 复制代码 
import Login from "@/views/login/Login.vue"
// 旧的导入方式
const Login = ()=> import('@/views/login/Login.vue')
// 异步组件方式

2. vue3 项目构建

vue2为选项式api，而vue3属于组合式api

创建vue3项目，需要node版本为16及以上

js 复制代码 
npm init vue@latest

执行上述命令之后，在浏览器输入对应地址，如下：

3. vue3- setup选项

vue文件，首先是script，然后是template，最后是style。

在script上写上setup，用于指定当前支持组合式api

  1. setup执行时机比beforeCreate还早；
  2. setup行数中，获取不到this；
  3. 数据和函数，需要在setup最后return，才能在模板中进行应用；
html 复制代码 
<script>

export default{
  setup(){
    console.log('setup',this)

    const hello = 'hello world'
    const hh = function(){
      console.log(hello)
    }

    return {
      hello,
      hh
    }
  },
  beforeCreate(){
    console.log('beforecreate')
  }
}
</script>
<template>
  <div>
    {{ hello }}
  </div>
  <button @click="hh">
    hh
  </button>
</template>

使用setup语法糖简化代码。

html 复制代码 
<script setup>
  const hello = 'hello world'
  const hh = function(){
    console.log(hello)
  }
</script>
<template>
  <div>
    {{ hello }}
  </div>
  <button @click="hh">
    hh
  </button>
</template>

4. vue3 ->reactive 和 ref函数--响应式数据

使用reactive，数据必须是以对象的形式，返回的是一个响应式对象。

html 复制代码 
<script setup>
import { reactive } from 'vue';

const state = reactive({
  count:100
})
const add = ()=>{
  state.count ++;
}
</script>
<template>
  <div>
    {{ state.count }}
  </div>
  <button @click="add">
    加1
  </button>
</template>

使用ref 可以接收简单类型或复杂类型的数据，返回一个响应式的对象。本质原有传入数据的基础上，外层包了一层对象，包成了复杂类型，再借助reactive实现的响应式。

需要注意的是，脚本中访问数据，需要通过".value"进行访问或修改；在template中，".value"不需要添加。

html 复制代码 
<script setup>
import { ref } from 'vue';

const count = ref(100);
const add = ()=>{
  count.value ++;
}
</script>
<template>
  <div>
    {{ count }}
  </div>
  <button @click="add">
    加1
  </button>
</template>

运行结果：

5. vue3 computed-计算属性

引入及使用：

js 复制代码 
import { computed} from 'vue';
const getData = computed(()=>{
	return '计算属性的逻辑'
})
html 复制代码 
<script setup>
import { ref ,computed} from 'vue';

const arr = ref([1,2,3,4,5,6,7,8,9,10]);
// 声明数据
const getData = computed(()=>{
  return arr.value.filter(x=>x>3)
})

</script>
<template>
  <div>
    {{ arr }}
  </div>
  <div>
    {{ getData }}
  </div>
</template>

6. vue3 watch 监听数据变化

监听一个或者多个数据的变化，数据变化时执行回调函数.

两个额外参数：1. immediate（立即执行）2. deep（深度监听）

js 复制代码 
// 监视单个数据
watch(数据名,(newValue,oldValue)=>{
	// 代码逻辑
})

// 监视多个数据
watch([数据名1，数据名2],(newValueArr,oldValueArr)=>{
	// 代码逻辑
})

参考代码如下：

html 复制代码 
<script setup>
import {ref,watch} from 'vue';

const name = ref('张三丰')
const count = ref(0)
const change_name = ()=>{
  name.value = '张三'
}
const change_count = ()=>{
  count.value = 1
}
watch(name,(new_v,old_v)=>{
  console.log(new_v,old_v)
})
watch([count,name],(new_arr,old_arr)=>{
  console.log(new_arr,old_arr)
})
</script>
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ name }}</p>
  </div>
  <div>
    <button @click="change_name">改name</button>
    <button @click="change_count">改count</button>
  </div>
</template>

运行结果：

深度监听，当监听的数据类型为对象时，此时如果直接监听这个对象数据，需要添加深度监听的配置，否则修改这个对象下的某个属性时并不会触发这个监听。

html 复制代码 
<script setup>
import { ref, watch } from 'vue';

const user = ref({
  name: 'zs',
  age: 18
})
const change_user_name = () => {
  user.value.name = 'zsf'
}
watch(user, (newValue, oldValue) => {
  console.log(newValue, oldValue)
},{
  deep:true
})
</script>
<template>
  <div>
    {{ user }}
  </div>
  <div>
    <button @click="change_user_name">修改</button>
  </div>
</template>

但是如果采用深度监听又会存在一个问题，因为它是监听这个对象及对象下的所有属性，如果只需要监听对象下的某个属性的变化，此时采用下述监听方式，如下：

html 复制代码 
<script setup>
import {ref,watch} from 'vue';

const user = ref({
  name:'zs',
  age:18
})
const change_user_name = ()=>{
  user.value.name = 'zsf'
}
watch(()=>user.value.name,
  (newValue,oldValue)=>{
  console.log(newValue,oldValue)
})
</script>
<template>
  <div>
    {{ user }}
  </div>
  <div>
    <button @click="change_user_name">修改</button>
  </div>
</template>

7. vue3 生命周期 - 选项式&组合式

vue3中关于生命周期支持选项式和组合式

vue3的生命周期api（选项式和组合式）

选项式 组合式
beforeCreate/created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
html 复制代码 
<script setup>
import { onMounted } from 'vue';


onMounted(()=>{
  console.log('mounted生命周期函数1')
})
onMounted(() => {
  console.log('mounted生命周期函数2')
})

</script>
<template>
  
</template>

8. vue3 组件通信

父传子 ，父组件中给子组件绑定属性，子组件内部通过defineProps编辑器宏选项进行接收。
子传父，在子组件内部，emit触发时间（defineEmits编译器宏获取emit），在父组件中通过@监听。

父组件

html 复制代码 
<script setup>
import {ref} from 'vue'
import sonCom from '@/components/son-com.vue'
const name = ref('张三丰')
const changeName = (v)=>{
  name.value += '&' + v
}
</script>
<template>
  <div class="father">
    <h3>父组件</h3>
    <p>{{ name }}</p>
    <sonCom :name="name" @change-name="changeName"></sonCom>
  </div>
</template>
<style>
  .father{
    width: 220px;
    height: 220px;
    border: 1px solid blue;
  }
</style>

子组件

html 复制代码 
<script setup>

const props = defineProps({
    name:String
})
const emit = defineEmits(['change-name'])
console.log(props.name)
const change_name = ()=>{
    emit('change-name','张三丰')
}
</script>

<template>
    <div class="son">
        <p>我是子组件</p>
        <p>{{ name }}</p>
        <button @click="change_name">修改</button>
    </div>
</template>
<style>
    .son{
        border: 1px solid red;
        width: 140px;
        height: 140px;
    }
</style>

子组件中在脚本中使用父组件传递过来的数据，需要使用props.数据名 ；在模板中渲染时直接使用数据名即可。

9. vue3 模板引用&defineExpose

模板引用步骤，通过ref函数，生成一个ref对象；通过ref表示，进行绑定；通过ref对象.value即可访问到绑定的元素（必须渲染完才可以进行绑定）。

获取模板引用必须在组件挂载完毕之后才行，通常可以在onMounted回调函数内部进行使用或者一些点击按钮的点击事件（点击事件都可以触发了，那么说明模板已经渲染完毕了，此时可以操作dom元素）。

父组件

html 复制代码 
<script setup>
import {ref} from 'vue'
import sonCom from './components/son-com.vue';
import { onMounted } from 'vue';

const divRef = ref(null)

const changeStyle = ()=>{
  const div = divRef.value
  div.style.fontFamily = '华文宋体'
}
const divRef2 = ref(null)
onMounted(()=>{
  console.log(divRef2.value)
})
</script>
<template>
  <div ref="divRef">
    张三丰
  </div>
  <button @click="changeStyle">
    修改演示
  </button>
  <sonCom ref="divRef2"></sonCom>
</template>

子组件

如果在父组件中需要使用子组件的数据和方法，需要使用编译宏defineExpose进行暴露，否则不能引用到。

html 复制代码 
<script setup>

const data = 100
const get_data = ()=>{
    console.log(data)
}
defineExpose({
    data,
    get_data
})
</script>

<template>
    <div class="son">
        <p>我是子组件</p>
        <button @click="get_data">获取数据</button>
    </div>
</template>
<style>
    .son{
        border: 1px solid red;
        width: 140px;
        height: 140px;
    }
</style>

10. vue3 provide & inject 多层组件数据通信

在顶层组件中使用provide把数据传递下去，在底层组件中使用inject中进行接收，接收的可以是数据、响应式数据、方法。

顶层组件

html 复制代码 
<script setup>
import sonCom from '@/components/son-com.vue'
import { provide, ref } from 'vue';

const count = ref(100)
provide('count',count)
const add = ()=>{
  count.value ++
}
provide('add',add)
</script>
<template>
  <div>
    <p>顶层组件</p>
    <sonCom></sonCom>
    <button @click="add">修改</button>
  </div>
</template>

中间组件

html 复制代码 
<script setup>
import sonSCom from '@/components/son-s-com.vue'

</script>

<template>
    <div>
        <p>中间组件</p>
        <sonSCom></sonSCom>
    </div>
</template>

底层组件

html 复制代码 
<script setup>
import { inject } from 'vue';

const count = inject('count')
const add = inject('add');
</script>

<template>  
    <div>
        <p>底层组件</p>
        <span>{{ count }}</span>
        <br>
        <button @click="add">底层组件按钮</button>
    </div>
</template>
相关推荐
careybobo1 分钟前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之1 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端1 小时前
字段聚类，到底有什么用？——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
zhuyixiangyyds3 小时前
day21和day22学习Pandas库
笔记·学习·pandas
每次的天空3 小时前
Android学习总结之算法篇四（字符串）
android·学习·算法
请来次降维打击！！！3 小时前
优选算法系列（5.位运算）
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
背影疾风4 小时前
C++学习之路：指针基础
c++·学习
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】