Vue3基础使用

news2024/11/24 11:06:43

目录

一、创建Vue3工程

(一)、cli

(二)、vite

二、常用Composition API

(一)、setup函数

(二)、ref函数

(三)、reactive函数

(四)、setup注意事项

(五)、计算属性

(六)、watch

(七)、watchEffect函数

(八)、生命周期

1、以配置项的形式使用生命周期钩子

2、组合式api(在setup中使用)

(九)、自定义hook

(十)、toRef、toRefs

三、其他Composition API

(一)、shallowReactive、shallowRef

(二)、readonly 与 shallowReadonly

(三)、toRaw 与 markRaw

(四)、自定义ref(customRef)

(五)、provide、inject

(六)、响应式数据的判断

五、新的组件

(一)、Fragment

(二)、Teleport

(三)、Suspense

六、Vue3的其他改变

(一)、全局API的转移

(二)、data

(三)、过度类名更改

(四)、keyCode

(五)、移除v-on.native

(六)、移除过滤器

一、创建Vue3工程

(一)、cli

创建一个项目 | Vue CLI🛠️ Vue.js 开发的标准工具icon-default.png?t=N7T8https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

##查看@vue/c1i版本，确保@vue/c1i版本在4.5.8以上
vue --version
#安装或者升级你的@vue/cli
npm install -g @vue/cli

##创建
vue create 项目名
##启动
cd 项目名
npm run serve

(二)、vite

快速上手 | Vue.jsVue.js - 渐进式的 JavaScript 框架icon-default.png?t=N7T8https://v3.cn.vuejs.org/guide/installation.html#viteVite中文网下一代前端开发与构建工具icon-default.png?t=N7T8https://vitejs.cn

##创建工程
npm init vite-app 项目名
#进入工程目录
cd 项目名
##安装依赖
npm i
##运行
npm run dev

二、常用Composition API

(一)、setup函数

简单演示，下面的写法不对，丢失了响应式。 

<template>
  <h2>我的名字是{{ name }}，年龄是{{ age }}</h2>
</template>

<script>
export default {
  name: "HelloWorld",
  setup() {
    let name = "jack";
    let age = 18;

    function sayHello() {
      console.log("hello");
    }
    return {
      name,
      age,
      sayHello,
    };
  },
};
</script>

(二)、ref函数

// 示例，执行changeInfo函数修改信息，响应式数据
import {ref} from 'vue'
export default {
	name: 'App',
  	setup(){
    	let name = ref('LHD')
    	let age = ref(19)
    	let job = ref({
    	  type:'前端工程师',
    	  salary:'15k'
    	})
    	function changeInfo(){
    	  name.value = 'DHL',
    	  age.value = '20',
    	  job.value.type = '搬砖工程师',
    	  job.value.salary = '10k'
    	}
    	return{
    	  name,
    	  age,
    	  job,
    	  changeInfo
    	}
	}
}

(三)、reactive函数

// 先引入reactive
import {reactive} from 'vue'
// 2的示例，setup函数中改成这样
let person = reactive({
	name:'LHD',
  	age:'19',
  	job:{
    	type:'工程师',
    	salary:'20k'
  	},
  	hobby:['Study','Video Game']
})
function changeInfo(){
	person.name = 'DHL',
  	person.age = '20',
  	person.job.type = '搬砖工程师',
  	person.job.salary = '10k',
  	person.hobby[1] = 'fly'
}
return{
	person,
  	changeInfo
}

(四)、setup注意事项

(五)、计算属性

(六)、watch

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

(七)、watchEffect函数

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

(八)、生命周期

1、以配置项的形式使用生命周期钩子

与setup平级

2、组合式api(在setup中使用)

(九)、自定义hook

src/hooks/usePoint.js

///得到鼠标点的api

import { reactive, onMounted, onBeforeUnmount } from "vue";

export default function usePoint(){
    //响应式数据
    let point = reactive({
        x: 0,
        y: 0
    });

    //方法
    const savePoint = event => {
        console.log(event.pageX, event.pageY);
        point.x = event.pageX;
        point.y = event.pageY;
    };

    //生命周期
    onMounted(() => {
        window.addEventListener('click', savePoint)
    });

    onBeforeUnmount(() => {
        //在卸载之前取消事件的监听
        window.removeEventListener('click', savePoint);
    });

    return point;
}

 src/components/Demo.vue

<template>
   <h1>当前求和为:{{ sum }}</h1>
   <button @click="sum++">点我加一</button>
   <hr/>
   <h2>当前点击时鼠标的坐标为x:{{ point.x }}, y:{{ point.y }}</h2>
