1、小程序开发与网页开发的区别？

• 1、网页开发是单线程，网页开发渲染线程和脚本线程是1个进程 。而小程序的是不同的进程
• 2、小程序与网页开发的环境不同
• 3、网页开发可以是用浏览器各种暴露的DOM API，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM（文档对象模型） API和BOM（浏览器对象模型） API。

2、vue的数据流是单向还是双向的?

本质上是单向的，实际上v-model只是v-bind:value 和 v-on:input的语法糖，主要是负责监听用户的事件以更新数据，并对一些极端场景进行一些特殊处理。而且在vue中父组件与子组件传值的时候，数据都是进行单向传递的。

3、 Vue框架的优点是什么？

• 1、简单易学
• 2、虚拟Dom加载
• 3、数据双向绑定
• 4、组件化开发
• 5、轻量级框架

4、 Vue间传值方式有哪些？

• 1、父子间传递

(1)父组件在子组件中绑定自定义属性
(2)子组件通过porps属性接收

• 2、子组件向父组件传值：

（1）在父组件在子组件标签中绑定自定义事件；
（2）子组件通过this.$emit()方法触发自定义事件，传值给父组件。

• 3、兄弟组件之间传值：

（1）共同传给父组件，再由父组件分发（状态提升）
（2）使用Vuex
（3）利用bus 事件总线

• provide/inject 父组件孙子组件传值

我们可以从父组件的provide传值，子组件或者孙组件，就可以用inject来接受子组件的provide属性值

5、为什么 Vue 组件中 data 必须是一个函数？

    如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。
    如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。
# 什么是执行上下文？
简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。

6、 执行上下文的类型

JavaScript 中有三种执行上下文类型。

• 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。
• 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。
• Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。

vue3与vue2的对比

1、v-if 与v-for的优先级有区别

在vue2中，v--for的优先级更高，在vue3中，v-if的优先级更高。
复制代码

2、 v-for key的好处

• 问题：
  vue的特点有双向绑定，一旦数据发生变化，页面就会渲染新的数据在页面上，如果数据很大，对于V-for来说很费事情，每次都要重新去遍历。

• 解决方案：
  key的出现，就是解决了这个问题，当给页面添加数据，页面只渲染这个新添加的数据。

• key的好处：
  v-for默认使用了就地复用策略，当列表数据修改时，会根据key去判断数值是否更改，如果更改则重新渲染，如果没有就复用之前的。

• key唯一的原因：
  key要唯一的原因是如果你在中见插入了一条数据，插入后面的数据也会跟着被渲染

3、v-slot 与slot

①属性：在vue2中，插槽都是由slot以及slot-scope组成，在vue3中，直接利用v-solt即可
②组件：在vue2和vue3延续使用<slot>组件，不过方式上略有不同
 不同点：vue3中没有名字的<slot>的名称一般隐式为“default”，在vue3中，如果使用具名插槽，就要
 用v-slot指令，提供参数作为命名即可                       
复制代码

比如:
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template> v-slot只能添加到template组件中哦~在vue3中，# = v-slot，所以可以代替使用，比如
<template #default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>  但是，有且只有插槽足有名称的时候才能使用#，不然会有警告哦
复制代码

4、v-is在vue2上面的区别

在vue2上面，v-is可以是一个动态的名称，但是在vue3中，v-is只能是一个字符串
复制代码

5、CompositionApi是什么？用来干什么？解决了什么问题？他的特点是什么？如何使用？

• 1、是什么？
  是vue3独有的新特性

• 2、用来干什么？
  用来解决大型项目中，代码共用和重复性问题。将碎片化的难以维护和理解的代码进行合并

• 3、解决了什么问题？
  在项目中保持单个逻辑代码清晰，将复杂的问题简单化

• 4、特点是什么？

      ①setup ：在组件创建前执行，this里面没有setup，因为setup执行时并没有创建组件实例。setup一般情况下有两个参数（props，context），setup的返回都会暴露给组件以及组件的模板
      **ps：在setup中，除了用props属性，其它的都无法访问组件里面任何属性（本地状态、计算属性等）**
      ②ref：变量声明，一般读取内容为ref.value ref可以让任何变量在任何地方有反应。在任何地方都给他包装成一个对象，原始的对象不需要是因为Number和string类型都是值传递而不是引用传递，用ref的话能保证何时何地都能有效的快速的发生响应。
      ③setup注册了钩子函数，在setup中，拥有钩子函数onMounted
      ④watch，可以有三个参数（第一个是需要监控的内容，第二个是回调函数，第三个是可选配置选项），本身就是个函数
      ⑤computed：函数函数，计算函数，要得到computed的数据，就要用value属性，类似ref
  复制代码

• Vue3 Global API

  在vue2中有很多全局变量和配置，他们为vue提供了很多的便利，同时也带来了思考与问题

现状：
    1、由于在vue中，同一个vue构造函数下的实例都共享相同的全局配置
    2、vue也并没有app的概念，vue只是在基础上创建了vue的实例，
问题：
    1、由于共享全局变量，所以存储本地全局配置必须要仔细
    2、在测试之后，如何还原本地全局配置也很麻烦，并且，在vue测试中，必须在vue/test-utils要添加createLocalVue才能进行下面的操作
   import { createLocalVue, mount } from '@vue/test-utils'
