一、Vue2.0和vue3.0有什么区别？
1、响应式原理
vue2.0 的双向数据绑定是利用ES5的一个API，Object.defineProperty 对数据进行劫持 结合发布订阅者模式的方式来实现的。
原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知
vue3 中使用了es6的 ProxyAPI 对数据代理，通过reactive() 函数给每一个对象都包一层Proxy，通过Proxy 监听属性的变化，从而实现对数据的监控。
原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知
2、生命周期
| vue 2.0 | vue3.0 | 做的事情 |
|---|---|---|
| beforeCreate | use setup() | 1 |
| created | use setup() | 1 |
| beforeMount | onBeforeMount | 注册一个钩子在组件被挂在之前调用 |
| mounted | onMounted | 注册一个回调函数，在组件挂载完成后执行 |
| beforeUpdate | onBeforeUpdate | 注册一个钩子，在组件即将因为响应式状态变更而更新其DOM树之前调用 |
| updated | onUpdated | 注册一个回调函数，在组件因为响应式状态变更而更新其DOM数之后调用 |
| beforeUnmount | onBeforeUnmount | 注册一个钩子，在组件实例被卸载之前调用 |
| unmount | onUnmount | 注册一个钩子，在组件实例被卸载之后调用 |
3、语法的区别
(1) 在Vue3中，v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定
(2) 弃用 new Vue 改使用createApp
const app = Vue.createApp({})
(3) 弃用Vue.prototype，在Vue3中，我们可以使用如下定义方式
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
(4) 全部方法现在全部在 app 实例上，例如：
app.directive，app.use
(5)现在需要手动挂载节点
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
(6) 不能再使用Vue.nextTick/this.$nextTick vue3中你可以用：
import { nextTick } from 'vue'
nextTick(() => { // something })
(7) Vue3 允许template设置key
(8) 正式弃用scopedSlots 正式弃用，旧的不去新的不来。
(9) 监听数组变化需要使用deep属性，否则只能监听到整个数组被替换
(10) 弃用 $children ,访问子组件可以使用$ref
(11) filter 被移除
(12) 移除事件API，$on，$once，$off，不在使用，EventBus 方法也不再使用。
4、在文件引用上 vue2 中new 出的实例对象，所有东西都在这个new对象上，这样其实无论你用到还是没用到，都会跑一变
vue3.0 中可以是用ES module imports 按 需引入，如 keep-alive 内置组件，v-model指令等等。
二、Vue常用的指令有哪些？
1、v-once
解释：只会执行一次渲染，当数据发生改变时，不会再变化。
2、v-show
解释：接收一个表达式或一个布尔值。相当于给元素添加一个display属性。
3、v-if
4、v-else
5、v-else-if
解释：v-if 和 v-show 有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。
6、v-for
解释：v-for 可用来遍历数组、对象、字符串。
7、v-html
解释：v-html 是渲染为html
8、v-text
解释： 是渲染字符串，会覆盖原先的字符串
9、v-bind
是用可以将标签内的属性值解析成js代码，在标签的属性中使用v-bind，双引号的内容会被当作js 解析。
10、v-on
解释：用于绑定事件, v-on 可用@代替
11、v-model
数据双向绑定指令，限制在 input select textarea components 中使用
语法 v-model
三、v-for为什么要加一个key？
1、key 是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点
2、在v-for中如果不使用key，Vue 会采用就地复用原则：最小化元素的移动，并且会尝试尽最大程度在同适当的地方对相同类型的元素，做patch 或者reuse
3、如果使用了key,vue会根据keys的顺序记录元素，曾经拥有了key的ele如果不在出现的话，会被直接remove或者destoryed
4、当用+new Date() 生成的时间戳作为key，手动强制触发重新渲染，
5、key属性可以避免数据混乱的情况出现。
key 在v-for 中的作用就是用来提高渲染性能的！更高效的更新虚拟dom
四、什么是Js原型？原型链是什么？
JS 原型的简要解释
prototype是function 对象上的一个属性，它表示构造函数构造出来的对象的共有祖先，被通过构造函数构造出来的对象上有一个__proto__属性指向该函数的prototype，prototype本身也是一个对象，所以这种__proto__ 与prototype之间的连接关系会变成一个链条，这就是原型链，通过原型链我们可以提取共有的属性，并实现继承。
原型链：
每个构造函数都有一个原型对象，原型对象有一个属性（constructor）指回构造函数，而实例有一个内部指针（proto）指向原型。
如果当原型是另一个类型的实例的时候，那就意味着这个原型本身也有一个内部指针指向另一个原型，相应的另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。
五、用闭包的原理做过哪些？
1、防抖
2、节流
六、作用域是什么？
1、作用域指的是一个变量的作用范围 2、作用域分为全局作用域和局部作用域
全局作用域： 直接在script标签中的javascript 代码都是全局作用域 当页面打开运行时全局作用域就会自动创建，而当页面关闭时就会销毁。 在全局作用域中有一个全局的window对象可以使用，而所有全局作用域对象都会作为window对象的属性来使用。
函数作用域： 作用于函数内的代码环境，就是局部作用域。由于跟函数有关，所以也称为函数作用域。 函数作用域就是在调用函数时才会被创建，函数执行完毕后就会自动销毁。 同时每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。
块级作用域：
七、操作数组的方式有哪些？
1、join() 把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分割，默认，
2、push() 可向数组的末尾添加一个或多个元素，并返回新的长度。会改变原数组
3、pop() 可删除数组的最后一个元素，会改变原数组，返回最后一个元素。
4、shift() 可删除数组的第一个元素，并返回第一个元素的值，改变原数组
5、unshift() 可向数组的开头添加一个或更多元素，并返回新的长度。
6、slice() 可返回从start 到 end的 arrayObject中的元素，返回的是选定的元素，该方法不会修改原数组。
7、splice() 可删除从index处开始的零个或多个元素，并用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从arrayObject中删除了元素，则返回的是含有被删除的元素的数组。splice() 方法会直接对数组进行修改。
8、sort排序 按照 Unicode 位置排序，默认升序
9、reverse() 用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。
10、indexOf 和 lastIndexOf 二者都接受两个参数，查找的值，查找起始位置 如果查找不存在，则返回-1； 存在则返回查找的位置。indexOf是从前往后查找，lastIndexf是从后往前查找。
11、every 对数组中的每一项都运行给定的函数，每一项都返回true，则返回true
12、some 对数组中的每一项都运行给定的函数，只要有一个返回true，则返回true
13、filter 对数组中的每一项都运行给定的函数，return出去结果为true的项组成的数组。
14、map 对数组的每一项都运行给定的函数，返回每次函数调用的结果组成一个新数组。
15、forEach 循环数组
16、reduce()方法的作用就是对这个数组进行求和*
17、includes() 方法用于判断字符串是否包含指定的子字符串,或者判断数组中是否有指定的元素
18、concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。
