Vue3快速入门——学习笔记

Vue3快速上手1. 分析工程结构main.jsApp.vue2. setup3. ref()4. reactive()5. Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式6. reactive和ref的区别1. 分析工程结构如图所示，是使用 vue-cli 创建的结构，和Vue2基本相同。main.js其中变化最大的是 main.js文件在Vue2中我们通过import Vu

Concise200

4796人浏览 · 2022-03-02 09:20:28

Concise200 · 2022-03-02 09:20:28 发布

1. 分析工程结构

如图所示，是使用 vue-cli 创建的结构，和Vue2基本相同。
在这里插入图片描述

main.js

其中变化最大的是 main.js文件

在Vue2中我们通过import Vue from 'vue'引入了Vue构造函数。然后通过new关键字创建Vue对象实例。

//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'

//创建Vue实例对象---vm
new Vue({
	el:'#app',
  	render: h => h(App),
})

但是在Vue3中，我们通过import { createApp } from 'vue'引入工厂函数createApp，不需要使用new直接创建实例，且通过mount函数挂载#app

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

//合并创建与挂载
//createApp(App).mount('#app')

console.log(app);输出app，发现其确实比vm更轻量，还有一个unmount函数可以用于取消挂载
在这里插入图片描述
注意：在Vue3项目中，不兼容Vue2的写法！！！

App.vue

Vue3组件中的模板结构可以没有根标签

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

2. setup

setup是Vue3.0中一个新的配置项，值为一个函数。组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：

若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。

//此处只是测试一下setup，暂时不考虑响应式的问题。
setup(){
   let name="张三"
   let age=18
   function sayHello(){
     alert(`我是${name}`)
   }
 //返回一个对象（常用）
 return {
	name,
	age,
	sayHello,
   }
 }

若返回一个渲染函数：则可以自定义渲染内容。

import {h}  from 'vue'
//此处只是测试一下setup，暂时不考虑响应式的问题。
export default {
   name:'App',
   setup(){
     let name="张三"
     let age=18
     function sayHello(){
       alert(`我是${name}`)
     }
     return ()=>h('h1','joney')
   }

会覆盖<template>模板标签中的内容
在这里插入图片描述

注意：

尽量不要与Vue2.x配置混用

Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
如果有重名, setup优先。
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

3. ref()

1.作用:定义一个响应式的数据，接受一个内部值并返回一个响应式且可变的 ref 对象。

2.语法: const xxx = ref(initValue)，创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
接收的数据可以是：基本类型、也可以是对象类型。

3.注意：

基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

4.使用
（1）先通过import {ref} from 'vue'引入ref函数。
（2）给函数传递参数。

let name = ref('张三')
let age = ref(18)
let job = ref({
	type:'前端工程师',
	salary:'30K'
})

（3）输出name,我们发现其是一个RefImpl实例对象，其中值在name.value中，若想修改则需要这样name.value = '李四'进行修改。
在这里插入图片描述
（4）job也是一个RefImpl实例对象，但是job.value是一个Proxy的实例对象

输出job.value如下图，要想修改salary为60K则需要这样编写job.value.salary = '60K'

(5)在模板标签中，我们不需要用.value

<h1>一个人的信息</h1>
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<h3>工作种类：{{job.type}}</h3>
<h3>工作薪水：{{job.salary}}</h3>

4. reactive()

1.作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

2.语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

3.注意：

reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

4.使用：
（1）对象

let job = reactive({
	type:'前端工程师',
	salary:'30K'
})

输出job可得
在这里插入图片描述
所以修改时可写

job.type = 'UI设计师'
job.salary = '60K'

（2）数组

let hobby =  reactive(["学习","吃饭"])

在函数中通过hobby[0]="打球"可以将学习变为打球。（在Vue2中不可以通过索引直接改对象！！）

5. Vue3.0中的响应式原理

vue2.x的响应式

1.实现原理：

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

//源数据
let person = {
	name:'张三',
	age:18
}

let p = {}
Object.defineProperty(p,'name',{
	configurable:true,
	get(){ //有人读取name时调用
		return person.name
	},
	set(value){ //有人修改name时调用
		console.log('有人修改了name属性，我发现了，我要去更新界面！')
		person.name = value
	}
})

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

2.存在问题：

新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

1.实现原理:

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。

const p = new Proxy(person,{
	//有人读取p的某个属性时调用
	get(target,propName){
		console.log(`有人读取了p身上的${propName}属性`)
		return Reflect.get(target,propName)
	},
	//有人修改p的某个属性、或给p追加某个属性时调用
	set(target,propName,value){
		console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
		Reflect.set(target,propName,value)
	},
	//有人删除p的某个属性时调用
	deleteProperty(target,propName){
		console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
		return Reflect.deleteProperty(target,propName)
	}
})

6. reactive和ref的区别

1.从定义数据角度对比：

ref用来定义：基本类型数据。
reactive用来定义：对象（或数组）类型数据。
ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

2.从原理角度对比：

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

3.从使用角度对比：

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive定义的数据：操作数据与读取数据：均不需要.value。

7. setup两个注意点

1.setup是在beforeCreate之前执行的，此时this是undefined。

2.setup可以接收两个参数
（1）props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
（2）context：上下文对象

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。

8. computed()

与Vue2.x中computed配置功能一致

<template>
	<h1>一个人的信息</h1>
	姓：<input type="text" v-model="person.firstName">
	<br>
	名：<input type="text" v-model="person.lastName">
	<br>
	<span>全名：{{person.fullName}}</span>
	<br>
	全名：<input type="text" v-model="person.fullName">
</template>

<script>
	import {reactive,computed} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				firstName:'张',
				lastName:'三'
			})
			//计算属性——简写（没有考虑计算属性被修改的情况）
			/* person.fullName = computed(()=>{
				return person.firstName + '-' + person.lastName
			}) */

			//计算属性——完整写法（考虑读和写）
			person.fullName = computed({
				get(){
					return person.firstName + '-' + person.lastName
				},
				set(value){
					const nameArr = value.split('-')
					person.firstName = nameArr[0]
					person.lastName = nameArr[1]
				}
			})

			//返回一个对象（常用）
			return {
				person
			}
		}
	}
