vue-router导航守卫有哪些？
- 全局前置钩子：beforeEach、beforeResolve、afterEach
- 路由独享守卫：beforeEnter
- 组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
为什么Vue3.0采用了Proxy，抛弃了Object.defineProperty？
Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2是通过递归+遍历data对象来实现对数据的监控的。如果属性值也是对象那么就需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择。
Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。
V-for为什么要加key？
如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/服用相同类型元素的算法。key是Vue中vnode的唯一标记，通过这个key，可以让diff操作可以更准确、更快速。
如何从真实DOM到虚拟DOM？
涉及到Vue中的模板编译原理，主要过程：
- 将模板转换成ast树，ast用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）
- 优化树
- 将ast树生成代码
为什么Vue采用异步渲染？
Vue是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能，Vue会在本轮数据更新后，在异步更新视图。核心思想nextTick。
为什么Vue组件中的data必须是一个函数？
对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data也会被修改。而使用返回对象的函数，由于每次返回的都是一个新对象，引用地址不同，则不会出现这个问题。
MVC和MVVM的区别？
MVC
mvc全名是Model View Controller，是模型-视图-控制器的缩写，一种软件设计典范
- Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
- View（视图）：是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。
- Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据，
mvc的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话就是在Controller里面把Model的数据赋值给View。
MVVM
mvvm新增了vm类
- ViewModel层：做了两件事达到了数据的双向绑定，将模型转化成视图，即将后端传递额数据转化成所看到的页面。实现的方式是：数据绑定。将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。
mvvm与mvc的最大区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作DOM元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。
Vue data中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？
不会立即同步执行重新渲染。Vue实现响应式并不是数据发生变化后DOM立即变化，而是按一定的策略进行DOM的更新。Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
Vue的优点
- 轻量级框架，只关注视图层，是一个构建数据的视图集合
- 简单易学
- 双向数据绑定
- 组件化
- 视图、数据、结构分离，使数据的更改更为简单
- 虚拟DOM
- 运行速度更快
nextTick是什么？
Vue实现响应式并不是在数据发生变化后立即更新DOM，使用nextTick是在下次DOM更新循环结束之后立即执行延迟回调。在修改数据之后使用则可以在回调中获取更新后的DOM。
Vue的生命周期
- beforeCreate：实例初始化之后，数据观测之前调用
- created：实例创建完成之后调用
- beforeMount：挂载之前调用
- mounted：挂载完成调用
- beforeUpdate：数据更新之前调用
- updated：数据更新之后调用
- beforeDestroy：实例销毁之前调用
- destroyed：实例销毁之后调用
v-if和v-show的共同点和不同点？
共同点：都能控制元素的显示和隐藏。
不同点：v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过display:none来控制元素的显示和隐藏。
如何让CSS只在当前组件中起作用？
在组件中的style标签中加上scoped
<keep-alive></keep-alive>的作用是什么？
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
Vue中常用的指令和它的用法
- v-model 双向数据绑定
- v-for 循环
- v-if v-show 显示与隐藏
- v-on 绑定事件
- v-once 只绑定一次
vue-loader是什么？ 使用它的用途有哪些？
vue文件的一个解析器，将template、js、style转换成js模块。
用途：js可以写生es6，style样式可以scss或less，template可以加jade等。
v-model的使用
v-model用于表单数据的双向绑定，其实它就是一个语法糖，背后做了两个操作：v-bind绑定一个value属性，v-on指令给当前元素绑定input事件。
分别简述computed和watch的使用场景
computed：当一个属性受多个属性影响的时候就需要用到computed。
watch：当一条数据影响多条数据的时候就需要用watch。
v-on可以监听多个方法吗？
可以，用{}对象的写法。
渐进式框架的理解
主张最少，可以根据不同的需求选择不同的层级。
v-if和v-for的优先级
v-if和v-for一起使用时，v-for比v-if的优先级更高，这意味着v-if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。
Vue常用修饰符
- .stop 等同于JavaScript中的event.stopPropagation()，防止事件冒泡
- .prevent 等同于JavaScript中的event.preventDefault()，防止执行预设的行为（标签的默认行为）
- .capture 与事件冒泡的方向相反，事件捕获由外到内
- .self 只会触发自己范围内的事件，不包含子元素
- .once 指挥触发一次
Vue的两个核心点
数据驱动，组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件书构成的。
SPA首屏加载慢如何解决？
安装动态懒加载所需插件，使用动态懒加载。使用CDN资源。
axios的特点有哪些？
- 支持Promise API
- 可以拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动换成json
封装Vue组件的过程？
- 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。
- 准备好组件的数据输入。即分析好逻辑，定好props里面的数据，类型。
- 准备好组件的数据输出。即根据组件逻辑，做好要暴漏出来的方法。
params和query的区别
query在浏览器中显示参数，params不显示参数。query刷新页面之后不会丢失数据。params刷新页面会丢失数据。
Vue初始化页面闪动的问题
在Vue初始化之前，由于div是不归Vue管的，所有在代码还没有解析的情况下会容易出现花屏现象。
解决方案：在css里加上 [v-cloak] { display:none }，如果没有彻底解决问题，则在根元素加上加上 style="display:none"
Vue更新数组是触发视图更新的方法
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
什么是Vue生命周期？ 有什么作用？
每个Vue实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这个用户在不同阶段添加自己代码的机会，方便用户做一些逻辑处理。
$route和$router的区别
$router是VueRouter的实例，在script标签中想要导航到不同的URL，使用$router.push方法等。
$route为当前router跳转对象，里面可以获取到当前路由的各种参数信息。
VueX有哪几种属性？
有5中，分别是state、getter、mutation、action、module
- state：基本数据，数据源存放地
- getters：从基本数据派生出来的数据
- mutations：提交更改数据的方法，同步更新
- action：像一个装饰器，包裹mutations，实现数据的异步更新
- modules：模块化VueX
评论 (0)