VUE3学习笔记

参考链接https://blog.csdn.net/m0_66100833/article/details/134294781

生命周期

setup(): 这是一个新的入口点，在beforeCreate和created之前调用
onBeforeMount/onMounted：组件挂载前/后的生命周期钩子。
onBeforeUpdate/onUpdated：组件更新前/后的生命周期钩子。
onBeforeUnmount/onUnmounted：组件卸载前/后的生命周期钩子。
onActivated/onDeactivated：组件被 keep-alive 缓存和恢复时调用。
onErrorCaptured：当捕获一个来自子孙组件的错误时被调用。

基础用法

import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';


//reactive实现响应式
const state = reactive({
    count:100
})

//ref定义数据
const number = ref(0)//console.log(number.value); 
const userInput = ref('')
const name = ref("张三")
const list = ref([1,1,4,5,1,4])

//computed
const computedList = computed(
    () =>{
        return list.value.filter(i => i > 2)
    }
)

//方法
const changNumber = () => {
    number.value++;
}

const addValue = (userInput) => {
    if (userInput != '') {
        list.value.push(parseInt(userInput))
    }
}

//监听单个ref对象
watch(number, (newValue, oldValue) => {
    console.log(newValue, oldValue);
})

//监听多个ref对象
watch([number, name], (newArr, oldArr) => {
    console.log(newArr, oldArr);
},{
    immediate:true,
    deep:true
})

// 暴露变量
defineExpose({
  openDialog,
});

//ref
import { ref } from 'vue';
const inputWidthRef = ref();
console.log(noticeBarWarpRef.value)

<div ref="inputWidthRef"/>

//provide/inject
provide('key',2)

const message  = inject('key')

//defineOptions 定义属性
defineOptions({
    name:'Foo',
    inter: false
})

// 暴露变量
defineExpose({
  openDialog,
});

//接收属性（来自父组件）
const props = defineProps({
    car: String,
    money: Number
})
//上传属性（送给父组件）
const emit = defineEmits(["useMoney"])

父子组件-子组件

//父组件
<script setup>
import sonCom from './components/sonCom.vue'
import { ref } from 'vue';

const money = ref(10000)
</script>
<template>
    <div>
        <h3> 父组件 </h3>
    </div>
    <div>
        <sonCom car="兰博基尼" :money="money"></sonCom>
    </div>
</template>
<style>
</style>

//子组件
<script setup>
const props = defineProps({
    car: String,
    money: Number
})
console.log(props.car);  //这里注意脚本中需要写 props.属性，但是模板中不需要写，直接用属性
</script>

<template>
    <div class="son">
        <p>我是子组件</p>
        <p>我是父组件中继承了：{{ car }}, {{ money }}</p>
    </div>
</template>
<style>
.son{
   border: solid 2px brown;
   padding: 30px;
}
</style>

子组件-父组件

//父组件
<!-- script加上setup允许在script中直接编写组合式 api-->
<script setup>
import sonCom from './components/sonCom.vue'
import { ref } from 'vue'

const money = ref(10000);
const earnMoney = () =>{
    money.value += 50;
}
const useMoney = (restMoney) => {
    money.value = restMoney
}

</script>
<template>
    <div>
        <h3> 父组件 </h3>
        <p>
             当前money：{{ money }}
             <button @click="earnMoney"> 赚钱 </button>
        </p>
    </div>
    <div>
        <sonCom car="兰博基尼" :money="money" @useMoney="useMoney"></sonCom>
    </div>
</template>
<style>
</style>

//子组件
<script setup>
const props = defineProps({
    car: String,
    money: Number
})
const emit = defineEmits(["useMoney"])
const useMoney = () => {
    emit('useMoney', 5)
}
</script>
<template>
    <div class="son">
        <h3>我是子组件</h3>
        <p>
            我是父组件中继承了：{{ car }}, {{ money }}
            <button @click="useMoney"> 花钱 </button>
        </p>
    </div>
</template>
<style>
.son{
   border: solid 2px brown;
   padding: 30px;
   margin-top: 10px;
}
</style>

pinia

import { defineStore } from 'pinia'

。。。。。

翻译

搜索

复制