Vue3

多版本node管理

• nvm 管理工具

nvm -v 
nvm list 
nvm use 22.12.0
#按照上面方式切换版本

npm init vue @latest
#创建项目文件

vetur是vue2的vscode插件，
volar是vue3的插件(vue-official)

<script setup>
	//import了组件可以直接用，不需要注册了
</script>

<template>
	//取消了唯一根组件的限制
</template>  

<style>

</style>

setup选项

• set执行再beforeCreate之前，所以拿不到this
• setup中所有数据都要return

<script>
const message = 'hello vue3'
const function = () => {
	人家是一个函数
}
return {
	message,
	function
}
</script>
//太麻烦了？语法糖来了
<script setup>
	//你可以不用写return了
const message = 'wo qu ni ma de '
</script>

组合式api

reactive和ref

<script setup>
import {reactive} from 'vue'
const state = reactive({
	count: 100
})

import {ref} from 'vue'
const count = ref(0)
//访问要通过.value
count.value
//但是，在template里面又不需要加了，底层自动拆一层
</script>	


//所以，只需要注意一下什么时候用.value，什么时候不用
//我们统一使用ref

computed

import {computed} form 'vue'

const list = ref([1,2,3,4])
const filterlist = computed(() => {
	return list.value.filter(elem => elem > 2)
})

watch

watch(
	ref对象, (newvalue,oldvalue) => {

	},
	{
		immediate: true
		deeptrue: true  //watch默认浅层监视，无法监视对象内部数据的变化
	}
)

watch(
	[ref1,ref2],(newArr,oldArr) => {

	}
)

//精确监听对象的属性
watch(
	() => data.value.age,(newvalue,oldvalue) => {
		//逻辑操作
	}
)

生命周期函数

alt text

const getList = () => {
	//发请求
}
//直接调，因为我们写了setup语法糖
getList()

//其他声明周期
onMounted() => {
	//逻辑一
}

onMoubted() => {
	//逻辑二
}
//上面的二者不冲突

父子传参

//父传子
//接受
const props = defineProprops({
	message: String 
})

//子传父
<Son @changeMoney="fun" />

const emit = defineEmits(['changeMoney'])
const buy = () => {
	emit('changeMoney',5)
}

模板引用

//拿到组件的Dom
const ins = ref(0)

<TestDom ref="ins" />

//数据默认不对外暴露
//即使拿到了Dom也没有元素，所以需要导出
defineExpose({
	count,
	sayhi
})

provide 和 inject

//跨层级提供数据

provide('secret','这是我的数据')
provide('changefn',(newVal) => {
	//这里写逻辑
})

const date = inject('secret')
const chagefn = inject('changefn')

defineOptions

//3.3版本以上可以用

defineOptions({
	name: ''
})

defineModel

这个视频讲的不是很好，因为录制视频的时候这个功能还没又完全成为主流功能

不过现在这个已经是主流功能了，可以尽情使用

//父
<Son v-model="txt"/>
//相当于
<Son :modelValue="txt" @update:modelValue="isVisibel=$event"/>

//子
defineProps({
	modelValue:String
})
const emit = defineEmits(['update:modelValue'])
emit('update:modelValue',e.targer.value)//调用
//上面流程太过于复杂了

//简化v-model
const modelValue = defineModel()

Pinia

作为vuex的替代品