vue基础总结

1.vue的好处：响应式编程 组件化开发
1）优势：轻量级框架 简单易学 数据双向绑定
2.MVVM的定义
MVC是Model-View- Controller的简写。即模型-视图-控制器。
M和V指的意思和MVVM中的M和V意思一样。
C即Controller指的是页面业务逻辑。
使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。
也就是View跟Model，必须通过Controller来承上启下。
MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，
而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。
也就是说MVVM实现的是业务逻辑组件的重用
在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图viewModel:指的是vue实例化对象
3.vue中有哪些钩子函数，作用是什么
1）初始化前 --BeforeCreated
2）初始化完成 —***：发送ajax --created //比较常用
3）双向数据绑定前 —BeforeMount
4）双向数据绑定完成 --Mounted
5）更新前 --BeforeUpdate
6）更新完成–updated
7）销毁前–BeforeDestroyed
8）销毁完成–Destroyed
4.vue中数据渲染的时候如何保证原样输出
1）v-text:将数据输出到元素内部，如果有html代码，会作为普通文本输出
2）v-html:将数据输出到元素内部，如果有html代码，会被渲染
3）{{}}插值表达式，可以直接获取Vue实例中定义的数据或函数
使用插值表达式的时候，值可能闪烁；而使用v-html、v-text不会闪烁，有值就显示，没值就隐藏
5.vue中methods和computed有什么区别？应用场景如何
1）1.methods：方法，函数，绑定事件调用；不会使用缓存
2）computed： 计算属性 本质是方法，使用时可以像属性一样使用，当操作的值没有发生改变时，会使用缓存，当值发生改变，才会改变；提高速度
6.vue中如何处理原生的DOM事件
通过v-on，简写@的方式定义事件 @click、@mouseover、@mouseout、@change、@keyup、@keydown…
并绑定函数
7.vue中如何组织冒泡事件
事件.stop,例如：@click.stop="" ,@mouseover.stop=""
8.vue中父子组件如何通信
1）父向子通信：props
2）子向父传值：无法直接传值，只能通过子类调用父类的方法，使用方法的参数传值
在子组件的方法中通过$.emit("outshow",num)传值，第一个参数是父组件中的方法名，第二个参数是父组件中该方法的参数补充：组件中的兄弟组件如何通信：1）兄弟组件数据通讯除了借助共同的父组件做为通讯桥梁之外，还可以通过eventBus来让兄弟之间组件进行数据通讯\ast \ast 9.vue中有哪些指令\ast \ast v-ifv-elsev-forv-textv-htmlv-modelv-on简写@v-bind简写:\ast \ast 10.this.$router与this.$route的区别\ast \ast 1）this.$route:当前活跃的路由
2）this.$router:VueRouter的实例\ast \ast 11.axios解决跨域问题\ast \ast 1）axios封装的实例中配置baseURL为请求的api的公共部分2）vue3.0在vue.config.js中配置proxy配置\ast \ast 12.vuex+localStorage保存token\ast \ast 1）token发生变化，修改state中的值，保存到localStorage中\ast \ast 13.v-show与v-if的区别\ast \ast 1）共同点：都能控制元素的显示和隐藏。2）不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。3）总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）\ast \ast 14.v-if与v-for的优先级\ast \ast v-for的优先级高于v-if\ast \ast 15.vue的生命周期\ast \ast \ast \ast 16.created与mounted的区别\ast \ast 1）在created阶段，对浏览器来说，渲染整个HTML文档时,dom节点、css规则树与js文件被解析后，但是没有进入被浏览器render过程，上述资源是尚未挂载在页面上，也就是在vue生命周期中对应的created阶段，实例已经被初始化，但是还没有挂载至$el上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的
2）在mounted阶段，对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，
而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，
所以在这个阶段，即可以调用节点了。
17.为什么使用key
1）当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，
而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
2）这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id
18.watched在属性首次赋值的时候是否可以监听
首次进入就需要监听，使用immediate：true来实现；监控复杂数据类型，需要用到深度监听deep: true。
19.computed与watched的区别
1）计算属性computed :
1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法
2）侦听属性watch：
1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
　　 immediate：组件加载立即触发回调函数执行，
　　 deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。
注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
20.组件中data为什么是函数类型
1）组件中的data写成一个函数，数据以函数返回值形式定义，这样每用一次组件，就会返回一份新的data，
相当于给每个组件都分配了独立的数据空间，每个组件都有自己数据，不互相受影响。
2）如果不是数组组件，那数据就是公用的，如果有一个组件改变了数据，那就会引起所有的组件的数据进行改变
21.promise的构造方法是同步执行的还是异步执行的，then是同步执行的还是异步执行的
promise构造函数是同步执行的，then方法本身是同步执行，then方法中的内容加入微任务异步执行。
22.router中history与hash的区别
1）hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误
2）history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误