多版本node管理
1
2
3
4
5
6
7
| nvm -v
nvm list
nvm use 22.12.0
#按照上面方式切换版本
npm init vue @latest
#创建项目文件
|
vetur是vue2的vscode插件，
volar是vue3的插件(vue-official)
1
2
3
4
5
6
7
8
9
10
11
| <script setup>
//import了组件可以直接用，不需要注册了
</script>
<template>
//取消了唯一根组件的限制
</template>
<style>
</style>
|
setup选项
- set执行再beforeCreate之前，所以拿不到this
- setup中所有数据都要return
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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
1
2
3
4
5
6
| import {computed} form 'vue'
const list = ref([1,2,3,4])
const filterlist = computed(() => {
return list.value.filter(elem => elem > 2)
})
|
watch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| watch(
ref对象, (newvalue,oldvalue) => {
},
{
immediate: true
deeptrue: true //watch默认浅层监视，无法监视对象内部数据的变化
}
)
watch(
[ref1,ref2],(newArr,oldArr) => {
}
)
//精确监听对象的属性
watch(
() => data.value.age,(newvalue,oldvalue) => {
//逻辑操作
}
)
|
生命周期函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const getList = () => {
//发请求
}
//直接调，因为我们写了setup语法糖
getList()
//其他声明周期
onMounted() => {
//逻辑一
}
onMoubted() => {
//逻辑二
}
//上面的二者不冲突
|
父子传参
1
2
3
4
5
6
7
8
9
10
11
12
13
| //父传子
//接受
const props = defineProprops({
message: String
})
//子传父
<Son @changeMoney="fun" />
const emit = defineEmits(['changeMoney'])
const buy = () => {
emit('changeMoney',5)
}
|
模板引用
1
2
3
4
5
6
7
8
9
10
11
| //拿到组件的Dom
const ins = ref(0)
<TestDom ref="ins" />
//数据默认不对外暴露
//即使拿到了Dom也没有元素，所以需要导出
defineExpose({
count,
sayhi
})
|
provide 和 inject
//跨层级提供数据
1
2
3
4
5
6
7
8
| provide('secret','这是我的数据')
provide('changefn',(newVal) => {
//这里写逻辑
})
const date = inject('secret')
const chagefn = inject('changefn')
|
defineOptions
//3.3版本以上可以用
1
2
3
4
| defineOptions({
name: ''
})
|
defineModel
这个视频讲的不是很好，因为录制视频的时候这个功能还没又完全成为主流功能
不过现在这个已经是主流功能了，可以尽情使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //父
<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的替代品
