1.vue2中的响应式与vue3中有什么不同

vue2中响应式采纳Object.defineProperty对对象中的属性进行get和set拦挡。创立observer类，为每个数据创立一个数组来治理依赖，在getter中收集依赖，在setter中告诉依赖更新。所以每当属性进行读写操作时就会触发get和set，从而实现对属性的监听。

vue2中对对象属性的拜访须要先晓得特定的key，所以对于对象中新增的属性、数组中通过下标新增数据会有些有余。

vue2中的全局的$set办法的实质就是给新增的属性手动observer

Object.defineProperty(car, 'price', {  get() {},  set() {}})

vue3中的响应式则是借助Proxy，target是指标对象能够是数组甚至是另一个代理，handler通常是用来定制拦挡行为，通常含有 has、get、set、deleteProperty等办法。能够看到vue3对对象的代理不依赖对象属性，所以能够很好的解决vue2中的有余。

const proxy = new Proxy(target, {  get: function(target, propKey, receiver) {    return '10'  }})

2.vue3比vue2优化了哪些地方

  • 全局API的批改：vue2中是导出全局的vue对象，在单元测试中，很容易净化全局环境以及带来抵触。vue3中通过createApp 创立app实例，所有操作批改从间接操作Vue全局对象，转变成了操作vue实例
  • 一些全局的api反对了tree-shaking，变成了具名的导出，从vue对象中脱离。如nextTick的援用形式从Vue.nextTicke变成了import {nextTick, observable} from vue
  • 通过Composition API以逻辑来划分代码，更好的重用代码，vue2中对代码的抽离能够通过mixins，然而mixins存在命名抵触、裸露进去的变量起源不清晰等问题。composition api能够进行重命名，防止了命名抵触。
  • 对typescript更好的反对
  • 新增了一些其余的个性，比方teleport和suspense

3.vue3中的suspense组件

vue3中应用defineAsyncCompoent办法，办法承受返回promise的工厂函数，动静加载组件

const AsyncComp = defineAsyncComopent(  () => new Promise((resolve, reject) => {    resolve({      template: '<div>test</div>'    })  }))

vue2中则是间接通过import导入。

4.vue3中的teleport组件

teleport像是一个传送门，容许咱们管制在哪个dom节点下出现html。to属性承受一个querySelector，设置父级节点。

实现原理：通过createBlock生成一个vnode，创立teleport组件，通过调用Teleport.process，选中父节点，mountChildren办法挂在到dom中。

<teleport to="body"><div></div></teleport>

5.说说虚构dom及vue3中对虚构dom对优化

虚构dom就是一个js对象来形容dom节点，当数据发生变化时，比照变动前后的虚构dom节点，通过dom-diff算法计算出须要更新的中央，而后来更新须要的视图。
vue中通过VNode类来实例化出不同类型的虚构dom，比方正文节点通过isComment来示意是否是正文节点，text示意具体的正文信息。

export const createEmptyVNode = (text: string = '') => {  const node = new VNode();  node.text = text;  node.isComment = true;  return node;}

优化前，在一个默认的Virtual Dom的diff中，须要遍历所有节点，去比拟旧的props和新的props有没有变动

而优化之后，创立的vnode多了patch flag标记该节点的可变属性，当 diff 算法走到 _createBlock 函数的时候，会疏忽所有的动态节点，只对有标记的动静节点进行比照，而且在多层的嵌套下仍然无效。

6.vue3中的生命周期

beforeCreate和create简直是同时在setup函数中进行触发的。生命周期函数的书写OnBeforeMount、OnMounted、onUpdated

vue3中多了两个调试钩子函数onRenderTracked onRenderTriggered，顾名思义就是在render从新绘制时进行触

7.vue中的key有什么作用

  • 在dom-diff中标识Vnode，标识变动前后是否是同一个组件
  • 通过key复用元素，所以批改某一个元素的key能够从新渲染该元素

8.vue3 的 watch 与 vue2 中有哪些不同

  • vue3 中的 watch 函数第一个参数为响应式对象、有 getter/setter 的 effect 函数、或者这些类型数组；第二个参数为数据变动时的回调；第三个参数为 watchOption，提供是否立刻监听和是否深度监听的配置。

  • vue3 能够屡次应用 watch 办法

    watch(data, () => {})watch(() => data.name, () => {})watch([data, name], () => {})

  • vue3 的 setup 中不存在 this 对象，监听路由须要应用 vue-router 提供的 userRoute，vue2 则是在 watch 对象里增加'$route'进行监听

    import { useRoute } from "vue-router";// setupconst route = useRoute();const userData = ref();// 当参数更改时获取用户信息watch(() => route.params, () => {});

9.vue3中watchEffect与watch的异同

不同点：

  • watchEffect立刻执行传入的函数，在初始化时主动收集依赖，并在其依赖变更时从新运行该函数
  • watchEffect无奈获取原值，只能失去变动后的值

相同点：两者都可通过StopHandle.stop()函数手动进行监听

const stopHandle = watchEffect();handle.stop();

10.v-model的原理及vue3中v-model的扭转

v-model通过在数据批改时，告诉父级节点实现数据的双向绑定。其实是一个语法糖当满足以下两个条件时，可实现自定义组件的v-model：

  • 子组件受控接管prop
  • 数据批改时触发event把新的数据提交给父组件
props: {  value: String},model: {  prop: 'value',  event: 'change'}

vue3中降级了v-mode的用法，通过update:modelValue来触发事件，prop也被更改为modelValue。还在一个组件上反对多个v-model，如新增v-model:lastName等。

props: {  modelValue: String,}emits: ['update:modelValue'],methods: {  changeTitle() {    this.$emit('update:modelValue', title)  }}

参考链接

  • 抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些
  • Vue原理解析（八）：一起搞明确令人头疼的diff算法