前言:vue2 是option API; vue3是composition API。所以在语法上有很大不同,以下为上手vue3的常用语法。
script
的三种写法<template>
<div>{{ num }}</div>
<button @click="onClick"> +1 </button>
</template>
<script>
export default {
data() {
return {
num : 1,
};
},
methods: {
onClick() {
this.num += 1;
},
},
}
</script>
总结: 和vue2完全一样,简单明了。无上手难度
<template>
<div>{{ num }}</div>
<button @click="onClick"> + 1 </button>
</template>
<script>
import { ref } from 'vue';
export default {
// 注意这部分
setup() {
let num = ref(1);
const onClick = () => {
num.value += 1;
};
return {
num,
onClick,
};
},
}
</script>
总结: 所有的对象和方法都需要 return 才能在template中使用,写法繁琐,不推荐
<template>
<div>{{ num }}</div>
<button @click="onClick"> + 1 </button>
</template>
<script setup>
import { ref } from 'vue';
const num = ref(1);
const onClick = () => {
num.value += 1;
};
</script>
总结: 推荐使用第三种写法,简单明了,定义的变量或方法也无需return
才可使用。但需要注意一点
,以前在 data 中创建的属性,现在全都用 ref() 或者 reactive() 声明;在 template 中直接用,在 script 中记得加 .value
针对单个变量,将其变成响应式的数据
import { ref } from 'vue';
// todo...
setup(){
const name = ref('张三') // 不使用ref,name将不是响应式数据
return {
name // 在其他地方改变了name后,页面将同步更改;但在 script 中使用记得加 `.value`
}
}
创建响应式数据,返回的是一个对象state。注意,如果直接使用 state.属性名
的方式导出一个属性并且使用到页面中,那么这个属性将不是响应式(state这个对象才是响应式
)
import { reactive } from 'vue';
// todo...
setup(){
const state = reactive({name: '张三'})
return {
// 此时,state是一个对象并且是响应式的,但是里面的name属性却不是响应式的 ==>> 页面中使用:{{state.name}}
state
// 如果在页面中想简单一些直接使用 {{name}},可以这样导出:
name: state.name // 但是,请注意。这样导出的数据在导出时就绑定了值,并不是响应式的数据
}
}
针对对象
,类似解构,解构出来的每一个属性都是响应式的,保证数据是响应式的
// 用法
import { toRefs } from 'vue';
// todo...
setup(){
const state = {
name: '张三',
age: 18
};
return {
...toRefs(state) // 这样里面的每一条属性都是响应式的
}
}
defineProps
和 defineEmits
都是只能在 中使用的编译器宏。它们不需要导入,且会随着
的处理过程一同被编译掉。
声明 props 需要使用用 defineProps()
// Vue3 的写法
<template>
<div>{{ foo }}</div>
</template>
<script setup>
// 注意这里
// defineProps 可在