Vue3 setup语法糖

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： props attrs slots emit
将无法访问一下组件选项 data computed methods refs (模板 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>