Vue3 中加入了响应式API，书写一个组件的方式又增加了几种。看看有什么不一样
vue2 和 vue3都适用
- 熟悉的模板
.vue单文件
自定义语法、插值、指令都可以使用。按照官网书写就不会有什么问题。
<template>
<div></div>
</template>
<script>
export default {
name:"",
data(){
return {}
}
}
</script>
<style></style>
- 不使用
template,改用render函数
改用render函数后，以前是createElement函数，简写为h，这种方式太繁琐了，代码完全无法维护。支持JSX语法后，好太多。
但随之而来的一些vue语法特性、指令等使用方式发生更改，需要个人对这些有一些了解。个人喜好更喜欢JSX的书写方式。
<script>
export default {
name:"",
data(){
return {}
},
methods:{},
render(){
return <></>
}
}
</script>
<style></style>
-
分离JS，一是还采用
template,另一种采用render函数。和1、2 写法一致，只是把script提取到外部单文件中。
同级目录下创建index.js
<template>
<div></div>
</template>
<script src="./index.js">
</script>
<style></style>
index.js
export default {
data(){
return {}
},
render(){
return <></>
}
}
以上都是vue2中也可以这样写的，自从vue3新增响应式API，又多了不同方式的书写。
一是在1,2,3基础是使用响应式API
而是完全使用响应式API。
vue3有了响应式API的书写
- 在1,2,3基础上使用响应式API
script 部分通用,现有的非响应式配置仍然有效
import { ref ,computed,onMounted} from 'vue'
export default {
setup(){
// 生命变量
const name = ref('')
// 计算值
// 变量在内部使用时，需要 .value
const firstName = computed(()=>name.value.toUpperCase())
// 定义方法
const getData = ()=>{
/**
*
**/
}
// 生命周期
onMounted(()=>{
// 挂载
})
return {
name,
}
},
methods:{
// 定义方法
},
render(){
return <>
<p>{this.name}</p>
</>
}
}
提供了defineComponent 语法提示、类型推断
import { defineComponent} from 'vue'
export default defineComponent({
// ...
})
-
.vue模板文件中，script增加setup标识
<template>
<div>
<p>{{name}}</p>
</div>
</template>
<script setup>
// 必须调用响应式API
import { ref ,computed,onMounted} from 'vue'
// 生命变量
const name = ref('')
// 计算值
// 变量在内部使用时，需要 .value
const firstName = computed(()=>name.value.toUpperCase())
// 定义方法
const getData = ()=>{
/**
*
**/
}
// 生命周期
onMounted(()=>{
// 挂载
})
</script>
<style></style>
- 当然
setup也可以不使用template
<script setup>
// 必须调用响应式API
import { ref ,computed,onMounted,h} from 'vue'
// 生命变量
const name = ref('')
// 生命周期
onMounted(()=>{
//
})
</script>
<script>
// 普通的script
export default {
render() {
return h("p", this.name);
},
};
</script>
<style></style>
setup模式下不能使用render函数，但是我们可以使用普通的script.定义render函数。
-
defineComponent直接返回匿名函数，或者具名函数，函数名作为组件名称
import { ref ,computed,onMounted,defineComponent} from 'vue'
export default defineComponent(()=>{
// 生命变量
const name = ref('')
// 计算值
// 变量在内部使用时，需要 .value
const firstName = computed(()=>name.value.toUpperCase())
// 定义方法
const getData = ()=>{
/**
*
**/
}
// 生命周期
onMounted(()=>{
// 挂载
})
// return 直接渲染试图
return ()=><>
<p></p>
</>
})
