vue3基础

vue3基础

一、setup语法

历史版本：

<script>
export default {
    setup() {
        
        return {}
    }
}
</script>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    setup() {
        
        return {}
    }
})
</script>

最新版：

<script setup>

</script>

二、引入组件

Vue3 中渲染子组件，只需要通过 import 引入后，直接渲染即可：

<template>
  	<HelloWorld />
</template>

<script setup lang="ts">
	import HelloWorld from './components/HelloWorld.vue'
</script>

三、定义组件内部数据

ref：可以用来定义任意类型的数据，但是在 script 范围内使用时，必须通过 .value；

reactive：只能用来定义引用类型的数据，定义好的数据，在后续修改时不能修改引用地址；

<template>
<h1>{{ count }}</h1>
<h1>{{ state.name }}</h1>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue';

    // ref 定义组件内部数据
    const count = ref(0);
    // ref 定义的数据，在 script 范围内使用时，都必须 .value
    console.log(count.value);
	// reactive
    const state = reactive({
        name: '张三'
    })
    console.log(state.name);

</script>

四、事件绑定

方法直接在setup里面写即可

<template>
	<div>
		<button @click="sayHello">按钮</button>
	</div>
</template>

<script setup lang="ts">
// 定义组件内部方法
const sayHello = () => {
	console.log('hello');
}
</script>

五、计算属性

<template>
<h1>{{ result }}</h1>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';

    const count = ref(0);
	// 直接使用 computed
    const result = computed(() => {
        return count.value + 100;
    });

</script>

六、侦听器

watch

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

<script setup lang="ts">
    import { ref, watch } from 'vue';
    const count = ref(0);


    watch(() => count.value, (newValue, oldValue) => {
        console.log(newValue, oldValue);
    }, {
        deep: true,   // 深度侦听
        immediate: true   // 立即侦听
    });
</script>

watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

<script setup lang="ts">
import { watchEffect } from 'vue';

watchEffect(() => {
	console.log('watchEffect', count.value, state.name);
})
</script>

• watch 和 watchEffect 的简单区别

1. watch 需要指定要侦听的数据，watchEffect 会自动侦听内部用到的所有数据；
2. 默认情况下，watch 不会立即侦听，watchEffect 会；
3. watch 可以通过参数获取到变化前后的值，watchEffect 不行；

七、生命周期

Vue2	Vue3
beforeCreate	无
created	无
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

代码语法：

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';

onMounted(() => {
	console.log('组件挂载完成');
}) 
</script>