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 的简单区别
- watch 需要指定要侦听的数据,watchEffect 会自动侦听内部用到的所有数据;
- 默认情况下,watch 不会立即侦听,watchEffect 会;
- 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>