script的新写法
javascript
<template>
<div>{{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
// <script setup> 语法糖
<script setup>
import { ref } from 'vue';
const count = ref(1);
const onClick = () => {
count.value += 1;
};
</script>
使用<script setup> 编写组件
data
- 以前在 data 中创建的属性,现在全都用 ref() 声明。
- 在 template 中直接用,在 script 中记得加 .value 。
javascript
// Vue3 的写法
<template>
<div>{{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref } from 'vue';
// 用这种方式声明
const count = ref(1);
const onClick = () => {
// 使用的时候记得 .value
count.value += 1;
};
</script>
methods
声明事件方法在script标签里,创建一个方法对象即可
javascript
// Vue3 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script setup>
// 注意这部分
const onClick = () => {
console.log('clicked')
}
</script>
props
声明props,我们可以使用defineProps()
- 使用props,要注意不要使用解构赋值的写法
javascript
// Vue3 的写法
<template>
<div>{{ foo }}</div>
</template>
<script setup>
// 注意这里
const props = defineProps({
foo: String
})
// 在 script 标签里使用
console.log(props.foo)
</script>
emits事件
- 声明 emits 我们可以用 defineEmits()
javascript
// Vue3 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script setup>
// 注意这里
const emit = defineEmits(['click']);
const onClick = () => {
emit('click') // 注意这里
}
</script>
computed
javascript
// Vue3 的写法
<template>
<div>
<span>{{ value }}</span>
<span>{{ reversedValue }}</span>
</div>
</template>
<script setup>
import {ref, computed} from 'vue'
const value = ref('this is a value')
// 注意这里
const reversedValue = computed(() => {
// 使用 ref 需要 .value
return value.value
.split('').reverse().join('');
})
</script>
watch
写法1: watch
watch 需要你明确指定依赖的变量,才能做到监听效果
javascript
// Vue3 的写法
<template>
<div>{{ count }}</div>
<div>{{ anotherCount }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(1);
const onClick = () => {
count.value += 1;
};
const anotherCount = ref(0);
// 注意这里
// 需要在这里,
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) => {
anotherCount.value = newValue - 1;
})
</script>
写法2: watchEffect
而 watchEffect 会根据你使用的变量,自动的实现监听效果。
javascript
// Vue3 的写法
<template>
<div>{{ count }}</div>
<div>{{ anotherCount }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(1);
const onClick = () => {
count.value += 1;
};
const anotherCount = ref(0);
// 注意这里
watchEffect(() => {
// 会自动根据 count.value 的变化,
// 触发下面的操作
anotherCount.value = count.value - 1;
})
</script>
生命周期
- Vue3中将两个 destroy 相关的钩子,改成了 unmount
- 在 <script setup> 中,不能使用 beforeCreate 和 created 两个钩子。
- 熟悉相关的生命周期,只需要记得在 setup 里,用 on 开头,加上大写首字母就行。
选项式API
javascript
// 选项式 api 写法
<template>
<div></div>
</template>
<script>
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
// Vue2 里叫 beforeDestroy
beforeUnmount() {},
// Vue2 里叫 destroyed
unmounted() {},
// 其他钩子不常用,所以不列了。
}
</script>
组合式API
javascript
// 组合式 api 写法
<template>
<div></div>
</template>
<script setup>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from 'vue'
onBeforeMount(() => {})
onMounted(() => {})
onBeforeUpdate(() => {})
onUpdated(() => {})
onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>