转战VUE3学习

已于 2023-06-25 08:41:30 修改
阅读量264 收藏
点赞数
文章标签： 学习 javascript 开发语言
于 2023-06-23 17:48:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40610003/article/details/131347442
版权

安装好vue3后，开始新的项目吧！

npm init vue@latest

1.组合式API

在以前vue2的项目里，使用的选项式API将各种不同逻辑的代码分散到像data、methods等不同的对象里。如果想看某一方面的逻辑，鼠标滚轮都要磨出火星了！

而升级到vue3之后组合式API就解决了这一难题。
在这里插入图片描述

1.1拉开序幕的setup

setup是所有组合式API表演的舞台。组件中所用到的数据、方法，均要配置在setup中。

//setup其实是一个函数
export default {
	name : 'APP',
	setup : function(){
	}
}
//函数可简写
export default {
	name : 'APP',
	setup(){
	}
}
//添加数据和方法
export default {
	name : 'APP',
	setup(){
		//数据
		let name = '张三'
		let age = 18
		//方法
		function sayHello(){
			alert("我是${name}，我已经${age}岁了")
		}
	}
}

setup有返回值，有两种返回值：
（1）若返回对象，则对象中的属性、方法在模板中可以直接使用。（重点）
（2）若返回渲染函数，则可以自定义渲染的内容。（了解）

<template>
	<h1>姓名：{{ name }}</h1>
	<h1>年龄：{{ age }}</h1>
	<button @click="sayHello">说话</button>
</template>
<script>
export default {
	name : 'APP',
	setup(){
		//数据
		let name = '张三'
		let age = 18
		//方法
		function sayHello(){
			alert("我是${name}，我已经${age}岁了")
		}
		//setup返回对象    return {name:name,age:age}   
		return {name,age,sayHello} //setup返回对象的简写形式（常用）
		//返回渲染函数
		//return () => h('h1','您好')
	}
}
</script>

1.2 兼容vue2

在vue3中其实也可以继续用vue2的写法。
在vue2的配置中可以读取vue3的配置，但是vue3的配置中不能读取vue2的配置。

<template>
	<h1>姓名：{{ name }}</h1>
	<h1>年龄：{{ age }}</h1>
	<h1>性别：{{ sex }}</h1>
	<button @click="sayHello">说话</button>
	<button @click="sayWelcome">欢迎</button>
</template>
<script>
export default {
	name : 'APP',
	data(){
		return {
			sex:'男'
		}
	},
	methods : {
		sayWelcome(){
			alert('欢迎')
		}
	},
	setup(){
		//数据
		let name = '张三'
		let age = 18
		//方法
		function sayHello(){
			alert("我是${name}，我已经${age}岁了")
		}
		return {name,age,sayHello} 
	}
}
</script>

但是不建议vue3与vue2的配置混用！

1.3 ref函数

在之前setup中写的数据，并不是响应式的。当修改数据时，在模板中的数据没有相应的变化。因此，需要通过一个函数ref来讲数据变成响应式的。

<template>
	<h1>姓名：{{ name }}</h1>
	<h1>年龄：{{ age }}</h1>
	<button @click="changeInfo">修改个人信息</button>
</template>
<script>
export default {
	name : 'APP',
	setup(){
		//数据
		let name = '张三'
		let age = 18
		//方法
		function changeInfo(){
			name = '李四'
			age = 48
			console.log(name,age) //数据修改了，但是没响应到模板中
		}
		return {name,age,changeInfo} 
	}
}
</script>

现在引入ref函数，将初始化的字面量用ref函数包裹起来。

<script>
import {ref} from 'vue'
export default {
	name : 'APP',
	setup(){
		//数据
		let name = ref('张三')
		let age = ref(18)
		//方法
		function changeInfo(){
			// name = '李四'
			// age = 48
			console.log(name,age) //数据修改了，但是没响应到模板中
		}
		return {name,age,changeInfo} 
	}
}
</script>