</template>

<script>
import {ref} from 'vue';
import usePoint from "../hooks/usePoint";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);

    //复用自定义hooks
    const point = usePoint();

    //返回一个对象
    return {
      sum,
      point
    }
  },
}
</script>

<style>
</style>

(十)、toRef、toRefs

<template>
  <h4>{{ person }}</h4>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>薪资:{{ salary }}K</h2>
  <button @click="name = name + '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">增长薪资</button>
</template>

<script>
import { ref, reactive, toRef, toRefs} from 'vue';
export default {
  name: 'Demo',
  setup(){
    let person = reactive({
      name: '张三',
      age: 18,
      job:{
        j1:{
          salary: 20
        }
      }
    });

    //ref类型的值在模板里使用是不需要.value来取的
    const name1 = person.name //注意输出字符串，并不是响应式的数据
    console.log('@@@@@', name1);
    const name2 = toRef(person,name); //RefImpl 这里的name2与person.name是完全一模一样的(你改这里的name2与你改person.name是一码事),且数据还是响应式的
    console.log('####', name2);

    const x = toRefs(person);
    console.log(x);


    //返回一个对象(toRef是引用 name就是person.name且为响应式)
    //toRef处理一个，而toRefs处理一群
    //大白话:toRef(s)就是方便我们把响应式数据(ref,reactive)展开丢出去，方便在模版中应用
    return {
      person,
      // name: toRef(person, "name"),
      // age: toRef(person, "age"),
      // salary: toRef(person.job.j1, "salary")
      ...toRefs(person),
      salary: toRef(person.job.j1, 'salary')  //toRef可以与toRefs连用,更加方便
    };


    //注意千万不能这样写
    //一旦这样写就与元数据分离了,改name不会引起person.name的变化(因为ref把name值包装成了一个refImpl对象)
    // return {
    //   person,
    //   name: ref(person.name),
    //   age: ref(person.age),
    //   salary: ref(person.job.j1.salary)
    // };
  }
}
</script>

<style>
</style>

三、其他Composition API

(一)、shallowReactive、shallowRef

(二)、readonly 与 shallowReadonly

(三)、toRaw 与 markRaw

<template>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="sum++">sum+1</button>
  <hr/>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>薪资:{{ job.j1.salary }}K</h2>
  <h3 v-show="person.car">座驾信息:{{ person.car }}</h3>
  <button @click="name = name + '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪资</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car && (person.car.name +='!') ">换车名</button>
  <button @click="changePrice">换价格</button>
</template>

<script>
import {markRaw, reactive, ref, toRaw, toRefs} from 'vue';

export default {
  name: 'Demo',
  setup(){

    let sum = ref(0);

    let person = reactive({
      name: '张三',
      age: 18,
      job:{
        j1:{
          salary: 20
        }
      }
    });

    //ref reactive(响应式)

    const showRawPerson = () => {
       const  p = toRaw(person);
       // console.log(person); //proxy代理对象 Proxy {....}
       p.age++; //注意此时页面不会再发生变化了,普普通通的对象不是响应式
       console.log(p); //原始对象数据  {....}

      // const sum  = toRaw(sum);
      // console.log(sum); //undefined //这条路走不通,toRaw只处理reactive对象
    }

    const addCar = () => {
      person.car = markRaw({
         name: 'benz',
         price: 40
       }); //在响应式的对象身上添加任何属性都是响应式的，经过markRaw一包装就变成最原始的数据就不会再做响应
    }


    const changePrice = () => {
      person.car?.price && person.car.price++;
      console.log(person?.car?.price);
    }

    return {
      sum,
      person,
      ...toRefs(person),
      showRawPerson,
      addCar,
      changePrice
    };

  }
}
</script>

<style>
</style>

(四)、自定义ref(customRef)

需求

<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

(五)、provide、inject

(六)、响应式数据的判断

  1. isRef: 检查一个值是否为一个 ref 对象
  2. isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
  3. isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
  4. isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

五、新的组件

(一)、Fragment

  • 在Vue2中: 组件必须有一个根标签
  • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处: 减少标签层级, 减小内存占用

(二)、Teleport

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

(三)、Suspense

六、Vue3的其他改变

(一)、全局API的转移

Vue 2.x 有许多全局 API 和配置。

  • 例如：注册全局组件、注册全局指令等

//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

Vue3.0中对这些API做出了调整：

  • 将全局的API，即：Vue.xxx调整到应用实例（app）上

(二)、data

data选项应始终被声明为一个函数。

