vue3 新增特性

defineComponent：

导出组件为：

export default defineComponent({
    name: 'test'
}); 

teleport特性：

具体，如app组件中包含dialog组件，通常定义的组件会包含在app组件内部，通过teleport可以将dialog组件内元素挂在到指定位置。

Suspense：

Suspense为内置组件，主要用户处理组件内部为异步操作加载过程中的显示问题，如处于加载中显示加载动画，加载完成后显示组件。注意：需要在setup方法中返回promise

 

ref：

ref可以将单个属性或者对象做成响应式，如const count = ref(0),模板在取值是可以直接使用{{count}}, 但是在设置值事需要采用如下形式更改其值，如count.value++

注：vue中的ref可以和模板中的ref配合使用 如 ,setup方法中可以通过const inputRef = ref(null), 主要需要将inputRef在方法后面返回，inputRef即为input dom元素

 

reactive:

reactive可以将一组较独立逻辑封装到一起做成响应式，如const obj = {count: 1,reactive: () => obj.count++},需要注意的是ref和reactive定义的变量需要在setup方法中，其需要通过如下方式返回 return {count, obj}, 不可以直接将obj里面的属性通过...obj展开返回，这样将失去响应式效果，此处可以通过refs将obj转成另外一个对象，如const targetObj = refs(obj); 通过{...targetObj}返回的count也是响应式的

 

watch:

watch第一个参数为需要监听的属性，注意不是字符串形式，第二个为回调函数，其中新值和旧值可用过回调函数形参得到

 

setup:

setup方法接收两个参数，如setup(props,context)，其中props为组件收到的属性，context为上下文

 

注：建议代码都写到setup方法中，2.x版本的生命周期都可以在set方法中以方法调用的形式使用，方法都接收一个回调函数，声明周期函数在区别上3.0版本函数名字都有一个on， 如onMounted