Vue3快速上手,知道这几点就行了

2023-11-01 04:50

本文主要是介绍Vue3快速上手,知道这几点就行了,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

创建一个vue项目

分析代码

setup()与 setup 语法糖

ref()

reactive()

watch函数

生命周期函数

ref操作组件-defineExpose

跨级组件通讯provide 与inject 函数

父传子

        vue3之mixin

toRef 与 toRefs

vue3的响应式原理


创建一个vue项目

(在确保node为16+版本情况下)

 新建项目的两种方法:

1. vue-cli创建

vue -V 查看版本 @vue/cli 为4.5.0npm install -g @vue/cli// 创建项目,选择vue3一栏,enter
vue create vue-item// 启动,在vue-item 项目内启动
npm run serve

2.vite创建(推荐方法)

vite 是新一代的构建工具,在开发环境中,可快速冷启动,按需编程,不再等待整个应用加载完毕。是未来的趋势。

#创建
npm init vite-app my-vite#进入
cd my-vite#安装
npm install#启动
npm run dev

分析代码

//  引入一个工厂函数,从vue中
import { createApp } from 'vue'
// 创建一个vue的对象
import App from './App.vue'// 工厂函数,创造出一个vue的实例对象
createApp(App).mount('#app')createApp(App).mount('#app')

打印create(App)可以看见如下

setup()与 setup 语法糖

setup语法糖:Vue3.2 中引入了setup语法糖, 只需要在 script 标签上加上 setup 属性,无需 return,可以在template模板中直接使用。(引入自掘金文章《Vue3中setup语法糖使用总结》)   关于这一部分:大家可以看官方文档(setup语法糖)

ref()

用来做数据绑定的,最好是简单的数据类型的绑定。

