Vue3.0起步

那只猫喝咖啡

已于 2022-09-29 11:44:18 修改

阅读量548

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2022-09-27 20:38:32 首次发布

本文链接：https://blog.csdn.net/guhanfengdu/article/details/127078100

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue3.0

1. computed

在v3中的计算属性写在setup中

1> (没有考虑计算属性被修改的情况)

 imoport {computed} from 'vue'
 export default{
 	setup(){
 	 let xxx=computed(()=>{
 	 	return yyy
 	    })
 	 return {xxx}
 	}
 }

2> (计算属性被修改的情况)

imoport {computed} from 'vue'
 export default{
 	setup(){
 	 let xxx=computed({
 	 	get(){return yyy}
 	 	set(value){zzz=value}
 	    })
 	 return {xxx}
 	}
 }

2. watch

import {watch} from 'vue'
export default{

	setup(){
	let sum =ref(0)
	let msg =ref('hahah')
	//vue2是不可以写两个watch，但是v3是可以写多次
	watch([sum,msg],(newValue,oldValue)=>{},{immediate:true,})
	
	//reactive定义的无法获取正确的oldvalue,v3是默认开启深度监视的，关不掉，可直接监视多层次的结构
	let obj=reactive({
		name:'李白,
		age:18',
		iob:{
			phone:'移动'
			}
		})
	watch(obj,(newValue,oldValue)=>{})
	
	//如果想要监视对象中的某个属性或某个对象？
	watch(()=>obj.name,(newValue,oldValue)=>{})
		
	//只想监视obj下的job
	watch(()=>obj.job,(newValue,oldValue)=>{},{deep:true})
	
	return{sum,msg,obj}
	}
}

3. watchEffect

这是什么？特性：上来就执行一次，就像默认开启了immediate:true,

参数是一个回调，如果在回调中用了什么属性，vue就可以监测到，特点：能够分别多层的对象

import {watchEffect} from 'vue'
export default{
	setup(){
		watchEffect(()=>{})
	}
}

4. watchEffect和computed的区别

computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值

watchEffect注重的是过程（回调函数的函数体），所以不用写返回值

5. 生命周期的变化

vue2: beforeDestroy销毁前↓↓ destroyed销毁后↓↓

vue3: beforeUnmount卸载前 unmounted卸载后

其他正常使用，与setup同级。

但是vue3中都是组合式API，“也可以” 放在setup中,但是写法上有所变化

beforeCreate====>beforeCreate

created======>created

其余都加 ‘on’

import {onBeforeMount} from 'vue'
export default{
	setup(){
		onBeforeMount(){
		console.log('----onBeforeMount-----')
		}
		...
	}
}

6. 自定义hook函数

定义：本质是一个函数，把setup函数中使用的compositionAPI进行了封装，和混入差不多

是为复用产生的。

单独写一个js文件，对外暴露一个函数，并且要有返回值

优势：复用代码，让setup中的逻辑更简单，更易懂。

7. toRef

如果一个对象是深层次的，在模板上要写很长的路径，但是我们想要简化模板上的数据，就要在setup中简化返回的数据,最大的特点：“可以变成响应式 ”

import {toRef} from 'vue'
export default{
	setup(){
		let person=reactive({
			name:'李星云',
			age:13,
			job:{
				salary:20
			}
			
		})
		return{
			name:toRef(person,'name'),
			salary:toRef(person.job,'salary'),
		}
	}
}

—— toRefs

toRef只能单个进行处理，你要说明对象和属性

toRefs

export {toRefs} from 'vue'
export default{
	setup(){
		let perdon=reactive({
			name:'流岚',
			age:12,
			job:{
				phone:'移动'
			}
		})
		
		return{
		//这样对象中的属性都拆出来了，但是只拆第一层
			...toRefs(person)
		}
	}
}

8. Composition API的优势

在vue2中叫Options API 的问题：

