vue3 入门写法

VUE-3

生命周期钩子函数

import {defineComponent,onUnmounted,onMounted} from "vue";

export default defineComponent({
    setup() {
        console.log("setup");
        // 原vue2.0写法mounted(){'代码'}改为onUnmounted(()=>{'代码'});
        onUnmounted(()=>{
            console.log("onUnmounted");
        });
        onMounted(()=>{
            console.log("onMounted_1");
        })
        // 可以多次调用...
        onMounted(()=>{
            console.log("onMounted_2");
        })
        //.....其他的生命周期钩子函数自己去查一下
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("created");
    },
})

// 结果为beforeCreate....setup....created....onUnmounted....onMounted_1....onMounted_2

data定义

Ref

定义各种类型的数据进行双向绑定...

const info_1 = ref(1); // 普通类型
const info_2 = ref({ // 复杂数据类型
    value : 1
})
const info_3 = ref([1,2,3,4]) // 复杂数据类型

获取ref值

const info_1 = ref(1);
/**
* ref获取值
* 在setup中一定要用 .value 去获取，在template模板中使用则不用，直接info_1就可以拿到
*/
let getInfo_1 = info_1.value;

reactive

只能定义对象类型数据进行双向绑定

const info_1 = reactive({
    value : 1
})

获取reactive值

const info_1 = reactive({
    value : 1
})
/**
* reactive获取值
* 无论在setup还是template模板都可以直接拿到
*/
let getInfo_1 = info_1;

具体使用场景

watch使用

import {defineComponent,watch,ref,reactive} from "vue";

export default defineComponent({
    const refValue = ref(1);
    const refValue2= ref(2);
    const refValue3 = reactive({
        value : 3
    });
    // 基本用法 
    watch(()=>console.log(refValue.value));
    // 指定数据源
    watch(refValue2,(Value2,oldValue)=>{
        console.log(Value2,oldValue);
    });
    // 监听reactive
    watch(() => refValue3.value, (value, oldValue) => {
        console.log(value, oldValue)
    });
    // 监听多个数据源
    watch(
      [refValue,refValue2],
      ([value,value2],[oldValue,oldValue2])=>{
          console.log('------')
      },
      {
        lazy:true, //组件第一次创建不调用
        deep:true, //深度监听
      }
    )
})

父子传值

import {defineComponent} from "vue";

export default defineComponent({
    // 必须在这里定义，下面的setup参数才有相对于的props值
    props: {
        propsValue1:{
            type:Number, // 类型，多类型可以这样写type:[String,Number,Boolean]
            required: true, // 是否必传
            default:1 // 默认值
        }
    },
    setup(props,{ emit }) { // 结构emit进行父子传值，感兴趣可以自己去输出看看第二个参数是什么...
        console.log(props.propsValue1);
        const value_ = 1;
        function(){
            emit("emitValue", value_);
        }
    },
})

// 输出为默认值 1

Refs获取Dom元素

组件使用

nextTick使用

import { nextTick} from "vue";
setup(){
    nextTick(()=>{
        console.log('nextTick')
    })
}

路由获取参数

// 这里我用URL参数来做例子，路由参数也是同理
import { defineComponent,onMounted} from "vue";
import { useRoute } from "vue-router";
export default defineComponent({
    setup(){
        let params = useRoute().query; // URL参数，一定要写在setup函数第一层，不然则无效
        console.log(params); // {参数1:value1,参数2:value2};
        onMounted(()=>{
            let parmams2 = useRoute() // 在onMounted获取是undefined....
        });
        return{
        }
    }
)}

指令v-memo

常用场景：在v-for中使用可在数据源修改后对DOM的重构速度进行优化

文档：https://v3.cn.vuejs.org/api/directives.html#v-memo

Style特性

动态css样式

VUE-3.2 + TS

setup单文件组件写法

定义props/emit的方法和使用

props参数定义和使用

import { onMounted } from "vue";
// 基本定义---简单数据类型
const props = defineProps({
    foo:String
});
// 复杂数据类型
interface testStruct{
    name:string;
    value:number;
}; // ts定义一个接口
// 不带默认值
const props = defineProps<{
    testList: testStruct[];
    value: string;
}>();
// 带默认值
const props = withDefaults(defineProps<{
    testList: testStruct[];
    value: string;  
}>(), {
    testList:()=>[],
    value: '测试'
});
// ----------------------------------------
// 使用
onMounted(()=>{
    console.log(props.value); // 测试
})

emits事件定义和使用

组件传值

使用

父组件

await