[toc]
### 1问: vue3和vue2有哪些不同?
> 1. 响应式系统的重构，使用proxy替换Object.defineProperty属性，优势：
- Proxy可直接监听 对象`添加/删除`属性;
- Proxy直接监听 数组的变化
- Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升
2. 新增`组合式API`(Composition API)，更好的逻辑重用和代码组织:
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
3. 重构虚拟 DOM, diff算法
4. 生命周期更名
- beforeDestroy改名为 beforeUnmount
- destroyed改名为 unmounted
```js
// Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate ===> setup()
created ===> setup()
beforeMount ===> onBeforeMount
mounted ===> onMounted
beforeUpdate ===> onBeforeUpdate
updated ===> onUpdated
beforeUnmount===> onBeforeUnmount
unmounted ===> onUnmounted
```
4. 新的内置组件:
- Fragment
- Teleport
- Suspense
5. 移除的部分:
- 移除v-on.keyCode修饰符，同时也不再支持config.keyCodes
- 移除v-on.native修饰符,
- 移除过滤器（filter）
- `不`再建议使用mixins, 组合式函数本身就是更好的mixin代替品
### 2问: Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？
#### vue2.x的响应式原理
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
- 存在问题:
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。
- 追问: vue2如何解决这些问题? 答: `$set`
#### vue3.0的响应式原理
- 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、添加、删除等。
- 通过Reflect（反射）: 对源对象的属性进行操作。
```js
new Proxy(data, {
// 拦截读取属性值
get (target, prop) {
return Reflect.get(target, prop)
},
// 拦截设置属性值或添加新属性
set (target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty (target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
proxy.name = 'tom'
```
- 存在问题: 解决了vue2响应式的短板, 但是也存在兼容性问题(新特性, 老浏览器不支持)
### 3问: 有哪些vue3响应性判断函数?
- isRef: 检查一个值是否为一个 ref 对象
- isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
- isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
- isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
### 4问: setup函数怎么用?
- setup使用:
```js
setup(props, context) {
/*** Setup props */
// 请注意如果你解构了 props 对象，解构出的变量将会丢失响应性, 推荐使用props.title形式
console.log(props.title)
// 将 `props` 转为一个其中全是 ref 的对象，然后解构
const { title } = toRefs(props)
// `title` 是一个追踪着 `props.title` 的 ref
console.log(title.value)
// 或者，将 `props` 的单个属性转为一个 ref
const title = toRef(props, 'title')
/*** Setup 上下文 */
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs)
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots)
// 触发事件（函数，等价于 $emit）
console.log(context.emit)
// 暴露公共属性（函数）
console.log(context.expose)
}
```
- 注意点, 当使用\