(三)、过度类名更改

Vue2.x写法

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

Vue3.x写法

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

(四)、keyCode

移除 keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

(五)、移除v-on.native

移除 v-on.native修饰符

父组件中绑定事件

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

子组件中声明自定义事件

<script>
  export default {
    emits: ['close']
  }
</script>

(六)、移除过滤器

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1862298.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode 算法：将有序数组转换为二叉搜索树 c++

LeetCode 算法：将有序数组转换为二叉搜索树 c++

原题链接&#x1f517;&#xff1a;将有序数组转换为二叉搜索树 难度&#xff1a;简单⭐️ 题目 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 示例 1&#xff1a; 输入&#xff1a;nums [-10,-3,0,5,9]…
阅读更多...
怎么用电脑在线制作活码？快速将活码生成的操作方法

怎么用电脑在线制作活码？快速将活码生成的操作方法

随着现在很多内容都可以通过生成二维码的方式来展示&#xff0c;所以在很多地方都会将内容生成二维码的方式让其他人通过扫码查看内容。二维码不仅能够简化用户获取内容的流程&#xff0c;还可以降低成本&#xff0c;有效提升用户体验&#xff0c;那么不同内容的二维码如何制作…
阅读更多...
Golang笔记：使用serial包进行串口通讯

Golang笔记：使用serial包进行串口通讯

文章目录 目的使用入门总结 目的 串口是非常常用的一种电脑与设备交互的接口。这篇文章将介绍golang中相关功能的使用。 本文使用的包为 &#xff1a;go.bug.st/serial https://pkg.go.dev/go.bug.st/serial https://github.com/bugst/go-serial 另外还有一些常见的包如&…
阅读更多...
构建家庭NAS之三：在TrueNAS SCALE上安装qBittorrent

构建家庭NAS之三：在TrueNAS SCALE上安装qBittorrent

本系列文章索引&#xff1a; 构建家庭NAS之一&#xff1a;用途和软硬件选型 构建家庭NAS之二&#xff1a;TrueNAS Scale规划、安装与配置 构建家庭NAS之三&#xff1a;在TrueNAS SCALE上安装qBittorrent 大部分家庭NAS用户应该都会装一个下载工具。本篇以qBittorrent为例&…
阅读更多...
Linux-笔记 全志T113移植正点4.3寸RGB屏幕笔记

Linux-笔记 全志T113移植正点4.3寸RGB屏幕笔记

目录 前言 线序整理 软件 显示调试 触摸调试 背光调试 前言 由于手头有一块4.3寸的RGB屏幕(触摸IC为GT1151)&#xff0c;正好开发板上也有40Pin的RGB接口&#xff0c;就想着给移植一下&#xff0c;前期准备工作主要是整理好线序&#xff0c;然后用转接板与杜邦线连接验证好…
阅读更多...
MySQL 外连接、内连接与自连接的区别？

MySQL 外连接、内连接与自连接的区别？

引言&#xff1a;本文将深入探讨这些连接类型的概念、语法及其应用场景&#xff0c;帮助读者全面理解如何利用这些技术实现复杂的数据查询和分析。在数据库查询中&#xff0c;连接操作使得我们可以根据指定的关联条件&#xff08;join condition&#xff09;联合两个或多个表中…
阅读更多...
vuex的actions返回结果类型是promise及actions方法互相调用

vuex的actions返回结果类型是promise及actions方法互相调用

this.$store.dispatch(‘logout’)返回的结果是Promise类型的 调用成功的情况下&#xff0c;返回状态为fulfilled&#xff0c;值为undefined。 所以可以直接进行.then操作&#xff1a; this.$store.dispatch(logout).then((result) > {console.log(result); });因为 Vuex …
阅读更多...
Python读取中文路径，出现乱码问题解决方案

Python读取中文路径，出现乱码问题解决方案

Python读取中文路径&#xff0c;出现乱码问题解决方案 一、问题描述二、问题解决 欢迎学习交流&#xff01; 邮箱&#xff1a; z…1…6.com 网站&#xff1a; https://zephyrhours.github.io/ 一、问题描述 笔者在使用opencv读取带有中文路径的图片时&#xff0c;发现会出现乱…
阅读更多...
【操作系统】信号处理与阻塞函数|时序竞态问题

【操作系统】信号处理与阻塞函数|时序竞态问题

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​ 关于阻塞函数和…
阅读更多...
免费领！系统学习上位机编程的流程与基础教程

免费领！系统学习上位机编程的流程与基础教程