用ref函数包裹的数据实际上是RefImpl的引用实现对象。
在这里插入图片描述
修改数据的方式需要使用value来修改。但是在模板中不用.value访问数据，因为vue3自动解析RefImpl对象的值了。

<template>
	<h1>姓名：{{ name }}</h1>
	<h1>年龄：{{ age }}</h1>
	<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
	name : 'APP',
	setup(){
		//数据
		let name = ref('张三')
		let age = ref(18)
		//方法
		function changeInfo(){
			name.value = '李四'
			age.value = 48
		}
		return {name,age,changeInfo} 
	}
}
</script>

当用ref函数包裹对象时，也需要value才能访问内部的值。

<template>
	<h1>姓名：{{ name }}</h1>
	<h1>年龄：{{ age }}</h1>
	<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
	name : 'APP',
	setup(){
		//数据
		let name = ref('张三')
		let age = ref(18) 
		let job = ref({
			type : '前端工程师',
			salary : '30k' 
		})
		//方法
		function changeInfo(){
			job.value.type = '李四'
			job.value.salary = '60k'
		}
		return {name,age,changeInfo} 
	}
}
</script>

但是，按道理RefImpl内部的值应该也是RefImpl的对象，但是实际上我们发现内部用的是Proxy对象。其实ref包裹对象类型数据时，借用了reactive函数。
在这里插入图片描述

总结：

  • 作用：定义一个响应式的数据
  • 语法：const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（ref对象）
  • js中操作数据：xxx.value 模板中读取数据：不需要.value，直接
    <div>{{xxx}}<div>
  • 接收的数据可以是基本类型，也可以是对象类型。
  • 基本类型的数据的响应式是靠Object.defineProperty()的get与set完成的。

1.4 reactive函数

在vue中，reactive函数（响应）的作用定义一个对象类型的响应式数据。（基本类型不用它，要用ref函数）

<script>
import {ref, reactive} from 'vue'
export default {
	name : 'APP',
	setup(){
		//数据
		let number = reactive(666)
		//方法
		function changeInfo(){
			console.log(number)
		}
		return {name,age,changeInfo} 
	}
}
</script>

若将reactive直接用于基本数据类型就会报错。
在这里插入图片描述
因此

<template>
	<h1>姓名：{{ name }}</h1>
	<h1>年龄：{{ age }}</h1>
	<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
	name : 'APP',
	setup(){
		//数据
		let name = ref('张三')
		let age = ref(18) 
		let job = reactive({
			type : '前端工程师',
			salary : '30k' 
		})
		//方法
		function changeInfo(){
			console.log(job)
		}
		return {name,age,changeInfo} 
	}
}
</script>

可以看到，reactive将对象类型的数据封装为Proxy对象。
在这里插入图片描述
使用reactive的好处：
支持修改深层属性
支持修改数组

<script>
import {ref} from 'vue'
export default {
	name : 'APP',
	setup(){
		//数据
		let name = ref('张三')
		let age = ref(18) 
		let job = reactive({
			type : '前端工程师',
			salary : '30k' ,
			a:{
				b:{
					c:666
				}
			}
		})
		let hobby = reactive(['抽烟','喝酒','烫头'])
		//方法
		function changeInfo(){
			job.a.b.c = 999 //reactive支持修改深层属性
			hobby[0] = '学习'  //reactive支持修改数组			
		}
		return {name,age,changeInfo} 
	}
}
</script>

reactive与ref的对比

（1）ref访问属性需要使用value，reactive访问属性不需要使用value
（2）ref定义基本数据类型，reactive定义对象类型
（3）ref的响应式原理是通过Object.defineProperty()实现的，reactive通过Proxy对象实现的。

//数据
let name = ref('张三')
let age = ref(18) 
//方法
function changeInfo(){
	name.value = '李四'		
	age.value = 44
}

//数据
let person= reactive({name:'张三',age:18})
//方法
function changeInfo(){
	person.name = '李四'		
	person.age = 44
}

1.5 setup的注意点

