Vue3 的语法总结

可以参考

https://24kcs.github.io/vue3_study/chapter4/01_Composition%20API_%E5%B8%B8%E7%94%A8%E9%83%A8%E5%88%86.html#_8-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
 

1、格式依然是export default({ 依然可以写过往的各种options api})
1、新增了一个setup可以替换data+method，setup方法需要return {}
1、ref一般用作基础类型，reactive用作对象类型，都能实现双向绑定。
1、setup在beforecreated之前执行，方法中不能使用this.

setup(props, context) / setup(props, {attrs, slots, emit})

1、import {
  reactive,
  ref,
  computed,
  watch,
  watchEffect,
  onMounted,
  onUpdated,
  onUnmounted, 
  onBeforeMount, 
  onBeforeUpdate,
  onBeforeUnmount
} from 'vue' 可以直接在setup中使用

1、vue2和vue3的生命周期对应：
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})
组合式API全部用在setup()方法内部，同时vue2的options api依然有效，vue3的组合api都在vue2的原有方法执行之前。

1、<script setup lang="ts">：
在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的。

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

1、vue3过滤器：

{{filter(data)}}
setup() {

	function filters(id) {
	
	}
}

1、vue3计算属性：

import { computed, reactive } from 'vue'
setup(){
    let per=reactive({
      surname:'勇敢',
      name:'小陈'
    })
    per.fullName=computed({
      get(){
        return per.surname+'~'+per.name
      },
      set(value){
        var arr=value.split('~')
        per.surname=arr[0]
        per.name=arr[1]
 
      }
    })
    return{
      per
    }
  }