上位机电气自动化plc编程全套入门教程工具 华山编程导师根据当前招聘需求的关键点&#xff0c;原创录制了一套系统的学习流程和基础教程&#xff0c;帮助你从快速入门到掌握上位机编程的技能。 二. 学习准备 为了更好地学习并实现80%以上的代码运行&#xff0c;建议准备一个工…
阅读更多...
webstorm格式化或保存时 vue3引入的组件被删除了

webstorm格式化或保存时 vue3引入的组件被删除了

解决办法 保存时设置 格式化设置
阅读更多...
线程安全问题（一）——锁的简单使用

线程安全问题（一）——锁的简单使用

多线程安全问题 线程安全问题的引入案例引入多线程指令排序问题 线程不安全的原因解决线程不安全的方法锁的引入上锁和解锁过程一个简单的锁Demo对这个案例进行几次修改 总结 线程安全问题的引入 在前面的博文中&#xff0c;我们了解到通过Thread.join()的方法让线程进入等待&…
阅读更多...
谷歌云(GCP)4门1453元最热门证书限时免费考

谷歌云(GCP)4门1453元最热门证书限时免费考

谷歌云(GCP)最新活动&#xff0c;完成免费官方课程&#xff0c;送4门最热门考试免费考试券1张(每张价值200刀/1453元)&#xff0c;这4门也包括最近大热的AI/ML考试&#xff0c;非常值得学习和参加&#xff0c;活动7/17截止 谷歌云是全球最火的三大云计算厂商(前两名AWS, Azure…
阅读更多...
Electron 整理文档

Electron 整理文档

Electron 简介 Electron 是一个使用 JavaScript、 HTML 和 CSS 构建桌面应用程序的框架。通过将 Chromium 和 Node.js 嵌入到它的二进制文件中&#xff0c;Electron 允许你维护一个 JavaScript 代码库&#xff0c;并创建可以在 Windows、 macOS 和 Linux 上运行的跨平台应用程序…
阅读更多...
pandas将dataframe展开/拉伸成一个series

pandas将dataframe展开/拉伸成一个series

pandas提供了一个函数实现这个操作&#xff1a; dataframe.stack()示例程序&#xff1a; import pandas as pd import numpy as npdf pd.DataFrame(np.random.randint(0, 10, size(2, 4)), columns[col_1, "col_2", "col_3", "col_4"]) # 展…
阅读更多...
详解 ClickHouse 的分片集群

详解 ClickHouse 的分片集群

一、简介 分片功能依赖于 Distributed 表引擎&#xff0c;Distributed 表引擎本身不存储数据&#xff0c;有点类似于 MyCat 之于 MySql&#xff0c;成为一种中间件&#xff0c;通过分布式逻辑表来写入、分发、路由来操作多台节点不同分片的分布式数据 ClickHouse 进行分片集群的…
阅读更多...
优雅谈大模型13：LangChain Vs. LlamaIndex

优雅谈大模型13：LangChain Vs. LlamaIndex

实时了解业内动态&#xff0c;论文是最好的桥梁&#xff0c;专栏精选论文重点解读热点论文&#xff0c;围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;…
阅读更多...
算法训练营day20--235. 二叉搜索树的最近公共祖先+701.二叉搜索树中的插入操作 +450.删除二叉搜索树中的节点

算法训练营day20--235. 二叉搜索树的最近公共祖先+701.二叉搜索树中的插入操作 +450.删除二叉搜索树中的节点

一、235. 二叉搜索树的最近公共祖先 题目链接&#xff1a;https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/ 文章讲解&#xff1a;https://programmercarl.com/0235.%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91%E7%9A%84%E6%9C%80%E8%BF%91…
阅读更多...
小阿轩yx-用户管理与高级SQL语句

小阿轩yx-用户管理与高级SQL语句

小阿轩yx-用户管理与高级SQL语句 MySQL 进阶查询 运维工作中可以提供不小的帮助&#xff0c;运维身兼数职&#xff0c;可能会有不少数据库的相关工作 常用查询介绍 对查询的结果集进行处理 按关键字排序 使用 SELECT 语句可以将需要的数据从 MySQL 数据库中查询出来 对结…
阅读更多...
调幅信号AM的原理与matlab实现

调幅信号AM的原理与matlab实现

平台&#xff1a;matlab r2021b 本文知识内容摘自《软件无线电原理和应用》 调幅就是使载波的振幅随调制信号的变化规律而变化。用音频信号进行调幅时&#xff0c;其数学表达式可以写为: 式中&#xff0c;为调制音频信号&#xff0c;为调制指数&#xff0c;它的范围在(0&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023