（1）setup函数的执行比beforeCreate函数要早
（2）setup函数里的this是undefined，这意味着setup里不能用this
（3）setup只能收到两个参数，分别是props用来接受父组件传给该组件的属性，以及context用来保存上下文信息。

<script>
import {ref} from 'vue'
export default {
	name : 'APP',
	beforeCreate(){
		console.log('---beforeCreate---')	
	},
	setup(){
		console.log('---setup---',this)	
		return {} 
	}
}
</script>

在这里插入图片描述
props传输

<script>
export default {
	name : 'APP',
	props: ['msg','school'], //必须声明props才能接受属性
	beforeCreate(){
		console.log('---beforeCreate---')	
	},
	setup(props){ //通过props可以访问父组件传过来的值
		console.log(props)	
		console.log(props.msg)
		console.log(props.school)
		return {} 
	}
}
</script>

上下文context

<script>
export default {
	name : 'APP',
	props: ['msg','school'],
	beforeCreate(){
		console.log('---beforeCreate---')	
	},
	setup(props,context){
		console.log(context)	
		return {} 
	}
}
</script>

context里面是一个expose对象，它包含attrs、emit、slots对象。

其中，attrs对象接收遗漏的props中未声明的属性。（相当于vue2中的$attrs）

emit对象接收分发的自定义事件。（相当于vue2中的$emit）

slots对象接收传入包裹的slot中未声明的DOM节点。（相当于vue2中 的$slots）

在这里插入图片描述

//App.vue
<template>
	<Demo @hello="handleHello"></Demo>
</template>
<script>
import {Demo} from './compnents/Demo'
export default {
	name : 'App',
	setup(){
		//方法
		function handleHello(value){
			alert('触发了Hello事件，我收到的参数是${value}')
		}
		return {handleHello} 
	}
}
</script>
//Demo.vue
<template>
	<button @click="test">测试触发一下Demo组件的hello事件</button>
</template>
<script>
import {ref} from 'vue'
export default {
	name : 'App',
	props:['msg'],
	emits:['hello'], //vue3中应该声明将触发的hello事件，否则会有警告
	setup(props,context){
		function test(){
			context.emit('hello',666) //不能用this，必须用context触发外部事件
		}
		return {test} 
	}
}
</script>

2. computed计算属性

在vue2中，计算属性是由其他属性派生出来的属性。在vue3中，计算属性写在setup中，并且需要再引入

<!-- vue2写法 -->
<template>
	姓: <input type="text" v-model="person.firstName">
	<br>
	名: <input type="text" v-model="person.lastName">
	<br>
	<span>全名: {{ fullName}}</span>
</template>
<script>
import {reactive} from 'vue'
export default {
	name : 'App',
	//计算属性
	computed: {
		fullName(){
			return this.person.firstName + '-' + this.person.lastName
		}
	},
	setup(props,context){
		let person = reactive({
			firstName : '张',
			lastName : '三'
		})
		return {person} 
	}
}
</script>

vue3写法

<!-- vue3写法 -->
<template>
	姓: <input type="text" v-model="person.firstName">
	<br>
	名: <input type="text" v-model="person.lastName">
	<br>
	<span>全名: {{ fullName}}</span>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
	name : 'App',
	setup(props,context){
		let person = reactive({
			firstName : '张',
			lastName : '三'
		})
		//计算属性，由于fullName是person派生出的属性，建议放在person对象里新增
		person.fullName = computed(()=>{
			return person.firstName + "-" + person.lastName
		}
		)
		return {person} 
	}
}
</script>

上述代码中，computed是简写形式，只能读，不能修改。因此需要改成下面的完整形式

<!-- vue3写法 -->
<template>
	姓: <input type="text" v-model="person.firstName">
	<br>
	名: <input type="text" v-model="person.lastName">
	<br>
	全名: <input type="text" v-model="person.fullName">
