vue知识点总结

Posted 2021-11-27 3542446186qq

MVVM和MVC：

什么是mvvm和mvc

mvvm：model view view-model

       mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

 

        在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

 

         ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

mvc：model view controller

mvvm 和 mvc 区别

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 

v-bind和v-model的区别

1.v-bind用来绑定数据和属性以及表达式，缩写为‘：‘

2.v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用

 

vue-router 有哪几种导航钩子?

三种

全局导航钩子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件
beforeEnter

 

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

vue-router 模块的router-link组件

 

vue的优点：

 

1：低耦合

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

2：独立开发

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

3：可重用性

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

4：可测试

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

 

简述vue生命周期的理解：

 

共8个阶段：创建前后，载入前后，更新前后，销毁前后

 

创建前/后：beforecreate阶段，vue实例的挂载元素el还没有

 

载入前/后：beforemount阶段，1vue实例的el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染

 

更新前/后：当data变化时，会触发beforeupdate和updated方法

 

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在

 

路由之间跳转：

声明式（标签跳转）<router-link to="index">

编程式（js跳转） router.push（“index”）

懒加载（按需加载路由）

　　wbepack中提供了require.ensure（）来实现按需加载，以前引入路由是通过import的方式引入，改为const定义的方式进行引入

不进行页面按需加载引入方式：

import home form‘../../common/home.vue‘

 

进行按需加载的引入方式：

const home = r => require.ensure（[],() = >r （require(‘../../commmon/home.vue‘)））

自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。
组件内定义指令：directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数： el、binding

至少 4 种 vue 当中的指令和它的用法：

v-if（判断是否隐藏），v-for（把数据遍历出来），v-bind（绑定属性），v-model（实现双向绑定）