痛点：
全局配置使得使用不同全局配置在同一页面上的多个“应用程序”之间共享Vue的同一副本变得困难。

所以Vue3中，添加了一个新的全局API：reateAppc
复制代码

• Functional Components vue3

在vue3中，函数化组件的单文件组件 【 single-file component (SFC)】 <template>被移除
在vue3中，由函数创建的组件{functional:true}属性被移除
在vue3中，函数化组件只能使用普通函数创建
复制代码

在vue2里面的用法有两个
1、返回多个根节点
2、提高性能优化，因为函数组件比状态组件的初始化速度更快

vue3的改变
1、状态组件也可以返回多个根节点
2、状态组件性能提升到与函数化组件差不多的位置

• 添加异步组件 Async Components

在vue2中，没有异步加载组件的东西，在vue3中，添加了异步加载组件。
在vue3中，Functional Components被定义为纯函数，需要通过一部组件定义并包装在 defineAsyncComponent中来明确异步组件

在loader function中，vue2中的loader已经被替换成了component，
同时，vue2中的需要传递的参数reject和resolve在vue3中无需传递，但是必须返回一个Promise

vue3新增的

• emits Options

在vue3中新增了emits属性，emits属性可用于定义组件可向其父组件发出的事件
因为在vue2中，虽可以用props传递数据，但是却不知道是哪些组件进行调用的
vue3可以运用emits和props传递数据 并且可以指定是哪个方法进行调用的。

<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div></template><script>
export default {
props: ['text'],
emits: ['accepted']
}</script>
复制代码

eventApi

1、在vue3中 $on、$once、$off事件被移除

1. render function API

在vue3的改变：
1、h render已经变成了全局引用而不是之前的自动引用。vue3的用法是： import {h} from 'vue'，vue2是无需引入，直接用。
2、render function 标记改变了。在vue2中，render 函数自动接收数组类似于h之类的，但是在vue3中，render函数不再接收其它的参数，所以一般在setup函数内部使用， 这样做的另一个好处是可以访问作用域中声明的反应状态和函数以及传递给setup的参数。
3、VNode props格式化：在vue2中，某个自定义属性是VNode属性的情况下可以包含嵌套一个列表，但是在vue3中更倾向扁平化设置，比如
在vue2中，{nn:{ innerHTML: '' },}，在vue3中的表达是innerHtml:''
4、注册组件：在vue2中一个组件被注册了， 将组件名称作为字符串传递给第一个参数时，render函数正常运行，但是在vue3中，由于VNode已经不受上下文限制，不能使用字符串ID查找已注册的组件，但是我们可以导入 resolveComponent方法让之前的组件清除。
复制代码

2. APISlots Unification

在vue3中，this.$slots暴露成一个方法，this.$scopedSlots被移除
// 2.x Syntaxthis.$scopedSlots.header
// 3.x Syntaxthis.$slots.header()
        1. 替换所有this.$scopedSlots与出现this.$slots在3.x中
        2. 替换所有出现的this.$slots.mySlot与this.$slots.mySlot()
复制代码

Transition Class Change

用在vue3中，v-enter重命名为v-enter-from，v-leave重命名为v-leave-form

$listeners removed

在vue3中，$listener被移除并且已经合并到$attrs中的一部分

$attr sincludes class & style

在vue2中，class和style都在虚拟dom中做了处理，他们不包含在$attr里面，当他们使用 inheritAttrs: false会有以下副作用：
        1、$attrs里面的属性不自动添加到根节点，让开发人员决定他们添加在哪里
        2、出了style和class不属于$attrs， $attrs仍将应用于该组件的根元素.
复制代码

FragMent

Vue3推出的新特性，在vue2里面，只允许有1个根节点，但是在vue3里面允许有多个根节点。
复制代码

Global API TreeShaking

在vue2中，自定义暴露Dom操作，需要添加Vue.nextTick()事件，但是在vue3中，nextTick已经全局化了。需要引入才能用
复制代码

Props Default FunctionthisAccess

在vue3中，propsm默认工厂函数没有权限访问this，反之，vue3里面，props将接收的组件作为参数传递给默认函数。Inject Api可以在默认函数里面使用
custom-directives
指令的钩子函数已经全部重命名，可以更好的与组件声明周期配合

• 所以vue2的指令与vue3的指令的对比
  bind
  beforeMount
  当指令绑定到元素时调用，仅仅调用一次
  inserted
  mounted
  当元素被插入父级DOM时调用

  beforeUpdate
  当元素本身发生改变之前调用
  update
  vue3中被移除
  该钩子函数用于组件的元素发生变化但是子元素并没有发生改变时调用
  componentUpdated
  updated
  该钩子函数用于组件以及组件的子节点发生改变时调用

  beforeUnmount
  类似于组件生命周期钩子函数，在元素卸载前调用
  unbind
  unmounted
  删除组件后调用，仅调用一次

• Custom Elements Interop自定义元素交互

    1、vue3中，自定义元素应该由 通过编译器配置选项而不是运行时配置，并且自定义元素白名单应该在模板编译期间运行。
    2、is 属性被局限于仅在 <component> 组件中运行
    3、vue3中新添加的v-is也支持在vue2中运行，is可以用于本地并解决HTML解析限制问题。
复制代码