</template>
<script>
import {reactive,computed} from 'vue'
export default {
	name : 'App',
	setup(props,context){
		let person = reactive({
			firstName : '张',
			lastName : '三'
		})
		//计算属性，完整形式，同时考虑读写
		person.fullName = computed({
			get(){
				return person.firstName + "-" + person.lastName
			},
			set(value){
				const nameAttr = value.split('-')
				person.firstName = nameAttr[0]
				person.lastName= nameAttr[1]
			}
		})
		return {person} 
	}
}
</script>

3. watch监视函数

在vue3中watch监视函数的用法如下：

<template>
	<span>{{sum}}</span>
	<button @click="sum++">点我加1</button>	
</template>
<script>
import {ref,watch} from 'vue'
export default {
	name : 'App',
	setup(props,context){
		let sum = ref(0)
		let person = reactive({
			name: '张三',
			age: 18,
			job:{
				salary:20
			}
		})
		//情况一：监听ref所定义的一个响应式数据
		watch(sum,(newValue,oldValue)=>{
			console.log('sum变了',newValue,oldValue)
		})
		//情况二：监视ref所定义的多个响应式数据，第一个参数配置成数组
		watch([sum,msg],(newValue,oldValue)=>{
			console.log('sum或msg变了',newValue,oldValue)
		})
		//情况三：希望可以立马执行watch的监视，而不用等变化后，
		//解决方式：第三个参数可以填配置信息，
		watch(sum,(newValue,oldValue)=>{
			console.log('sum变了',newValue,oldValue)
		},{immediate:true,deep:true})
		//情况四：监听reactive所定义的一个响应式数据
		//1.注意vue3这里有个bug，无法监控到oldValue的值
		//2.注意vue3中reactive绑定了深度监视，配置deep无法关闭深层监视
		watch(person,(newValue,oldValue)=>{
			console.log('person变了',newValue,oldValue)
		},{deep:false})
		//情况五：监听reactive对象中的某个属性，需要写匿名函数
		watch(()=>person.name,(newValue,oldValue)=>{
			console.log('person变了',newValue,oldValue)
		})
		//情况六：监听reactive对象中的某些属性，需要封装在数组中
		watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
			console.log('person的name和age变了',newValue,oldValue)
		})
		//特殊七：若监视的reactive对象中的某个对象，则必须开启deep深层监视的配置。
		watch(()=>person.job,(newValue,oldValue)=>{
			console.log('person的job变了',newValue,oldValue)
		},{deep:false})
		return {sum} 
	}
}
</script>

watchEffect函数

watchEffect函数可以智能判断属性的变化，不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性。
类似于computed函数，不过watchEffect更注重过程，所以不用写返回值。

<script>
import {ref,watch} from 'vue'
export default {
	name : 'App',
	setup(props,context){
		let sum = ref(0)
		let person = reactive({
			name: '张三',
			age: 18,
			job:{
				salary:20
			}
		})
		watchEffect(()=>{
			const x1 = sum.value //用到哪个属性，就监测哪个
			console.log('watchEffect执行的回调执行了')
		})
		return {sum} 
	}
}
</script>

4. vue3里的声明周期

//待续…