它存在的问题是当我们新增一个需求的时候，需要分别在data,methds,computed里修改，这个如果写过 vue2的就知道，一旦新增功能，所有有关的方法或者数据都被拆散了，导致代码冗长，不好区分，很乱。

在vue3中Composition API 的优势：

我们可以更优雅的组织代码和函数，让相关的代码更加有序的组织在一起。hook会让组合式API发挥最大的“威力”，都在复用这个hook函数

9. shallowReactive

浅层次响应式，只响应式第一层，这就是它相对于reactive的特点

10. shallowRef

传入基本数据类型，ref和shallowRef没有区别

但是如果传入的是对象类型，就不能进行响应式的了，相对于ref的特点是：只能对基本数据类型进行响应式处理

那什么时候用？？？？

如果有一个对象，结构比较深，但变化时只是外层属性变化====》shallowReactive

如果有一个对象数据，后续功能不会修改该对象的属性，而是生成新的对象来替换====》shallowRef

11. readonly与shallowReadonly

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

shallowReadonly：让一个响应式对象变为只读（浅只读）

应用场景：不希望数据被修改时。

12. toRaw

可以将响应式对象变成普通的对象，只能处理reactive所缔造的响应式对象，ref的不可以,是undefined

13. MarkRow

标记一个对象，使其永远不会再成为响应式对象。

应用场景：

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

其实就是当我们通过ajax请求过来的数据，具有深层次结构，并且我们不需要对其中的数据进行修改，仅用于渲染，就可以MarkRow（）

在性能上有很大的提升

14. customRef

相当于自定义ref函数，并且可以加一些我们所需要的功能。

举例：当我们向输入框输入时，想要在下方的h3也显示出来，但是要延迟3秒。这个时候我们就可以使用 customRef，方法如下：

export {customRef}  from  'vue'
export default{
	setup(){
		//定义一个myref实现和ref一样的功能
		function myref(value){
			return customRef((track,trigger)=>{
				get(){
				track()            //通知Vue追踪value的变化，不然get还以为是之前的value
				return value
				},
				set(NewValue){
					value=NewValue
					trigger         //目的是通知Vue去重新解析模板
				}
			})
		}
		let name=myref("hello")
	}
}

15. provide与inject

实现祖先组件和后代组件通信

父组件

import {reactive,toRefs,provide} from 'vue'
export defalut{
	setup(){
		let car = reactive({name:'凯迪拉克',price:'100万'})
		//给后代组件传递数据
		provide('car',car)
		return {...toRef(car)}
	}
}

子组件

import {inject} from 'vue'
export default{
	setup(){
		let xxx=inject('car')
		//这个xxx是个响应式的
	}
}

16.响应式数据的判断

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

17.Fragment组件

在vue2中，组件必须有一个根标签

在vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中

好处：减少标签层级，减少内存占用

18. Teleport组件

“传送”

例如：我想要写一个弹窗，就在屏幕的正中央，如果利用的是定位，一旦有祖先元素使用了定位就会有极大的干扰，这个时候“传送”的有点就显示出来了

<template>
我是内容
	<button>点我就可以展示弹窗</button>
	<teleport to='body或者是选择器例如#qwe'>
		<div v-show='isShow' class='' 这可以是个遮罩层>
			弹窗
		</div>
	<teleport>
</template>

19.Suspense

当我们正常引入组件的时候，是等到项目加载完毕，父子组件同时展示的，

import Child from './components/...'

以上属于静态引入。

接下来我们来看一种新的引入方式，异步引入（动态引入）

import {defineAsyncComponent} from 'vue'
const Child =defineAsyncComponent(()=>import('./components/...'))
在网速慢的时候能够体现出来，先出来的先展示。
export default{

}

重点来了！！！！，这个时候优先出来，后出来的那个突然出现比较突兀，怎么解决？？Suspense

<template>
	<div>我是内容</div>
	<Suspense>
		<template v-slot:default>
		应该显示的内容
		</template>
		<template v-slot:fallback>
		如果上面的不显示，这个就显示
		加载中······
		</template>
	
	</Suspense>
</template>