Vue经典面试题：Vue2和Vue3的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue经典面试题：Vue2和Vue3的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

双向绑定原理
- vue2是用过ES5的一个API Object.defineProperty()对数据进行劫持配合发布订阅者模式的方式来实现的
- Vue3是使用了ES6的proxyAPI对数据代理
Vue3支持碎片（Fragments）
- 就是说组件可以有多个根节点
Composition API
vue2采用选项类型API，而vue3采用合成型API。代码更加的简便整洁
生命周期钩子函数
- 若组件被keep-alive包裹，则多出下面两个钩子函数
- onActivated() 激活时执行 onDeactivated() 失活时执行
setup（）函数新特性
- 它接受两个参数（props、context(包含attrs、slots、emit)）
- 在beforeCreate和Created 两个钩子函数之前的函数
- 执行setup时，组件实例尚未被创建，在setup内部this不指向vue实例，是undefined
- 和模板一起使用：需要返回一个对象定义的变量和方法最后都需要return 出去
- 使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态
  - 注意：
  - setup函数中的props是响应式的，当传入新的prop时，它将被更新但是因为props是响应式的，所以不能使用ES6解构，因为会消除prop的响应式。可以通过setup函数中的toRefs来完成此操作
  - setup函数只能是同步的不能是异步的
  - setup函数只会在初始化的时候执行一次
teleport瞬移组件
如何取舍ref和reactive
- 优先使用ref函数，因为ref函数可以处理简单数据类型，也可以处理复杂类型，常用于数据类型定义响应式数据
  
  ref特点：在代码中获取或者修改值时，需要补 .value 但是在template模板中不需要
- reactive 常用于定义复杂数据类型作为响应式数据
  
  特点：不需要 .value，如果明确知道对象中有什么属性久使用reactive
父子通信
- 父传子
  - 在setup函数中有两个参数第一个参数为props，第二个参数为context

- props为一个对象，props接收后，内部包含了所有传递过来的prop数据

- context包含了attrs，slots，emit属性，其中emit方法可以完成子传父

子传父
- 子
```
setup(props,context) {
    context.emit('name','李雷')
}
```
- 父
```
<template> <Son @name="name" ></Son> </template>
 
setup() {
   const name = (name)=>console.log(name);
     return {name}
}, 
```
- 父传子：在setup中使用props数据 setup(props){ props就是父组件数据 }
- 子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ emit 就是触发事件函数}
performance
原本在vue2中虚拟dom时进行全量的杜比，而在vue3中新增了静态标记（patchFlag），值对比带有PF的节点，并通过Flag的信息得知当前节点要比对的内容，这样就无需遍历整个虚拟dom，从而大大提升性能。

vue3响应式原理

实现原理
- 通过proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、添加和删除
- 通过reflect（反射）ES6：对源数据的属性进行操作。
```
proxy: 
    [[handle]]: 增删改查靠它完成
    [[target]]: 数据
}
```

Object.defineProperty是单线程，不能捕获错误只能通过try和catch实现

Reflect可以捕获错误（reflect也具有defineProperty）文章来源地址https://www.toymoban.com/news/detail-418161.html

const per 代理数据 = new proxy 代理对象 (源数据person,操作项{         
    per: 代理数据
  proxy: 代理对象,俩个参数(源数据、操作项)

    get (源数据target,属性名propName) {
        return Reflect.get(target,propName)
  }
    
    set (源数据target,属性名propName,操作后的值value) {
        追加也能调用,引起源数据的变化
        Reflect.set(target,propName,value)
    }

    deleteProperty (源数据target,属性名propName) {
        return Reflect.delete(target,propName)
    }
})

到了这里，关于Vue经典面试题：Vue2和Vue3的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！