</script>

9. watch()

与Vue2.x中watch配置功能一致，需要引入
import {watch} from 'vue'

监视ref所定义的一个响应式数据

setup(){
	//数据
	let sum = ref(0)
	let msg = ref('你好啊')
	
	//情况一：监视ref所定义的一个响应式数据
	//immediate:true表示初始化时调用一次
	watch(sum,(newValue,oldValue)=>{
		console.log('sum变了',newValue,oldValue)
	},{immediate:true})

在这里插入图片描述
这里不能写sum.value因为这样相当于监视了0，而不是一个RefImpl

监视ref所定义的多个响应式数据

watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变了',newValue,oldValue)
},{immediate:true})

在这里插入图片描述

监视reactive所定义的一个响应式数据的全部属性

1.注意：此处无法正确的获取oldValue
2.注意：强制开启了深度监视（deep配置无效）

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

watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{deep:false}) //此处的deep配置无效

在这里插入图片描述

监视reactive所定义的一个响应式数据中的某个属性

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

在这里插入图片描述

监视reactive所定义的一个响应式数据中的某些属性

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

在这里插入图片描述

监视reactive所定义的一个响应式数据中的对象

此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{deep:true})

在这里插入图片描述

总结

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性（对象）时：deep配置有效。
ref定义响应式对象，则监视时需要写xxx.value。（监视Proxy实例对象）
ref定义响应式数据时，监视时不需要写value（监视RefImpl实例对象）。

10. watchEffect()

1.watch函数：既要指明监视的属性，也要指明监视的回调。

2.watchEffect函数：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect(()=>{
	const x1 = sum.value
	const x2 = person.job.j1.salary
	console.log('watchEffect所指定的回调执行了')
})

3.watchEffect像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

11. 生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted

//通过配置项的形式使用生命周期钩子
beforeCreate() {
	console.log('---beforeCreate---')
},
created() {
	console.log('---created---')
},
beforeMount() {
	console.log('---beforeMount---')
},
mounted() {
	console.log('---mounted---')
},
beforeUpdate(){
	console.log('---beforeUpdate---')
},
updated() {
	console.log('---updated---')
},
beforeUnmount() {
	console.log('---beforeUnmount---')
},
unmounted() {
	console.log('---unmounted---')
},

在这里插入图片描述

Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

使用前需要引入 import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

setup(){
	console.log('---setup---')
	//数据
	let sum = ref(0)
	//通过组合式API的形式去使用生命周期钩子
	onBeforeMount(()=>{
	console.log('---onBeforeMount---')
	})
	onMounted(()=>{
	console.log('---onMounted---')
	})
	onBeforeUpdate(()=>{
	console.log('---onBeforeUpdate---')
	})
	onUpdated(()=>{
	console.log('---onUpdated---')
	})
	onBeforeUnmount(()=>{
	console.log('---onBeforeUnmount---')
	})
	onUnmounted(()=>{
	console.log('---onUnmounted---')
	})
	
	//返回一个对象（常用）
	return {sum}
},

在这里插入图片描述

12. 自定义hook函数

1.hook本质是一个函数，把setup函数中使用的Composition API进行了封装。(类似于vue2.x中的mixin。)

2.优点: 复用代码, 让setup中的逻辑更清楚易懂。

3.使用
在这里插入图片描述
usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})

	return point
}

Dome.vue

