Vue3.0新特性

• ref封装响应式数据(原始类型)
  vue3中setup()中创建的数据不再是响应式的，必须将其由ref调用后返回才是响应式数据对象，使用ref需要导入,在script中获取或修改值需要使用.value，在模板中使用时需要return

import {ref} from 'vue'
export default ({
	setup () {
		const count = ref(0)
		return {count}
	}
})

• computed计算属性

import {computed} from 'vue'
export default ({
	setup () {
		const count = ref(0)
		const double = computed(() => {
      		return count.value * 2
   	 	})
		return {count}
	}
})

• reactive封装响应式对象

import {reactive} from 'vue
const data = reactive({})

• toRefs解构响应式对象
  使用reactive封装的响应式对象数据解构后将不再是响应式，将其使用toRefs封装解构后仍然是响应式的

return {...toRefs(data)}

• vue3生命周期

beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

• vue3 侦听器
  传递两个参数，第一个是要侦听的数据，第二个是回调函数，可以接收两个参数，第一个是旧值，第二个是新值 注意要侦听的数据必须是响应式的或者是函数，函数返回值可以是原始数据类型

watch(data, (newV, oldV) => {
	// 执行监听后的逻辑
    });

• defineComponent
  使用defineComponent可以在创建组件时提供代码提示

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
});

• setup()
  setup函数在组件创建前执行，两个参数为props和context

props: {
      msg: {
        required: true,
        type: String
      }
  },
setup(props, context) {
    
  }

• Teleport
  类似于闪现
  作用在于将一个组件传送到任意一个组件中去
  以下代码将会把改组件传送到id为model的元素节点上

<teleport to="#model"></teleport>

• Suspense
  作用在于动态渲染异步请求的组件内容
  default组件渲染请求结果 | fallback组件渲染请求结果获取到之前的内容

<Suspense>
      <template #default>
        <div>
          <async-show />
          <dog-show />
        </div>
      </template>
      <template #fallback>
        <h1>Loading !...</h1>
      </template>
    </Suspense>

• 捕获异常

const error = ref(null)
    onErrorCaptured((e: any) => {
      error.value = e
      return true
    })