晓风残月淡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从 jquery 过渡至 angular 转战到 vue
yq_oxygen的博客
11-14 3291
从 jquery 过渡至 angular 转战到 vue不得不说，前端技术发展非常迅速，时不多久就有一个新的东西冒出来，并且迅速膨胀发展，让旁观者眼花缭乱，让开发者目眩神迷，但总体上来说，这波互联网大浪潮带动了前端技术的大发展，给曾经那些苦苦挣扎于DOM操作的页面工作者带来福音，也为前端技术的开发提出更高的要求。我始终认为从 jquery 转到 angular 或 vue 是很困难的，这种困难体现在
Vue3学习ddddddddd
08-18
Vue3学习ddddddddd
vue2转战vue3的简单步骤第一部分
springdk2009的博客
03-26 447
vue2转战vue3的简单步骤第一部分，下一步简介生命周期相关的东西。
从 docsify 转战 vuePress2.0,我经历了什么?（二）
weixin_43711004的博客
09-20 1047
使用 vuepress2.0 打造静态博客网站（二）
2024年前端最全Vue，前端快速转战Kotlin教程
2401_84412050的博客
05-06 948
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
React 已死！如何在 Vue3 使用 jsx & tsx
YopenLang的博客
02-06 496
最近发现 Vue3 原来是支持 JSX & TSX 的！
Vue.js 核心精要实战解析
GitChat
04-12 4661
课程简介 前端框架领域，Angular、React、Vue.js 三足鼎立，而 Vue.js 因其性能、通用、易用、体积、学习成本低等特点深受广大前端们的追捧，并吸引了一大批前端初学者。作为 Vue.js 的入门教程，此达人课共计16篇文章，涵盖了所需了解的核心基础知识，并通过小小电商网站的搭建，在实战过程中带大家快速掌握 Vue.js。 本课程共包含三大部分。第一部分（第1-2篇）带你初步认识 ...
vue配置文件之-build.js
song854601134的博客
10-03 1228
//Webpack 2.x // webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { // other options... module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: {
vue如何实现在页面上画画_Vue学习记录-画页面
weixin_39641876的博客
12-19 609
webstorm因为之前开发ReactNative的时候，选择了webstorm，这回转战Vue，自然还是用它。如果什么也不做的话，打开Vue工程，编辑区域基本上没有语法高亮。怎么办呢？安装插件(以mac版本为例，window下面应该大同小异)1. 打开偏好设置，从左边找到Plugins2. 点击Browse repositories...，然后搜索Vue，进行安装3. 添加Vue模板export...
Vue学习记录-画页面
weixin_30546933的博客
01-16 599
webstorm 因为之前开发ReactNative的时候，选择了webstorm，这回转战Vue，自然还是用它。如果什么也不做的话，打开Vue工程，编辑区域基本上没有语法高亮。怎么办呢？ 安装插件（以mac版本为例，window下面应该大同小异） 1. 打开偏好设置，从左边找到Plugins 2. 点击Browse repositories...，然后搜索Vue，进行安装 3....
vue3自己的学习笔记
01-25
Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态...
VUE3学习资料 111111
04-02
本资源包可能包含了一系列关于Vue3的学习资料，尽管实际的文件名列表中提到的是"vue2"，但我们可以预期其中可能涵盖了Vue2到Vue3的过渡教程或者对比内容。 Vue3 的核心改进包括： 1. **Composition API**：这是Vue...
vue3 devtools 版本6.5.0
05-04
Vue3 DevTools 版本6.5.0是一款强大的开发者工具，专为Vue.js 3.x框架设计，用于帮助前端开发者在Chrome浏览器中调试Vue应用。这个版本的更新旨在优化用户体验，提供更精确的组件检测和性能分析功能。在Chrome浏览器...
VUE3知识图谱学习总结
10-24
VUE3知识图谱学习总结
编程学习之路：从零到一的成长指南
KsuferNotes
07-22 110
在当今数字化时代，编程技能已经成为许多人职业发展的重要组成部分。不论你是已经在IT业从业多年的老手，还是刚刚起步的编程新手，这篇博客将带你走过编程学习的每一个重要阶段，从而顺利完成从零到一的华丽转变。
学习测试10-3自动化 web自动化
最新发布
qq_44897733的博客
07-22 328
链接: https://pan.baidu.com/s/1QnGEAeP4ASMgdBYbAtSUTg?pwd=8sdd 提取码: 8sdd。性别、生日、出生地、居住地、情感状态、交友目的、血型。复制这段内容后打开百度网盘手机App，操作更方便哦。2、输入用户名，密码，（使用id属性）4、所有信息后的下拉框设置为保密。论坛系统课堂及其课后练习题库。3、基本资料栏位依次输入内容。三、单个注册与连续注册多个。4、实现连续注册10个账号。二、设置用户的真实姓名。
kubernetes学习日志（七）
qq_47037022的博客
07-18 601
本文记录了service管理，ingress管理，Dashboard管理插件，集群鉴权策略，角色与全局角色，赋权与全局角色赋权。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 425
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值