Vue基础知识

---

前言

前端Vue的一些基础知识整理

---

一、Vue基础知识

1.为何v-for要用key：

快速查找到节点，减少渲染次数，提升渲染性能。当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if
的条件将无法访问到 v-for 作用域内定义的变量别名：

2.双向数据绑定v-model的实现原理：

双向数据绑定最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的。先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。

3.监听和v-on之间是否存在某种关联性？

是的，监听和v-on之间存在关联性。v-on是Vue.js中的指令之一，用于监听DOM事件并执行相应的处理函数。当使用v-on指令时，Vue.js会将DOM事件绑定到对应的Vue实例上，并在事件触发时执行相应的处理函数。
在Vue.js中，可以使用监听器（watcher）来监听数据的变化，当数据发生变化时，监听器会自动执行相应的操作。监听器主要用于处理数据变化时的复杂逻辑，例如数据的异步请求、数据的计算等。因此，Vue.js中的监听器和v-on指令都是用于监听某些事件的发生，并在事件发生时执行相应的操作。虽然它们的作用略有不同，但在实际使用中常常会一起使用。

4.对mvvm的理解

m->model,v->view,vm->viewModel。dom通过监听事件操作vue里的data，反之vue中的data通过指令操作dom，这就是所说数据驱动视图，这就是mvvm的理解。
MVVM即Model-View-ViewModel，将其中的 View 的状态和行为抽象化，让我们可以将UI和业务逻辑分开。MVVM的优点是低耦合、可重用性、独立开发。以下是步骤：
1.View 接收用户交互请求
2.View 将请求转交给ViewModel
3.ViewModel 操作Model数据更新
4.Model 更新完数据，通知ViewModel数据发生变化
5.ViewModel 更新View数据

5.何时使用keep-alive

缓存组件不需要重复渲染，多个静态tab页切换，优化性能

6.Vue-router 导航守卫有哪些

全局前置/钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
完整的导航解析流程如下：
1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

7.何时使用beforeDestroy

1.解绑自定义事件event.$off
2.清除定时器

8.vue常见性能优化方式

1.合理使用v-if和v-show，
2.合理使用computed，
3.v-for加key，
4.自定义事件，dom事件及时销毁，
5.合理使用异步组件，
6.合理使用keepalive，
7.data层级不要太深，
8.使用vue-loader在开发环境做模板编译，
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
10.使用ssr

9.Vuex页面刷新数据丢失咋解决这个bug

问题：F5页面刷新，页面销毁之前的资源，重新请求，因此写在生命周期里的vuex数据是重新初始化，无法获取的，这也就是为什么会打印出空的原因。
解决思路1：
使用Localstorage sessionStorage 或cookie
实际使用时当vuex值变化时，F5刷新页面，vuex数据重置为初始状态，所以还是要用到localStorage,
解决方法2:
插件vuex-persistedstate

10.vue页面级组件之间传值

1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值

11.$route和 $router的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

12.vue组件中data为什么函数返回一个对象

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data。如果单纯的写成对象形式，就使得所有组件实例共用了一份data，造成了数据污染。

13.computed与watch的区别

1、computed能做的，watch都能做，反之则不行
2、能用computed的地方，尽可能使用computed
3、computed是计算一个新的属性，并将该属性挂载到vm（Vue实例）上，而watch是监听已经存在并且已挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（其它还有data,props）
4、computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数
5、从使用场景上说，computed适用一个数据被多个数据影响，而watch适用于一个数据影响多个数据

14. Vue 中 v-html 会导致什么问题

在网站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内容上使用 v-html，且永远不能用于用户提交的内容上。

15.vue常用的修饰符

.stop - 调用 event.stopPropagation()，禁止事件冒泡。
.prevent - 调用 event.preventDefault()，阻止事件默认行为。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
v-model 指令常用修饰符：
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤

16. vue封装组件怎么封装？

首先，使用Vue.extend()创建一个组件。
然后，使用Vue.component()方法注册组件。
接着，如果子组件需要数据，可以在props中接受定义。
最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法。

17. Vue封装组件有哪些注意点或者原则？

1.用数据描述所有的内容
2.数据要结构化，易于程序操作，遍历，查找
3.数据要可扩展，以便增加新的功能
4.从功能上拆分层次
5.尽量让组件原子化，一个组件只做一件事情
6.容器组件（只管数据，一般是顶级组件）和展示组件（只管显示视图）