正确答案是BObject.defineProperty(obj,key,val)不可以监听数组变化，需要做特殊处理，所以Vue3.0使用Proxy实现数据监听。

正确答案是BC绑定事件有两种方式：第一种，通过v-on指令二种，通过@语法糖

正确答案是C定DOM属性的指令是v-bind

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现time-travel了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。action可以进行一系列的异步操作，并且通过提交mutation来记录action产生的副作用（即状态变更）。

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块。

vue2vsvue3双向绑定更新vue2的双向数据绑定是利⽤ES5的⼀个API，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了ES6的ProxyAPI对数据代理，通过reactive()函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。这⾥是相⽐于vue2版本，使⽤proxy的优势如下1.defineProperty只能监听某个属性，不能对全对象监听可以省去forin、闭包等内容来提升效率（直接绑定整个对象即可）2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。实例化Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实⽆论你⽤到还是没⽤到，都会跑⼀遍，这样不仅提⾼了性能消耗，也⽆疑增加了⽤户加载时间。而vue3.0中可以⽤ESmoduleimports按需引⼊，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了⽤户加载时间，优化⽤户体验。生命周期引用掘金图片如下：获取propsvue2在script代码块可以直接获取props，vue3通过setup指令传递vue2：console.log(‘props’,this.xxx)vue3：setup(props,context){console.log(‘props’,props)}数据和方法的定义Vue2使⽤的是选项类型API（OptionsAPI），Vue3使⽤的是合成型API（CompositionAPI）Vue2：data(){return{};},methods:{}Vue3：数据和⽅法都定义在setup中，并统⼀进⾏return{}给父组件传值emitvue2：this.$emit()vue3：setup(props,context){context.emit()}watchEffectVue3中除了watch，还引入了副作用监听函数watchEffect，用过之后我发现它和React中的useEffect很像，只不过watchEffect不需要传入依赖项。那么什么是watchEffect呢？watchEffect它会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect相当于将watch的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于watch的是watchEffect的回调函数会被立即执行，即（{immediate:true}）。组件通信注意props中数据流是单项的，即子组件不可改变父组件传来的值在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。attrs和listeners子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性(class和style)之外的所有属性。子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器路由vue3和vue2路由常用功能只是写法上有些区别：vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的；大家都知道setup中组件实例已经创建，是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的，此时组件还未创建，所以是无法用在setup中的；如果想在setup语法糖中使用则需要再写一个script如下：<script>exportdefault{beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},};</script>vue3路由写法：<script>import{defineComponent}from'vue'import{useRoute,useRouter}from'vue-router'exportdefaultdefineComponent({beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),setup(){constrouter=useRouter()constroute=useRoute()consttoPage=()=>{router.push(xxx)}//获取params注意是routeroute.params//获取queryroute.queryreturn{toPage}},});</script>vue2写法：<script>exportdefault{beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),methods:{toPage(){//路由跳转this.$router.push(xxx)}},created(){//获取paramsthis.$route.params//获取querythis.$route.query}}</script>

setup()钩子是在组件中使用组合式API的入口，通常只在以下情况下使用：1.需要在非单文件组件中使用组合式API时。2.需要在基于选项式API的组件中集成基于组合式API的代码时。其他情况下，都应优先使用<scriptsetup>语法。（1）ref创建值类型响应式数据方法在seup内部需要.value来访问设置值（2）reactive创建引用类型响应式数据方法（3）defineProps定义组传的传参props（4）defineEmits定义组件发送的事件（5）watch监听一个数据的变化（6）watchEffect监听多个数据（7）生命周期setup中的生命周期，没有beforeCreate与createdsetup的生命周期需要加on前缀

vue中的指令按照不同的用途可以分为6大类(1)内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个v-text:会覆盖元素默认内容<pv-text="username"></p>v-html:渲染带标签的内容,并实现标签样式,会覆盖元素默认内容<divv-html="属性"></div>(2)属性绑定指令v-bind:(简写英文:):为元素的属性动态绑定属性值,单向绑定(数据源影响DOM变)支持绑定简单的数据值<imgsrc=""v-bind:placeholder="tips">支持绑定js表达式的运算<div:title="'box-'+index">div盒子</div>字符串需加''(3)事件绑定指令v-on:(简写@):为DOM元素绑定事件监听处理函数写在实例对象的methods属性下<button@click="add()">点击</button>()可传参原生DOM对象onclick,oninput,onkeyup等原生事件,替换为@click,@input,@keyup$eventvue提供的特殊变量,表原生的事件参数对象event,可解决事件参数对象event被覆盖的问题(点击按钮变色问题)事件修饰符方便对事件的触发控制<ahref=""@click.prevent=""></a>按键修饰符监听键盘事件时,判断详细的按键,可为键盘相关的事件添加按键修饰符e.g:<input@keyup.enter="submit">只有按键Enter时,调用submit()(4)双向绑定指令v-model:双向数据绑定指令,不操作DOM的前提下,快速获取表单的数据(5)条件渲染指令按需控制DOM的显示与隐藏v-if:动态创建或移出实现元素显示与隐藏,有更高的切换开销,在运行时条件很少改变,使用较好(e.g:刚进入页面时,某些元素默认不需要被展示,后期也不需展示)v-show:动态为元素添加或移除style="display:none;"样式实现显示与隐藏,有更高的初始渲染开销,需要非常频繁地切换,使用较好v-else必须配合v-if指令一起使用,否则不会被识别v-else-if必须配合v-if指令一起使用,否则不会被识别(6)列表渲染指令v-for:基于一个数组来循环渲染一个列表结构使用iteminlist形式特殊语法(item待循环数组,item被循环的每一项);用索引时(item,index)inlist,item项和index索引都是形参,可重命名使用key维护列表状态官方建议,使用v-for必须绑定属性key,且值通常为id当列表的数据变化时,默认情况下,vue会尽可能的复用已存在的DOM元素,从而提升渲染的性能.但这种默认的性能优化策略,会导致有状态的列表无法被正确更新为给vue一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能,需要为每项提供一个唯一的key属性e.g:<trv-for="(item,index)inlist":key="item.id":title="index+item.uname">key的注意事项key的值只能是字符串或数字类型key的值必须具有唯一性（即：key的值不能重复）建议把数据项id属性的值作为key的值（id属性的值具有唯一性）使用index的值当作key的值没有任何意义（index的值不具有唯一性,与每一项无强制关系）建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）

$route对象：$route对象表示当前的路由信息，包含了当前URL解析得到的信息。包含当前的路径，参数，query对象等。1.$route.path字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。2.$route.params一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。3.$route.query一个key/value对象，表示URL查询参数。例如，对于路径/foo?user=1，则有$route.query.user==1，如果没有查询参数，则是个空对象。4.$route.hash当前路由的hash值(不带#)，如果没有hash值，则为空字符串。锚点*5.$route.fullPath完成解析后的URL，包含查询参数和hash的完整路径。6.$route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。7.$route.name当前路径名字8.$route.meta路由元信息$router对象：$router对象是全局路由的实例，是router构造方法的实例。实例方法：1、push1.字符串this.$router.push('home')2.对象this.$router.push({path:'home'})3.命名的路由this.$router.push({name:'user',params:{userId:123}})4.带查询参数，变成/register?plan=123this.$router.push({path:'register',query:{plan:'123'}})push方法其实和<router-link:to="...">是等同的。注意：push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。2、go页面路由跳转前进或者后退this.$router.go(-1)//后退3、replacepush方法会向history栈添加一个新的记录，而replace方法是替换当前的页面，不会向history栈添加一个新的记录