vue3新特性

• 组合式API
• teleport
• 片段

1. 组合式API
   在vue2中，我们会在data中定义一些变量，在methods中定义方法，在props中获取父级传过来的数据，还在外面写生命周期函数和watch、computed等等。这样就导致代码是一块一块的，使代码难以阅读理解。
   在vue3中，上面说的所有内容除了props都放在了setup函数中

setup 函数有两个参数，一个是props，一个是context（相当于this），所以vue3中没有this。
setup中定义响应式变量方式：
通过ref函数来定义一个基本类型的变量：

import {ref} from 'vue'
const num = ref(0)

通过reactive函数来定义一个数组或对象类型的变量：

import {reactive} from 'vue'
const obj = reactive({ count: 0 })

但相对于toRef和toRefs，ref和reactive又是不响应的，因为他们在引用别的数据中的值时仅仅是拷贝，而toRef和toRefs才是真正的引用：
比如在

const obj = { name:"zhangsan"}
//此时ref只是拷贝了“zhangsan”这个值，后面name2的改变并不会影响obj中name的值
let name2 = ref(obj.name)
//toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。
let name3 = toRef(obj.name)
//toRefs将整个对象变成响应式数据，修改响应式数据是会影响到原始数据的。
let name4 = toRefs(obj)

2.vue2的watch和vue3的watchEffect区别:
watchEffect会在引用的任意一个数据变化是执行，而不是像watch监听某个属性，初始会被调用，与computed类似，不同的是watchEffect没有return；
3.数据劫持原理区别：
vue3中使用的是proxy来进行数据劫持，相比较vue2的object.defineProperty可以直接监听数组和对象，而object.defineProperty是需要去另外通过遍历来监听对象的每个属性；
因此vue2中的数据劫持有个缺点：直接改变数组长度或者实用下标去修改数据项时是无法监听的。
解决该缺点：通过$ set修改，比如：this.$ set(arr,index,value)