vue3小笔记

一.创建vue3确保vuee-cli是4.5版本以上

二.vue3在中的引入与vue2不同

import {createApp } from 'vue'

import App from './'

createApp(App).mount('#app')

三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面

async在没在使用Suspense组件时是不能出现在sustpu中的
template下可以不用加div根标签
vue3的方法变量都写到setpu函数体内
vue3也可以使用vue2的配置，vue2能读取vue3的数据，用this.（vue3返回的数据）
vue3的setpu不能读取vue2的数据
vue3和vue2不要混用
vue3和vue2名相同 setpu优先
setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  - slots: 收到的插槽内容, 相当于 this.$slots。
  - emit: 分发自定义事件的函数, 相当于 this.$emit。

四.ref 给基本类型做数据响应式用的

基本数据类型想要数据响应式，也就是在setpu里改了数据，想要模版也跟着变的话就要使用到ref

先要引入 import { ref } from 'vue'
把基本数据类型放到ret方法里如：let name=ref("张三“）
在setpu上改的放要加个value 如，='李四'
改了之后在模版上就不用加value,直接{{name}}
通过()的get和set来实现响应式

想要用ref方法包对象类型做数据响应式

在setpu上修改就要='李四'
但是只调用第一层的数据，再下一层还是对象就不能再修改了

五.reactive 给对象类型做数据响应式用的

定义一个对象类型的响应式数据,处理不了基本类型的（基本类型用ref)

先要引入ref import { reactive } from 'vue'
js处理数据不用加.value
可以监测到深层的对象
对数组类型也能监测，
基本数据要使用可以包装成一个对象再用reactiove()
原理是用了proxy代理，还通过了windom身上的Reflect反射

new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return (target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return (target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return (target, prop)
    }
})

 = 'tom'

六.setup中的两个参数，props,context(attrs,slots,emit)

setup(props)第一个参数是props接收到的数据，会整理成一个proxy对象
setup(props,context)第二个参数是一个对象，里面有attrs emit slots

attrs相当于vue2的$attrs，当没有用props声明接收就会出现在vue3的里
slots是使用是插槽，父组件传过来的节点
emit触发自定义事件使用时像props一样先配置接收 emits:['hello']

七.vue3里的computed（）

需要通过import引入
vue3的写法与vue2功能是一致的
要写到steup（）里面
vue3里的computed是一个方法,简写时括号里直接放一回调，完整写法放一个{}里面有get和set

import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写
    let fullName = computed(()=>{
        return  + '-' + 
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return  + '-' + 
        },
        set(value){
            const nameArr = ('-')
             = nameArr[0]
             = nameArr[1]
        }
    })
}

八.watch监测函数

vue3中使用watch方法的多种情况

在vue3中的watch是一个方法，而vue2里是一个配置项，所以可以使用多个watch，要放置在setup(要通过import引入 import {watch} from 'vue'
watch里面有三个参数
第一个是监测的对象
第二个是要执行的回调，回调里第一个参数是修改后的新值，第二个是修改前的值
第三个参数是配置对象用{}包住，有immediate:true,和deep:true ，immediate:true是初始化时就调用一次，deep:true是开启深度监视
监测ref时，不用加.value,如果监测的是对象就要加.value,如果不加.value可以开启deep:true;
监测的是reactive定义的数据时，修改后的值没法得到
监测的是对象的属性，第一个参数就要用一个回调，回调里的返回值放监视的对象属性，监视多个对象属性就要放在一个数组里，注意的是正常情况下监视的是对象会自动开启深度监视，改成false无效
监测的是对象的属性也是对象的话，vue3中特殊情况，deep:false配置才能生效.默认是false,如果里面还有再深层次的对象的放就要开启deep:true;才能监视到更深层次的对象属性

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

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

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

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

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

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

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

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
- 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

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

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

十.生命周期有两个不同beforeUnmount 和unmount

在vue3中的setup中使用，要在前面加on如onbeforeCreate( ()=>{})括号里面放一回调
beforeCreate() created() beforeMount() mounted() beforeUpdate() Update()
beforeUnmount(){} vue2 beforeDestroy
unmount(){} vue2 destroyed
beforeCreate() created()在setup执行之前执行

十一.自定义hook函数

把封装的代码写在一个js文件上，放在hooks目录上，hooks目录要放在src目录下，在组件都要用就可以直接引入调用即可，
记得要return返回值才有用

十二.toRef和toRefs

使用toRef要先通过import引入
toRef如果返回值不通过toRef方法包果，就不是响应式数据
toRef方法里的第一个参数是对象，第二个参数是属性，深层次的对象引用在第一个参数里点出来
toRefs也要先引入
可以批量处理对象，有一个参数就可以了，参数是对象
通过...出来的都是第一层的属性，所以在模版上深层次的还是要点出来

十三.shallowReactive和shallowRef

shallowReactive只响应第一层数据属性，深层次数据的不响应
与reactive的区别就是，reactive可以对深层次数据响应
shallowRef对对象类型的数据不进行响应式
与ref区别，ref对对象用.value形式可以响应式

十四.customRef 自定义ref

<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

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

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

后代组件中
setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

十六.响应式数据的判断

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

十七.Teleport能够将我们的组件html结构移动到指定位置的技术

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

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

异步引入，网络慢时子组件后出

用Suspense包住的，网速快时出default,网络慢时出fallback,两个template都是同一个东西

使用了Suspense组件才能用async，用了Promise也可以出现延时加载

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

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

十九.全局API的转移

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

全局 API（`Vue`）	实例 API (`app`)

	移除

秒客网

一.创建vue3确保vuee-cli是4.5版本以上

二.vue3在中的引入与vue2不同

三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面

四.ref 给基本类型做数据响应式用的

五.reactive 给对象类型做数据响应式用的

六.setup中的两个参数，props,context(attrs,slots,emit)

七.vue3里的computed（）

八.watch监测函数

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

watch的套路是：既要指明监视的属性，也要指明监视的回调。

十.生命周期有两个不同beforeUnmount 和unmount

十一.自定义hook函数

十二.toRef和toRefs

十三.shallowReactive和shallowRef

十四.customRef 自定义ref

十五.provide 与 inject

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

十六.响应式数据的判断

十七.Teleport能够将我们的组件html结构移动到指定位置的技术

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

十九.全局API的转移

相关文章

vue3小笔记

一.创建vue3确保vuee-cli是4.5版本以上

二.vue3在中的引入与vue2不同

三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面

四.ref 给基本类型做数据响应式用的

五.reactive 给对象类型做数据响应式用的

六.setup中的两个参数，props,context(attrs,slots,emit)

七.vue3里的computed（）

八.watch监测函数

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

watch的套路是：既要指明监视的属性，也要指明监视的回调。

十.生命周期 有两个不同beforeUnmount 和unmount

十一.自定义hook函数

十二.toRef和toRefs

十三.shallowReactive和shallowRef

十四.customRef 自定义ref

十五.provide 与 inject

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

十六.响应式数据的判断

十七.Teleport能够将我们的组件html结构移动到指定位置的技术

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

十九.全局API的转移

相关文章

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

十.生命周期有两个不同beforeUnmount 和unmount

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