Vue3学习笔记

#检查vue脚手架版本
vue ---version
#若无，则需要安装或者升级
npm install -g @vue/cli
# 创建项目选择vue3
vue create xx
# 进入目录，运行
cd xx
npm run serve

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

<script>
export default {
  name: 'page-header',
  setup(){
    //数据
    let name = "name"
    //需要返回之后才能在模板中使用
    return{
      name,
    }
  }
}
</script>

<script>
import {ref} from 'vue';
export default {
    name: 'page-aside',
    setup(){
        //创建引用实现对象
        let name = ref("导航");
        //修改后，会触发vue更新视图；ref创建的数据，需要使用.value才能使用，模板中不需要.value
        name.value = "nav";
        return{
            name,
        }
    }
}
</script>

<script>
import {ref,reactive} from 'vue';
export default {
    name: 'page-aside',
    setup(){
        //创建引用实例对象
        let name = ref("导航");
        let routers = reactive([
            {name:'推荐',icon:'icon-home',url:'/home'},
            {name:'最近',icon:'icon-recent',url:'/recent'},
        ])
  
        //响应式修改
        name.value = "nav";
        //reactive创建，无需.value
        routers[1].name = 'haha'
  
        return{
            name,
            routers
        }
    }
}
</script>

//模拟vue3中实现响应式
let person = {
	name: 'xx',
	age: 18,
}
// 参数：被代理对象, 配置（可为空）
// 增(set)删(deleteProperty)改(set)查(get)
const p = new Proxy(person,{
	set(target,propName,value){
		console.log(`修改${propName},开始更新页面`)
		Reflect.set(target,propName,value);
	},
	get(target,propName){
		console.log(`读取${propName}`);
		return Reflect.get(target,propName);
	},
	deleteProperty(target,propName){
		console.log(`删除${propName}属性,更新页面`);
		return Reflect.deleteProperty(target,propName)
	}
})

p.name = 'tom'

import {computed} from 'vue'
setup(){
	//简写
	let fullName = computed(()=>{
		return person.firstName+'-'+person.lastName;
	})
	//完整写法
	let fullName = computed({
		get(){
			return person.firstName+'-'+person.lastName;
		},
		set(value){
			const nameArr = value.split('-');
			person.firstName = nameArr[0];
			person.lastName = nameArr[1];
		}
	})
}

import {watch} from 'vue';
setup(){
	//1. 监视ref定义的响应式数据
	watch(sum,(newValue,oldValue)=>{
		console.log("sum变化了",newValue,oldValue);
	});

	//2. 监视多个ref定义的响应式数据,此时newValue和oldValue都是数组形式
	watch([sum,msg],(newValue,oldValue)=>{
		console.log("sum或msg变化了",newValue,oldValue);
	});

	//3. 监视reactive定义的响应式数据,无法正确获取oldValue，且强制开启深度监视
	watch(person,(newValue,oldValue)=>{
		console.log("person变化了",newValue,oldValue);
	},{immediate:true,deep:false});

	//4. 监视reactive定义的响应式数据中的某个属性;写成函数形式（如果直接写person.name则监视的只是一个拷贝后的字符串，无法做到响应）
	watch(()=>person.name,(newValue,oldValue)=>{
		console.log("person的name变化了",newValue,oldValue);
	})

	//5. 监视多个reactive定义的数据的属性
	watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
		console.log("person的name或age变化了",newValue,oldValue);
	});

	//6. 特殊：此处监视的为person的属性job，为一个正常对象，而非reactive定义过的Proxy对象，所以深度监视配置项是有效的(默认非深度监视)
	watch(()=>person.job,(newValue,oldValue)=>{
		console.log("person的job变化了",newValue,oldValue);
	},{deep:true})

}

watchEffect(()=>{
	const x1 = sum.value;
	const x2 = person.value;
	console.log("person或sum被修改")
})

//useHelloWorld.js
import {onMounted} from 'vue';
export default function(){
	onMounted(()=>{
		console.log("Hello World!");
	})
}



//xx.vue
import useHelloWorld from './useHelloWorld.js'
...
setup(){
	useHelloWorld();
}

setup(){
	const person = reactive({
		name: 'xx',
		age: 12,
	});
	const p2 = reactive({
		name2: 'xxx',
		age2: '25'
	})

	//对此name的修改相当于对person.name的修改（如果此处用person.name，则return的name为其字符串拷贝，无法实现响应式）
	return{
		name: toRef(person,'name'),
		...toRefs(p2); //返回p2所有属性的ref对象数组，使用...展开
	}
}

import {ref,customRef} from 'vue';
...
setup(){
	function myRef(value,delay){
		let timer;
		//返回一个customRef函数定义的对象（相当于ref()返回的对象）
		return customRef((track,trigger)=>{
			return{
				get(){
					track();  //标记/收集依赖，当此数据触发更新时，使用此数据的位置皆可更新
					return value;
				},
				set(newValue){
					clearTimeout(timer);
					timer = setTimeout(()=>{
						value = newValue;
						trigger();  //触发更新
					},delay)
				}
			}
		})
	}
	//使用
	let keyword = meRef('hello',500)
	return {keyword}
}

//father.vue
let p = reactive({name:"ss",age:18});
provide('person',p);


//child.vue
const p = inject('person');
return{p}

<teleport to="body">
	<div class="dialog">DIALOG</div>
	<!-- 此html结构会被插入到body内 -->
</teleport>

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

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

/*vue2*/
.v-enter,.v-leave-to{}
.v-leave,.v-enter-to{}
/*vue3*/
.v-enter-from,.v-leave-to{},
.v-leave-from,.v-enter-to{}