Vue2.0 和 Vue3.0 有什么区别？
vue经历从2.0到3.0更新之后，简⽽⾔之就是变得更轻，更快，使⽤起来更加⽅便，每⼀次的版本迭代都是对上⼀个版本的升级优化.
数据绑定的原理发生了变化：
vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。 vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，相比与vue2，使用proxy API 优势有： 1、defineProperty只能监听某个属性，不能对全对象进行监听； 2、可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）； 3、可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。 双向数据绑定的核心是数据变化侦测及依赖收集。
建立数据data发生了变化
vue2是把数据放入data中，vue3就需要使用一个新的setup()方法
是否支持碎片：
vue2.0 只允许有一个根标签，vue3.0支持碎片化，可以拥有多个根节点。
Composition API
Vue2 与vue3 最大的区别是vue2使用**选项式api**，对比**vue3组合式api。**旧得选项式api在代码里分割了 不同得属性：data,computed,methods等；新的合成型api能让我们使用方法来分割，相比于旧的API使 用属性来分组，这样代码会更加简便和整洁。这种就叫做组合式Api，这样可以将同一逻辑的内容写到一起。
生命周期：
Vue3 在组合式API中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API） 中可以直接调用生命周期钩子。
父子传参不同，setup()函数特性
1--- setup()函数接收两个参数：props、context(包含attrs、slots、emit) 2--- setup函数是处于生命周期beforeCreated和created俩个钩子函数之前 3--- 执行setup时，组件实例尚未被创建（在setup()内部，this不会是该活跃实例得引用，即不指向vue 实例，Vue为了避免我们错误得使用，直接将setup函数中得this修改成了undefined） 4--- 与模板一起使用时，需要返回一个对象 5--- 因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解 构，因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。 6--- 父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和 对象；在vue3中得setup()中得第二个参数content对象中就有emit，那么我们只要在setup()接收第二个 参数中使用分解对象法取出emit就可以在setup方法中随意使用了。 7--- 在setup()内使用响应式数据时，需要通过 .value 获取
main.js文件不同
vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数 vue3中需要使用结构的形式进行操作，引入的是工厂函数
Vue3带来了什么改变？
- 性能的提升：
打包大小减少了 初次渲染更快了，更新更快了 内存减少了。
- 响应式系统升级 （defineProperty变更为proxy）
响应式核心实现从通过Object.defineProperty变为proxy，解决了definProperty无法监听对象新增属性以及无法跟踪数组 索引以及数组length的问题
- 提供新的写代码的方式：Composition API
vue2.x中，所有的数据都在 data 方法中定义返回，方法定义在 methods 下面，并通过 this 调用 vue3.x中，所有的代码逻辑将在 setup 方法中实现，包括 data 、 watch 、 computed 、 methods 、 hooks ， 并且不再有 this。 vue3.x setup 方法在组件生命周期内只执行一次，不会重复执行。 相比vue2.x中基于 OPTIONS 配置的方式，vue3.x基于组合式API的方式语义没有2.x清晰，2.x中 data 、 methods 、 computed 、 watch 等都通过不同的scope区分开，看起来很清晰，3.x都放在 setup 方法 中，对代码组织能力会有更高的要求。 **vue3.x的 reactive 和 ref 取代了vue2.x中的 data 数据定义**
- 更好的Typescript支持
- 实例化：
2.x使用构造函数 new Vue(...) 创建实例，3.x使用 createApp 函数创建实例； 2.x所有属性方法和设置都绑定到全局 Vue 对象上，3.x改为绑定到 vue 实例下，收紧了scope； 3.x移除了 Vue.config.productionTip 和 Vue.config.keyCodes 配置属性
reactive与ref的区别？
- 从定义数据角度对比：
ref用来定义：基本类型数据
reactive用来定义对象（或数组）类型数据
备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。 - 从原理角度对比：
- ref通过
Object.defineProperty()的get与set来实现响应式（数据劫持）。 - reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
- 从使用角度对比：
- ref定义的数据：操作数据需要
.value，读取数据时模板中直接读取不需要.value。 - reactive定义的数据：操作数据与读取数据：均不需要
.value。
计算属性computed和watch以及methods的区别？
methods，watch 和 computed 都是以函数为基础的，但各自却都不同.
作用机制上:
watch 和 computed 都是以 Vue 的**依赖追踪机制**为基础的，当某一个数据发生变化的时候， 所有依赖这个数据的相关数据，自动发生变化，也就是自动调用相关的函数去实现数据的变动 methods 里面是用来定义函数的，它需要**手动调用**才能执行。而不像 watch 和 computed 那样， “自动执行”预先定义的函数，相比于 watch / compute；methods **不处理数据逻辑关系**，只提供可调用的函数， 类似储存函数的一个库。
从性质上
1.methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）。 2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。 3.watch:类似于监听机制+事件机制，回调函数自动调用。
总结:
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响。
computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存。
computed 和 watch都能实现的功能，建议使用 computed 因为更加简洁
$route 和 $router 的区别？
$router是”路由实例“ 对象包括了路由 的跳转方式，钩子函数。
例如 基础使用： this.$router.push("/路径名称"); 使用对象的形式，参数为地址栏上的参数 this.$router.push({ path:"/login",query:{username:"jack"} });
$route是”路由信息对象“，包括path，params，hash，query，name等路由信息参数。
主要的属性有： this.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews this.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面 this.$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面 this.$route.router 路由规则所属的路由器 this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空
v-model的使用？
简介
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，
也会在更新data绑定属性时候，更新页面上输入控件的值。
为什么使用v-model
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，
model层相互需要数据 交互，即可使用v-model。
简单使用
v-model与input输入框的搭配使用：
v-model=“data中定义的变量名”
作用在表单元素上：
动态绑定了input的value指向了message变量，并且触发input事件的时候去吧message设置为目标值。
作用在组件上：
v-on可以监听多个方法吗？
v-on可以监听多个方法。
<input type="text" v-on="{ input:onInput, focus:onFocus, blur:onBlur, }" >
v-on常用修饰符
.stop该修饰符将阻止事件冒泡 .prevent阻止默认事件 .self只会在出发自身的时候触发 .once只会触发一次。
vue中过滤器有什么作用及详解？
过滤器分为全局过滤器和局部过滤器，全局过滤器可以在任何组件调用，局部过滤器只能在当前组件调用，过滤器使用|管道符调用。可以串联使用。
过滤器使用：
全局过滤器vue.filter（”过滤器名称“，（）=>{}）; 局部过滤器 filter：{过滤器名字}
vue3.0中将过滤器移除了，使用“计算属性”进行代替。
EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？
vuex有哪几种属性？
- state
state：state类似容器，包含应用的大部分状态
一个页面只能有一个state 状态存储是响应式的 不能直接改变 state 中的状态，唯一途径显式地提交mutations
- mutations
mutations：更改store中的状态唯一方法就是提交mutation，它是同步的，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。更改 Vuex 的 state 中的状态的唯一方法是提交 mutation。回调函数可以接受两个参数，第一个参数是state状态，第二个参数是 mutation 的载荷就是外面store.commit 传入额外的参数。
mutations其实就相当于我们vue里面的methods，也是定义方法的，只不过这个方法可以在多个组件调用就是了。
使用mutations中的方法格式： this.$store.commit(‘名称’)
- getters
getters：相当于state的计算属性，从state派生出一些状态
- actions
actions：Action 类似于 mutation，不同在于：
action 提交的是 mutation，而不是直接变更状态；
action可以进行任何异步操作，mutation不可以；
- modules
modules：模块化管理，有多个state可以通过模块化import到index.js的module属性中，可直接进行调用。参考vue的组件化思想。
