肖小雨
肖小雨

vue相关知识点

1、生命周期

vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

vue生命周期可以分为八个阶段，分别是：
beforeCreate（创建前） 在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。

created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

vue相关知识点_第1张图片

2、mvvm

1、MVVM是什么？

MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下：
Model代表数据模型：主要用于定义数据和操作的业务逻辑。View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

MVVM和MVC的区别

MVC的定义：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的实现原理：**vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

实现结构图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AI3I1Thb-1616335124713)(C:/Users/hffxy/AppData/Roaming/Typora/typora-user-images/image-20210306145017802.png)]

2.1解释下 Object. defineProperty()方法

答案：这是 js 中一个非常重要的方法，ES6 中某些方法的实现依赖于它，VUE 通过它实现双向绑定，此方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

语法:

Object. defineProperty(object, attribute, descriptor)

  • 这三个参数都是必输项
  • 第一个参数为 目标对象
  • 第二个参数为 需要定义的属性或者方法
  • 第三个参数为 目标属性所拥有的特性

descriptor

前两个参数都很明确，重点是第三个参数 descriptor， 它有以下取值

  • value: 属性的值
  • writable: 属性的值是否可被重写（默认为 false）
  • configurable: 总开关，是否可配置，若为 false, 则其他都为 false（默认为 false）
  • enumerable: 属性是否可被枚举（默认为 false）
  • get: 获取该属性的值时调用
  • set: 重写该属性的值时调用
2、MVVM优点

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：

1.低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

2.可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

3.独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码

4.可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

3、浅谈Vue和React的区别

1.react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。

react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。

2.vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

4、vue-router是什么

路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件。路由模块的本质 就是建立起url和页面之间的映射关系。组件包括 router-link和 router-vIew。

vue-router实现原理：SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

vue-router的两种模式区别以及使用注意事项

[Vue Router]是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式。
hash模式:
hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。

window.onhashchange = function(event){
    console.log(event);
  }

hash模式：浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表 的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。
history模式 ：HTML5，History interface提供了两个新的方法：
pushState()：浏览器不会向服务端请求数据，直接改变url地址，可以类似的理解为变相版的hash；但不像hash一样，浏览器会记录pushState的历史记录，可以使用浏览器的前进、后退功能作用。
replaceState()：不同于pushState，replaceState仅仅是修改了对应的历史记录

调用 history.pushState() 相比于直接修改 hash，存在以下优势：

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 #后面的部分，因此只能设置与当前 URL 同文档的 URL；
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
pushState() 可额外设置 title 属性供后续使用。

怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？

答案：在 router 目录下的 index. js 文件中，对 path 属性加上/:id。 使用 router 对象的 params. id

active- class是哪个组件的属性？

它是 vue-router模块的 router-link组件的属性，用来做选中样式的切换。

4.1导航钩子有哪些？它们有哪些参数？

导航钩子又称导航守卫，又分为全局钩子、单个路由独享钩子和组件级钩子。

全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

//全局钩子
//定义一个路由
const router = new VueRouter({ ... })

// 点击导航前调用
router.beforeEach((to, from, next) => {
  // ...
})
// 点击导航后调用
router.afterEach(route => {
  // ...
})

单个路由独享钩子有 beforeEnter。

组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它们有以下参数。

  • to：即将要进入的目标路由对象。
  • from：当前导航正要离开的路由。
  • next：一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

5、computed和watch的区别

computed：
计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存
watch：
类似于数据改变后的回调。如果想深度监听的话，后面加一个deep:true
如果想监听完立马运行的话，后面加一个immediate:true

6、v-if 和 v-show的区别

v-show与v-if都是条件渲染指令。不同的是，无论v-show的值为true或 false，元素都会存在于HTML页面中；而只有当v-if的值为true时，元素才会存在于HTML页面中。v-show指令是通过修改元素的 style属性值实现的。

1.共同点：v-if 和 v-show 都可以动态地显示DOM元素
2.区别
（1）手段：
v-if 是动态的向DOM树内添加或者删除DOM元素；
v-show 是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；

（3）编译条件：
v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：
v-if 有更高的切换消耗；
v-show 有更高的初始渲染消耗；

（5）使用场景：
v-if 适合运营条件不大可能改变；
v-show 适合频繁切换。

7、vue组件之间的传值问题

组件关系可分为父子组件通信、兄弟组件通信。
1、父组件向子组件：
父组件可以使用props 把数据传给子组件，子组件内用props接收。
2、子组件向父组件：
子组件可以使用$emit 触发父组件的自定义事件。
子组件用$emit（）来触发事件，父组件用$on（）来监听子组件的事件。父组件可以直接在子组件的自定义标签上使用v-on 来监听子组件触发的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

例如：子组件：
3、兄弟之间的通信：
通过实例一个vue 实例Bus作为媒介const bus = new Vue()，要相互通信的兄弟组件之中都引入Bus，之后通过分别调用Bus 事件触发和监听来实现组件之间的通信和参数传递。

7.1Vue 的父组件和子组件生命周期钩子执行顺序是什么

  • 加载渲染过程

    • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

  • 子组件更新过程

    • 父beforeUpdate->子beforeUpdate->子updated->父updated

  • 父组件更新过程

    • 父beforeUpdate->父updated

  • 销毁过程

    • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

7.3实现通信方式

方式1: props
1)	通过一般属性实现父向子通信
2)	通过函数属性实现子向父通信
3)	缺点: 隔代组件和兄弟组件间通信比较麻烦

方式2: vue自定义事件
1)	vue内置实现, 可以代替函数类型的props
  a.	绑定监听: {})
  b.	发布消息: PubSub.publish(‘msg’, data)
2)	优点: 此方式可用于任意关系组件间通信

方式4: vuex
1)	是什么: vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
2)	优点: 对组件间关系没有限制, 且相比于pubsub库管理更集中, 更方便

方式5: slot(插槽)
1)	是什么: 专门用来实现父向子传递带数据的标签
  a.	子组件
  b.	父组件
2)	注意: 通信的标签模板是在父组件中解析好后再传递给子组件的

8、组件的props（ props是一个对象 ）

作用：接收传递给组件的数据
特点：1、可以给组件传递任意类型的数据
2、props是只读的对象，只能读取属性的值，无法修改对象
3、注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props！！！

9、vue中style scoped

​ 在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的样式只属于当下的模块，这是一个非常好的举措，但是为什么要慎用呢？因为在我们需要修改公共组件（三方库或者项目定制的组件）的样式的时候，scoped往往会造成更多的困难，需要增加额外的复杂度。

scoped三条渲染规则

1.给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
2.在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
3.如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性。

如何让 CSS 只在当前组件中起作用

答案：将当前组件的