<template><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><h2>爱好:</h2><button @click="say">改变</button>
</template><script>
// 这里需要引入ref
import {ref} from 'vue';export default {name: 'App',setup(){
// 用ref()包裹let name = ref('lili')let age = ref(18)function say() {
// 用数据.value 取值age.value = 20name.value = 'zhouzhousa'alert("我改了啊啊啊");}return {name,age,say}}
}
</script>

打印出来得到这种 RefImpl{} 实例对象


 

 通过get 与 set 来修改数据

reactive()

复杂的数据类型的绑定。

<template><h2>姓名:{{ mima.name }}</h2><h2>年龄:{{ mima.age }}</h2><h2>爱好:</h2><button @click="say">改变</button>
</template><script>
import {ref , reactive } from 'vue';export default {name: 'App',setup(){let mima = {name:  'lili',age:   18,list: ['11','22','123','1223']}reactive(mima)function say() {mima.name = 'wuuwuw'mima.age = 20console.log(mima);mima.list[0] = 'xiaosi'console.log(`${mima.name} 今年是${mima.age} , ${mima.list[2]}`);}return {mima,say}}
}
</script>

打印发现

引入了es6新特性, 

watch函数

监测数据的变化 监听多个响应式数据.

键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。

如果传入多个需要监听的数据,可以用下列的数组的方式。

<script>const count = ref(1)// 复杂类型要用 reactive 才能被检测const per = reactive({name: 'lili',age:19})const addOne = ()=>{count.value++}watch([count,per],()=>{console.log("观测改变");})setTimeout(() => {per.age = 200}, 3000);</script>

监听对象中的一个属性的变化

const count = ref(1)// 复杂类型要用 reactive 才能被检测const per = reactive({name: 'lili',age:19})const addOne = ()=>{count.value++}// 检测对象数据的一个数据,简单类型// watch(()=> 数据,改变后回调函数)watch(() => per.name, ()=>{console.log("数据改变");})setTimeout(() => {per.name = '222'}, 3000);

监听响应式对象数据的一个数据,复杂类型。watch(()=>数据, 改变后回调函数, {deep: true})

// 监听响应式对象数据的一个数据,复杂类型// watch(()=>数据, 改变后回调函数, {deep: true})const count = ref(1)// 复杂类型要用 reactive 才能被检测const per = reactive({name: 'lili',age:19,wa: {class: '112',number: 90}})watch(() => per.wa, ()=>{console.log("数据改变");},{deep: true})setTimeout(() => {per.wa.class = '222'}, 3000);

生命周期函数

onMounted() 用的最多

ref操作组件-defineExpose

使用 <script setup> 的组件是默认关闭的,组件实例使用不到顶层的数据和函数。

我们要通过 defineExpose() 把数据暴露出来

跨级组件通讯provide 与inject 函数

  • App是后代组件依赖的数据和函数的提供者,Child是注入(获取)了App提供的依赖
  • provide和inject是解决跨级组件通讯的方案

    • provide 提供后代组件需要依赖的数据或函数
    • inject 注入(获取)provide提供的数据或函数
  • 测试代码

App.vue

<template><div><Father></Father></div>
</template><script setup>
import Father from '@/components/Father'
// 父组件,测试跨级组件通讯
import {ref , provide} from 'vue'// 此处将值传给孙子组件
const count = ref(1)provide('count',count)</script>

Father.vue

<template><div><h1>这里是父亲组件</h1><son></son></div>
</template><script setup>
// 父组件,测试跨级组件通讯
import son from '@/components/Son.vue'
</script>

Son.vue

<template><div><h2>这里是孙子组件</h2><h2>在此处获取前辈组件的值 {{ count }}</h2></div>
</template><script setup>
import { inject } from "vue";// 孙组件,测试跨级组件通讯
const count = inject('count')
</script>

父传子

使用defineProps与defineEmits

测试代码

父组件

<template><div><h1>这里是父亲组件</h1><son :flower="flower" @dailyActivites="dailyActivities" :fish="fish"></son></div>
</template><script setup>
// 父组件,测试跨级组件通讯
import son from '@/components/Son.vue'
import {ref} from 'vue'// 子传父测试
const flower = ref('fish')
const fish = ref("goldfish")const dailyActivities = ()=>{console.log("浇水活动");
}// 父传子测试
</script>

子组件

<template><div><h2>父组件数据{{ flower }} {{ fish }}</h2><button @click="fn">父组件函数</button></div>
</template><script setup>
import { inject ,ref} from "vue";// 下面是子传父
const color = ref('red')// 父传子数据接收用definePropsdefineProps(['flower','fish'])// 子组件中定义接收父组件传过来的方法
const emit = defineEmits(['dailyActivites'])const fn = ()=>{emit("dailyActivites")
}
</script>

这里,有讲得比较详细:Vue3 子组件向父组件传值的方法_vue3子组件给父组件传值_thonmsneee98的博客-CSDN博客

vue3之mixin

即为抽离出经常会调用的函数代码把它封装起来。因为函数式编程就是通过减少移动的部分让代码更好理解。(注意:vue3之minxin,并非官方的一种说法)

此处举例:
在vue3项目中监听鼠标坐标。

 建文件夹 hooks

内部写

import { onMounted, onUnmounted, reactive } from "vue";export default function(){const position = reactive({x: 0,y: 0})function getPoint(e){position.x = e.pageXposition.y = e.pageY}// 组件加载之后才可检测鼠标位置onMounted(()=>{window.addEventListener('click',getPoint)console.log(111);})// 不用了之后可以卸载,以防干扰onUnmounted(()=>{window.removeEventListener('click',getPoint)})return position
}

app.vue

<template><div>当前鼠标点击位置为x:{{ position.x }} ,y: {{ position.y  }}</div>
</template><script setup>
import userPoint from '@/hooks/usePoint'const position = userPoint()</script><style></style>

toRef 与 toRefs

 多用于解构数据渲染到页面上时,简化。 toRefs 与 toref() 可以保持数据的响应不变,而且其实现是引用,而非创建。(暂时没想到有啥用途)

vue3的响应式原理

与vue2响应式比较:

测试vue2的新增属性

新增一个hobby属性,发现无法响应式,打印看结果:

发现对象新增属性,hobby 中没有 get 与 set  因此无法实现响应式。其他的也同样。

<template><div id="app"><h2>姓名:{{ mima.name }}</h2><h2>年龄:{{ mima.age }}</h2><h2>爱好:{{ mima.hobby }}</h2><h2>数组: {{ this.mima.list }}</h2><button @click="createNew">新增</button><button @click="changeHobby">改变一下hobby</button><button @click="deleteOne">删除</button>   <button @click="modArray">修改</button>   </div>
</template><script>export default {name: 'App',components: {},data(){return{mima: {name: 'lolo',age: 16,list: ['a','b']}}},methods:{createNew(){this.mima.age = 20this.mima.name = 'lili'// this.mima.hobby = 'drawing'// 下面方式变成响应式this.$set(this.mima,'hobby','drawing')},changeHobby(){this.mima.hobby = 'singing'},deleteOne(){// 删除一个元素,这为非响应式delete  this.mima.hobby},modArray(){// 下面方法,没有实现响应式// this.mima.list[2] = 'c'// 要这样才有this.$set(this.mima.list,2,'c')console.log(this.mima.list);}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

这里要聊一下,vue2通过 Object.defineProperty() 这个js方法来实现的数据双向绑定理。

这是关于Object.defineProperty() 的一篇文章十分钟理解Object.defineProperty() - 掘金

(我看了一下,没看懂)

但我下面提供了测试代码(建一个 test.html文件)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">let person = {name: 'lili',age: 18}// 模拟vue2 的响应式实现// 注意: Object.defineProperty() 不是 Object.definePropertie()let p = {}Object.defineProperty(p,'name',{get(){return person.name},set(value){// 在此处实现响应console.log("有人修改了name");person.name = value}})Object.defineProperty(p,'age',{get(){return person.age},set(value){// 在此处实现响应console.log("有人修改了name");person.age= value}})</script>
</body>
</html>

右键浏览器,打开

vue3的原理:

借助了 proxy 属性。

proxy属性(Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等))

测试代码:

<script type="text/javascript">let person = {name: 'lili',age: 18}const b = new Proxy(person,{ })
</script>

 这样:

vue3是使用Proxy() get(),set()  reflect() 来实现数据响应式的,关于relect()这部分我就不做展示了。大家自行了解。

记得点赞关注哦,爱你。

读书如譬若掘井,掘数十井而不及泉,不如掘一井而见泉。

这篇关于Vue3快速上手,知道这几点就行了的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/320588

相关文章

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,