vue知识点总结

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(实现双向绑定)      

 
  
原文地址:https://www.cnblogs.com/3542446186qq/p/10816507.html