Vue必知必会

Vue原理

MVVM

• M（数据模型），可以在Model中定义数据修改和操作的业务逻辑
• V（视图），View将数据模型转化成UI展现
• VM（视图模型），用来同步View和Model的对象

VM通过双向数据绑定将View和Model连接起来，两者之间的同步自动完成，开发者只需关注业务逻辑而不用手动操作DOM，也不需关注数据状态同步，其维护完全由MVVM完成

MVC区别

• MVVM将MVC中的Controller演变成MVVM中的ViewModel，解决了MVC中大量的DOM操作是的页面渲染性能降低，加载速度变慢，影响用户体验
• Vue数据驱动，通过数据来显示视图层而不是通过DOM操作
• 适用于数据操作比较多的场合

双向绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

Vue生命周期

生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程

• beforeCreate: 进行数据和方法的初始化；

• created: 已经完成数据和方法的初始化；

• beforeMount: 开始渲染dom

• mounted:可以渲染dom

• beforeUpdate: data中的数据即将被更新；

• updated: data中的数据更新完毕；

• beforeDestroy: 实例即将销毁；

• destroyed:实例已被销毁；

Vue常用生命周期钩子

• created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

首次页面加载会触发哪些钩子

beforeCreate,
created,
beforeMount,
mounted（DOM的渲染在mounted中完成）

Vuex

组成

Vuex是全局状态管理器，Vuex属性为：

• state：存储数据，存放的是Vue对象里的data
• mutations：数据更新方法
• actions：action是提交mutation而不是直接变更状态，可以包含任意异步操作
• getters：获取state中的数据
• Module

使用场景

• SPA中组件之间状态，参数的传递
• 登录状态保存
• 加入购物车

优点

• 提高了数据可维护性，只需要在Vuex中进行维护
• 提高了程序可读性
• 解耦

Vue-Router

keep-alive作用

• 抽象组件，包裹动态组件，缓存切换出去的vue组件实例，主要用于保留组件状态或避免重新渲染
• 一般配合vue-router一起使用，会使得所有的组件都被缓存；如果不想缓存所有组件可以在vue实例组件上添加keep-alive属性

Vue路由使用步骤

• 安装路由模块
• 创建路由对象
• 配置路由规则
• 将路由对象注册为vue实例对象的成员属性

active-class

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

• 直接在路由js文件中配置linkActiveClass

    export default new Router({
      linkActiveClass: 'active'
    })
  

• 在router-link中写入active-class

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

定义动态路由/获取传递动态参数

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

vue-router导航钩子

• 全局导航钩子

    router.beforeEach(to,from,next)//跳转前进行判断拦截。
  

• 组件内的钩子

• 单独路由独享组件

Vue组件

Vue.cli中自定义组件

• 在compoents目录中新建组件文件（indexPage.vue），其中在script中要export default{}；
• 在需要使用的页面（组件）中import indexPage from ‘@/components/indexPage.vue’
• 注入到vue实例子组件的components属性上，components:{indexPage}
• 在template视图view使用

Vue引入组件步骤

1）采用ES6的import … from …语法或CommonJS的require()方法引入组件

2）对组件进行注册,代码如下

// 注册Vue.component(‘my-component’,
 { template:’A custom component!'
 })

3）使用组件

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

设置style时，会影响到其他组件样式，为避免样式共享，可在样式style标签里添加 scoped 即可

Web

VNode/虚拟DOM

• VNode(Virtual Node)，Vue在页面上渲染的节点及其子节点
• 虚拟 DOM是由 Vue 组件树建立起来的整个 VNode 树的称呼