<template>
	<h2>当前求和为：{{sum}}</h2>
	<button @click="sum++">点我+1</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)
			let point = usePoint()
			
			//返回一个对象（常用）
			return {sum,point}
		}
	}
</script>

显示：
在这里插入图片描述

13. toRef

1.作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

2.语法：const name = toRef(person,'name')

3.应用: 要将响应式对象中的某个属性单独提供给外部使用时。
（1）引入

import {toRef} from 'vue'

（2）使用

setup(){
	//数据
	let person = reactive({
		name:'张三',
		age:18,
		job:{
			j1:{
				salary:20
			}
		}
	})
	//返回一个对象（常用）
	return {
		person,
		name:toRef(person,'name'),
		age:toRef(person,'age'),
		salary:toRef(person.job.j1,'salary')
	}
}

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

在这里插入图片描述

4. 扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

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

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

			//返回一个对象（常用）
			return {
				person,
				...toRefs(person)
			}
		}
	}
</script>

在这里插入图片描述

14. shallowReactive 与 shallowRef

1.shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

2.shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

3.应用场景

如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

15. readonly 与 shallowReadonly

1.readonly: 让一个响应式数据变为只读的（深只读）。

2.shallowReadonly：让一个响应式数据变为只读的（浅只读）。

3.应用场景: 不希望数据被修改时。

4.使用

setup(){
	//数据
	let sum = ref(0)
	let person = reactive({
		name:'张三',
		age:18,
		job:{
			j1:{
				salary:20
			}
		}
	})

	person = readonly(person)
	sum = readonly(sum)
	
	//返回一个对象（常用）
	return {
		sum,
		...toRefs(person)
	}
}

在这里插入图片描述
若把上面代码中person = readonly(person)变为person = shallowReadonly(person)，则工资可以被修改为：

在这里插入图片描述

16. toRaw 与 markRaw

1.toRaw：

作用：将一个由reactive生成的响应式对象转为普通对象。
使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
使用

function showRawPerson(){
	console.log('原始person',person);
	const p = toRaw(person)
	console.log('经过toRaw的person',p)
}

在这里插入图片描述
注意：ref定义的数据不能使用toRaw变回原始数据

2.markRaw：
（1）作用：标记一个对象，使其永远不会再成为响应式对象。

（2）应用场景:

有些值不应被设置为响应式的，例如复杂的第三方类库等。
当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

（3）使用

<template>
	<h4>当前求和为：{{sum}}</h4>
	<button @click="sum++">点我++</button>
	<hr>
	<h3 v-show="person.car">座驾信息：{{person.car}}</h3>
	<button @click="addCar">给人添加一台车</button>
	<button @click="person.car.name+='!'">换车名</button>
	<button @click="person.car.price+=1">换价格</button>
</template>

<script>
	import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})
			function addCar(){
				let car = {name:'奔驰',price:40}
				person.car = markRaw(car)
				// person.car = car
			}

			//返回一个对象（常用）
			return {
				sum,
				person,
				...toRefs(person),
				addCar
			}
		}
	}
</script>

person.car = markRaw(car)时，页面不会改变。但是如果是person.car = car页面会改变。（数据已经变了，但是markRaw(car)得到的已经不是响应式对象了）
在这里插入图片描述

17. customRef

1.作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

2.实现防抖效果

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

<script>
	import {ref,customRef} from 'vue'
	export default {
		name: 'App',
		setup() {
			//自定义一个ref——名为：myRef
			function myRef(value,delay){
				let timer
				return customRef((track,trigger)=>{
					return {
						get(){
							console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
							track() //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
							return value
						},
						set(newValue){
							console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //通知Vue去重新解析模板
							},delay)
						},
					}
				})
			}

			// let keyWord = ref('hello') //使用Vue提供的ref
			let keyWord = myRef('hello',500) //使用程序员自定义的ref
			return {keyWord}
		}
	}
</script>

18. provide 与 inject

1.作用：实现祖与后代组件间通信
在这里插入图片描述

2.使用：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

3.示例

(1) 祖组件中：

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

(2) 后代组件中

setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

19. 响应式数据的判断

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

let car = reactive({name:'奔驰',price:'40W'})
let sum = ref(0)
let car2 = readonly(car)

console.log(isRef(sum))
console.log(isReactive(car))
console.log(isReadonly(car2))
console.log(isProxy(car))
console.log(isProxy(sum))

在这里插入图片描述

20. 内置组件

Fragment

在Vue2中，组件必须有一个根标签。在Vue3中，组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
在这里插入图片描述

好处: 减少标签层级, 减小内存占用

Teleport

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

移动位置可以直接写body、html或者某个有类名的标签。比如.one，则表示放在.one标签中

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

1.Suspense可以用来等待异步组件时渲染一些额外内容，让应用有更好的用户体验

2.使用步骤：

异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default与 fallback

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

Concise200

@qq_45890970

已为社区贡献4条内容