Vue3 支持三种组件写法：
1. defineComponent+组合式API 2.<script setup>语法糖 3.选项式写法与vue2写法一样
前面两种是完全吻合typescript写法，推荐使用第二种方法，简洁清晰；第三种是javascript的写法，vue3已经全面支持typescript了,不建议使用了
一、defineComponent+组合式API
<template>
<div>
<h1 :style="{color:color}">{{title}}:{{count}}</h1>
<a-button @click="btnClick" type="primary">点击</a-button>
</div>
</template>
<script>
import {computed, defineComponent, ref, toRefs} from "vue";
export default defineComponent({
name:"DefineComponent",
components:{},
props:{
title:{
type:String,
required:true
},
init: {
type: Number,
default: 10
}
},
emits: [],
setup(props, context) {
const count = ref(props.init)
const btnClick = function (){
count.value++;
}
const color = computed(()=> (count.value > 12) ? "red": "black")
return {
count,
btnClick,
color,
}
}
})
</script>
引用组件：
<define-component title="defineComponent click count" :init="10"></define-component>
执行
setup时，你只能访问以下 property：propsattrsslotsemit
将无法访问一下组件选项datacomputedmethodsrefs(模板 ref)
Vue3.x新增了以下核心特性：
1.组合式API+setup入口
组合式API主要是为提取可重用的代码段，提高应用的可维护性和灵活性,而setup 函数是组合式API的入口
- setup 调用发生在组件创建之前，props解析完成之后，无法直接使用this
- setup 选项是一个接收 props 和 context 的函数，setup
返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板 - setup 注册生命周期钩子，组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 变成 onMounted
2.ref、reactive、toRef、toRefs、unref 区别
ref 和 reactive 都是用来定义响应式数据的，ref更推荐定义基本数据类型，reactive更推荐定义复杂类型
ref 定义的数据，访问是需要多一个
.value
const count = ref(0)
const state = reactive({
foo: 1,
bar: 2
})
count.value++
state.foo++
console.log(count.value) // 1
console.log(state.foo) // 2
- toRefs 与 unref 都是将响应式对象转成普通对象(解构)，toRefs针对的是复杂对象，unref针对基础数据类型
- toRefs 解构完成对象的属性还具有响应式，对象的属性是ref，而unref 解构后就不具有响应性
const count = ref(0)
const state = reactive({
foo: 1,
bar: 2
})
console.log(unref(count)); // 输出0
const state1 = toRefs(state);
const showFoo = state1.foo; // showFoo是ref对象
showFoo.value++
console.log(state1); //输出state对象
- toRef 为源响应式对象上的某个 property 新创建一个
ref
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
详细查看官网：https://v3.cn.vuejs.org/api/refs-api.html
二、<script setup>语法糖
<template>
<div>
<h1 :style="{color:color}">{{title}}:{{count}}</h1>
<a-button @click="btnClick" type="primary">点击</a-button>
</div>
</template>
<script lang="ts">
export default {
name:"SetupViewTest"
}
</script>
<script setup lang="ts">
import {computed, ref, toRefs} from "vue";
const props = defineProps({
title:{
type:String,
required:true,
},
init:{
type:Number,
default:8,
},
});
const emit = defineEmits([]);
const count = ref(props.init);
const btnClick = function (){
count.value++;
};
const color = computed(()=> (count.value > 12) ? "red": "black");
</script>
引用组件：
<setup-view-test title="setup click count" :init="8"></setup-view-test>
1.<script setup>语法糖其实是上面defineComponent方式的简写
2.无法对组件的name进行定义，可以采用以下两种方式定义name
- 1.增加<script>块
<script lang="ts">
export default {
name:"SetupViewTest"
}
</script>
- 2.安装三方插件
unplugin-vue-define-options
npm install unplugin-vue-define-options --save-dev
defineOptions({
name: 'SetupViewTest',
});
三、选项式写法 与vue2写法一样
<template>
<div>
<h1 :style="{color:color}">{{title}}:{{count}}</h1>
<a-button @click="btnClick" type="primary">点击</a-button>
</div>
</template>
<script>
export default {
name:'Vue2Demo',
props:{
title:{
type:String,
required:true,
},
init:{
type:Number,
default:8
}
},
data() {
return{
count: this.init,
}
},
methods:{
btnClick:function (){
this.count++;
}
},
computed:{
color:function (){
return (this.count > 10) ? "red": "black";
}
}
}
</script>
引用组件：
<vue2-demo title="click count" :init="6"></vue2-demo>
