1.谈谈你对vue的了解
| vue的作者是尤雨溪，2013年受angular启发，开发出比angular更轻的seed框架，2014正式对外发布。 |
| -vue是一套用于构建用户界面的渐进式javascript框架。 |
| -渐进式可以理解为自底层向上逐层的应用,（从简单的应用递进到复杂应用） |
| -简单应用:只需要一个轻量级小巧的核心库 |
| -复杂应用:可以引入各式各样的vue插件 |
| -vue特点 |
| -采用组件化模式，提高代码复用率、让代码更简洁。 |
| -声明式编码，无需直接操作dom，提高开发效率。 |
2.数据双向绑定(数据代理)
| -通过vm对象来代理data对象中的属性操作(读/写) |
| -更加方便的操作数据 |
| -原理：通过object.defineProperty()把data对象中的所有属性添加到vm实例上，然后为每一个添加到vm实例上的属性，都指定一个getter和setter，在getter/getter内部去操作(读/写)data中对应的属性。 |
3.对mvvm的理解
| 是model-view-viewmodel的缩写，是一种结构模式(设计思想) |
| model是数据模型，用于对数据的定义和修改等操作。 |
| view是ui视图层，用于渲染页面。 |
| viewModel：负责监听model中数据的改变并控制属兔更新，处理用户交互操作。 |
| 修改View层，Model对应数据发生变化 |
| Model数据变化，不需要查找DOM，直接更新View |
4.修饰符
| 事件修饰符（可以连续使用） |
| -.prevent阻止默认行为 |
| -.stop阻止冒泡 |
| -.once事件触发一次 |
| -.capture使用事件的捕获模式 |
| -.self只有event.target是当前操作的元素才会触发事件 |
| -.passive事件默认行为立即执行，无需等待事件回调执行完毕。 |
| 键盘修饰符keydown keyup |
| -enter回车 |
| -delete删除/退格 |
| -esc退出 |
| -space空格 |
| -tab换行 |
| -up上 |
| -down下 |
| -left左 |
| -right右 |
| -vue未提供别名的按键，可以使用按键原始的key值去绑定，注意要转为kebab-case(短横线命名caps-lock) |
| -系统修饰键：ctrl、alt、shift、meta |
| -配合keyup使用:按下修饰键的同时再按下其他键，随后释放其他键，事件才会被触发 |
| -配合keydown使用：正常触发事件。 |
| -使用keyCode去指定具体按键 |
| -Vue.config.keyCodes.自定义键名=键码，可以定制按键别名 |
5.计算属性与监听属性
| 计算属性： |
| -get、set属性，底层借助了object.defineproperty方法提供的getter和setter。 |
| -当读取计算属性里的值时，get会被调用，初次读取值或者所依赖的数据发生改变时都会被调用。 |
| -有缓存，只有所依赖的数据发生改变时缓存的值才会更新。 |
| -当计算属性的值被直接修改时会执行set |
| 监听属性 |
| -当监视属性变化时，回调函数自动调用，进行相关操作。 |
| -监听属性有两种写法:new Vue里传入watch配置或者通过vm.$watch()监听。 |
| -有handler函数，其身上有旧值与新值(newValue,oldValue) |
| -没有缓存 |
| -检测data里的属性，也可以监听计算属性里的值 |
| -默认不检测对象内部值的改变，可配置deep:true开启深度监听 |
| 区别 |
| -componted无法开启异步任务，watch可以开启异步任务 |
| -componted有缓存机制，watch没有缓存机制 |
| -componted可以完成的功能watch都可以完成，而watch完成的功能componted不一定能完成 |
| -componted的计算结果受其依赖属性的影响，watch的改变可以影响依赖属性。 |
6.v-if和v-show的区别
| -v-show是通过dispaly的属性值来控制元素的显示与隐藏，隐藏后dom元素节点还存在。 |
| -v-if则是通过元素节点的创建与销毁来实现元素的显示与隐藏，隐藏后dom元素节点不存在。 |
| -v-show适用于切换频率比较频繁的场景。 |
| -v-if适用于切换频率比较低的场景。 |
7.v-for中key的作用
| -虚拟dom中，key是唯一标识，当状态中的数据发生变化时，vue会根据新数据生成新的虚拟dom，随后新的虚拟dom与旧的虚拟dom进行差异比较(diff算法)。 |
| -新虚拟dom与旧虚拟dom是通过key进行比较的，如果虚拟dom内容没有发生改变，直接复用之前的真实dom，如果虚拟dom中的内容发生了变化，则生成新的真实dom，随后替换掉页面中对应的旧的真实dom。 |
| -用index索引作为key的话，如果对数据进行逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实dom更新，降低效率，如果还有输入类的dom时，会导致界面渲染错误。 |
| -最好将每条数据的唯一标识作为key，如果不存在逆序操作，仅用于列表渲染，可以使用index作为key。 |
8.vue是如何检测数据的原理(响应式)
| <script> |
| let data={ |
| name:'xxx', |
| address:'xxx' |
| } |
| //创建一个监视的实例对象 |
| const obs=new Observer(data); |
| //vm实例对象 |
| let vm={}; |
| vm._data=data=obs; |
| function Observer(obj){ |
| //汇总对象中的所有属性形成一个数组 |
| const keys=Object.keys(obj); |
| keys.forEach((k)=>{ |
| //this指的是Observer |
| Object.defineProperty(this,k,{ |
| get(){ |
| return obj[k]; |
| }, |
| set(val){ |
| obj[k]=val; |
| } |
| }) |
| }) |
| } |
| </script> |
| -vue会监视data中所有层次的数据 |
| -通过setter实现监视，且在new Vue时就传入需要检测的数据。 |
| -对象中后添加的属性，vue不做响应式处理，可以使用Vue.set(target,index,value)或者this.$set() |
| -对于数组中的数据，默认不监听，可以通过vue提供的push、pop、shift、unshift、splice、sort、reverse对数组的方法进行包装后实现响应式。 |
9.生命周期
| beforeCreate:实例创建之前，初始化事件和数据，无法访问data中的数据和methods中的方法。数据代理未开始 |
| created:实例创建完成，数据和事件已初始化完成，可以访问到data中的数据和methods里的方法。数据监测、数据代理 |
| beforeMounte:实例挂在之前，虚拟dom以准备好，还没有生成真实dom，页面还没有被渲染，对所有的dom操作最终都不生效。 |
| mounted:实例挂载之后，生成了经过vue编译的真实dom，页面被渲染，对dom的操作均有效，初始化过程结束，一般在此开启定时器、发送网络请求、订阅消息、绑定自定义事件等操作。 |
| beforeUpdate:页面更新之前，此时数据是最新的，页面还是旧的，页面和数据尚未保持同步。 |
| updated:页面更新之后，数据时新的，页面也是新的，数据和页面保持同步，完成了model-view的更新。 |
| beforeDestory:实例销毁之前，data里的数据和methods的方法、指令等都可以使用，但操作数据不会触发更新流程，一般在此关闭定时器、解绑自定义事件、取消订阅等操作。 |
| destory:实例销毁之后，自定义事件会失效，但原生的dom事件依然有效。 |
| 使用keep-alive缓存后会有路由组件独有的生命周期钩子 |
| actived:被缓存的组件被激活(显示)时使用 |
| deactivated:被缓存的组件失活(隐藏)时使用 |
| 特殊的生命周期钩子 |
| $nextTick():在页面下次更新渲染时执行 |
10.vue中，组件化中data为什么是函数
| -避免组件被复用时，数据存在引用关系。 |
| -vue组件可能存在多个实例，如果使用对象形式，会导致多个组件共用一个data，从而使一个组件影响其他组件。 |
| -如果用函数定义，会返回一个全新的对象，避免了组件间之间data的相互影响。 |
11.组件的创建过程
| -组件的本质是一个VueComponent的构造函数，是Vue.extend生成的。每次调用Vue.extend返回的都是一个新的VueComponent。 |
| -非单文件组件 |
| -使用Vue.extend({})创建组件 |
| -在vue实例对象中注册组件components:{},(全局组件Vue.component()和局部组件) |
| -使用组件 |
| -单文件组件 |
| -创建组件文件.vue |
| -使用import引入组件 |
| -在components里注册组件 |
| -使用标签形式使用组件 |
12.vue脚手架中目录分别是什么意思
| -.gitignore git的忽略文件 |
| -babel.config.js babel的配置文件(babel是控制es6转es5) |
| -package-lock.json 包说明书的缓存文件，用于锁定版本 |
| -package.json 包的说明书 |
| -README.md笔记 |
| -src |
| -mian.js 整个项目的入口文件 |
| -assets一般存放静态资源，png、视频等 |
| -App.vue跟组件 |
| -components存放除app.vue外的其他组件 |
| -public |
| -ico图标 |
| -index.html |
| -node_modules存放第三包的文件夹 |
| render(createElement){ |
| return createElement('h1','xxxx') |
| } |
13.浏览器的本地存储
| -localStorage 浏览器窗口关闭内容不会消失，存储大小一般为5mb，setItem、getItem、remove、clear等api，持久化存储，需要手动清除才会消失，getItem获取不到对应的value会返回null。 |
| -sessionStorage 浏览器窗口关闭，存储的数据会清空，setItem、getItem、remove、clear。 |
| -cookie是一种浏览器管理状态的一个文件，它有name、value，Domain、path等等，数据大小不能超过 4K，是服务器向浏览器发送的一小块数据，不可以跨域请求。设置的cookies过期时间之前一直有效，即使窗口和浏览器关闭，数据会自动地传递到服务器，服务器也可以写cookies到客户端 |
14.vue组件之间传值
| -父组件传值子组件 |
| props |
| f:<demo :str="str"></demo> |
| -子组件传父组件 |
| 自定义事件的$emit |
| f:<demo @str="str"></demo> |
| methods:{ |
| demo(e){} |
| } |
| c:methods:{ |
| handler(){ |
| this.$emit('str',this.obj) |
| } |
| } |
| 通过refs中的$on |
| f:<demo ref="str"></demo> |
| mounted:{ |
| this.$refs.str.$on('handler'，回调函数) |
| } |
| -兄弟组件传值 |
| vuex |
| 全局事件总线$bus |
| main.js |
| new Vue({ |
| render:h=>h(App), |
| beforeCreated(){ |
| //安装全局事件总线 |
| Vue.prototyp.$bus=this |
| } |
| }).$mount() |
| 在组件中通过this.$bus.$emit('xxx',data)提供数据，通过this.$bus.on('xxx',(data)=>{})获取数据。 |
| 消息订阅与发布 |
| 安装pubsub-js |
| 引入pubsub-js |
| 订阅消息用pubsub.subscribe('xxx',data) |
| 发布消息pubsub.publish('xxx',(msgNmae,data)=>{}) |
14.nextTick
| this.$nextTick() |
| -作用：在下一次dom更新结束之后执行指定回调 |
| -什么时候调用：当改变数据后，要基于更新后的新dom进行某些操作时 |
15.vue解决跨域
| 只有浏览器才存在跨域 |
| -cors后端配置响应头，真正意义上的解决跨域 |
| -jsonp立勇<script>的src属性，需要前后端配合，并且只能解决get请求的跨域。 |
| -配置代理服务器 |
| 1.nginx |
| 2.利用vue-cli |
| -devServer:{proxy:'目标服务器地址'},请求是axios.get('代理服务器地址/xxx/xxx/xx').then((res)=>{},(err)=>{}).cath() |
| -devServer:{ |
| proxy:{ |
| '/api':{ |
| target:'目标服务器地址', |
| pathRewrite:{'^/api':''} |
| } |
| } |
| } |
| axios.get('代理服务器地址/api/xxx/xxx/xx').then((res)=>{},(err)=>{}).cath() |
16.插槽
| 插槽是让父组件向子组件指定位置插入html结构，也是一种组件通信的方式。 |
| -默认插槽/不具名插槽 |
| c:<solt><solt> f:<child>xxxxxx</child> |
| 子组件中只能定义一个插槽模块 |
| -具名插槽 |
| c:<solt name="demo"></solt> f:<child><div solt="demo">xxx</div></child> |
| 在使用<template></template>标签时可写成 |
| f:<child><template v-solt:demo>xxx</template></child> |
| -作用域插槽 |
| c:<solt :a='b'></solt> |
| f:<template scope='c'></template> |
| 或<template slot-scope='c'></template> |
| 作用域插槽是数据在插槽子组件时，无法在插槽使用者父组件中获取得到数据，可以用scope来传递数据，接收时必须用template标签包裹结构。 |
17.vuex
| -vuex是专门在vue中实现集中式状态(数据)管理的vue插件，对vue中多个组件共享状态进行集中式的管理(读/写)。适用于任意组件通信。 |
| -state |
| 存储vue中需要共享的状态(数据)，只能在mutations中修改，被修改后会自动更新使用的组件页面。 |
| -actions |
| 提交异步请求，组件通过this.$store.dispatch('行为','值')，可在这里发送请求,之后可以通过commit('行为','值')来提交给mutations，如果不需要向服务器发送请求，可以在组件中通过this.$store.commit('行为','值')来直接提交到mutations里。 |
| xxx(conText,value){ |
| conText.commit('XXX',value) |
| } |
| -mutations |
| 同步操作，可以在此修改state里的值，行为(state,'值'){} |
| XXX(state,value){ |
| |
| } |
| -getters |
| state的计算属性，可以在此对state的数据进行加工 |
| xxx(state){ |
| return xxxx |
| } |
| -module |
| new Vuex.Store({ |
| modules:{ |
| a:xxx, |
| b:xxx |
| } |
| }) |
| computed:{ |
| ...mapState('a',['xxx']) |
| } |
| 需要在每个模块里写namespaced:true |
| -import {mapState} from 'vuex' |
| computed:{ |
| ...mapState({a:'xxx',b:'xx'}) |
| 或...mapState(['xxx','xx']) |
| } |
18.路由
19.路由传参
| -使用router-link时 |
| query传参:<router-link :to="/xxx/xxx?id=xx&name=xxx"></router-link> |
| <router-link :to="{ |
| path:'/xxx/xx', |
| query:{ |
| id:xxx, |
| name:xxx |
| } |
| }">跳转</router-link> |
| 使用this.$route.query.id获取 |
| params传参 |
| <router-link :to="/xxx/xxx/001/sddf"></router-link> |
| <router-link :to="{ |
| name:'asd', |
| params:{ |
| id:xxx, |
| name:xxx |
| } |
| }"></router-link> |
| -router.js |
| { |
| name:'asd', |
| path:'xxxx/:id/:name', |
| component:Detail |
| } |
| 接收参数this.$route.params.id |
| -使用params传参时，若是对象写法，需要在router.js中配置响应的name属性，并且需要占位。 |
| -使用编程式路由导航 |
| this.$router.push({ |
| name:'xxx', |
| params:{ |
| id:xxx, |
| title:xxx |
| } |
| }) |
20.keep-alive
| -使路由组件在切换时不被销毁 |
| -包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染 |
21.路由守卫
| 对路由进行权限控制 |
| router.beforeEach：全局前置路由守卫，to：目标路由，from：来源路由，next():放行；自定义参数需要配置在路由元信息(meta)里配置，用来控制权限。 |
| router.afterEach():全局后置路由守卫，可用于动态更改页面标题。 |
| beforeEnter():单个路由配置，路由独享守卫，对某一个路由进行权限设置。 |
| beforeRouteEnter():组件内置守卫，通过路由规则，进入组件之前调用。 |
| beforeRouteLeave():组件内置守卫，通过路由规则，离开组件之前调用。 |
22.路由的hash和history
| hash:路径中带#，其#后面的参数不会做为路径的一部分发给服务器;若地址通过第三方手机app分享，若app校验严格，地址会被标记为不合法，兼容性比较好。 |
| history:路径中带/,后面的参数不会做为路径的一部分发给服务器；兼容性略差，需要后端去解决页面刷新出现404的问题。 |
23.vue3的优点
| -性能提升 |
| 打包大小减少41% |
| 初次渲染快55%，更新渲染快133% |
| 内存减少54% |
| -源码升级 |
| 使用proxy代替defineproperty实现响应式 |
| 重写虚拟dom的实现和剔除多余代码(tree-shaking) |
| -vue3可以更好的支持typescript |
| -新特性 |
| composition API(组合api) |
| setup配置 |
| ref与reactive |
| 新的内置组件 |
| fragment |
| teleport |
| 新的生命周期钩子 |
| 移除keycode支持作为v-on的修饰符 |
| data始终是一个函数 |
24.watchEffect函数和computed的区别
| -computed：是计算函数，注重计算出来的值，所以必须写返回值 |
| -watchEffect：是监视函数，注重过程，不用写返回值 |
