vue 知识点总结

Vue 阅读量

      为了给自己加深记忆，就整理一篇关于vue知识点的文章吧。

vue 中的 mvvm

      mvvm全称是 Model-View-ViewModel，是一种基于前端开发的架构模式，Model 层主要用来定义数据对象和操作的业务逻辑，vm.$data就是 vue 中的 Model 层。View 层就是负责将数据模型转化成 UI 展示出来，vm.$el是被 Vue 实例管理的 DOM 节点，当一个 vue 实例被创建时，它会递归遍历根元素的所有子节点，完成数据绑定并编译到template中，template中的内容就相当于 View 层。ViewModel 是一个同步 View 和 Model 的对象，是 Vue 的核心。在 mvvm 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。var vm = new Vue({ /* options */ })在 Vue.js 中，每个 Vue 实例都是一个 ViewModel。因此，开发者只需要关注关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态同步的问题，复杂的数据转态维护完全由 MVVM 来统一管理。

具体请看vue 实现原理(一)>)、vue 实现原理(二)>)

vue 的双向绑定的原理简介

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

mvvm 和 mvc 的区别以及适合的场景

      mvvm 和 mvc 都是一种设计思想。主要是 mvc 中的 controller 演变成了 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题。最大的区别就是 vue 是数据驱动，是通过数据来显示视图而不是节点操作。mvvm 适合数据操作比较多的场景。

vue 的特点

  • 简洁：页面由 HTML 模板+Json 数据+Vue 实例组成
  • 数据驱动：自动计算属性和追踪依赖的模板表达式
  • 组件化：用可复用、解耦的组件来构造页面
  • 轻量：代码量小，不依赖其他库
  • 快速：精确有效批量 DOM 更新
  • 模板友好：可通过 npm，bower 等多种方式安装，很容易融入

v-show 指令，v-if 的区别

      两者都是条件渲染执行。v-show的值无论为 false 或是 true，元素都会在 html 代码中，false 时display：none，true 为display:block。而v-if只有当值为 true 时，元素才会存在于 html 代码中。

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

1
<style scoped></style>

Vue 生命周期

具体请看之前的文章Vue 实例生命周期

Vue 路由

具体请看之前的文章Vue 路由

组件之间传值

父组件与子组件传值：Props

子组件向父组件传递数据: 子组件通过\$emit 方法传递参数,触发父组件 event

vuex 的 mutation 和 action 的特性及区别

      mutation 用于修改 state 的数据，是同步的。action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态，并且 action 可以包含任意异步操作。

有关 vuex 的请看之前的文章搭建 Vuex 中央状态管理

为什么使用 v-for 时必须添加唯一的 key

      在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。采用的是就地复用策略。即列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。从而减少不必要的元素重渲染在 Diff 算法中 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染.

computed 和 watched 的区别

      computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。如果一个数据依赖于其它数据，那么我们常用 computed 去解决，如果需要在某个数据变化时做一些事情，那么就更适合用 watch 了

当 vue 的 data 里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是否会更新视图

      不会。 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
需要使用$set()方法。

1
2
3
this.$set(this.object, key, value);
//或者
Vue.set(vm.obj, key, value);

delete 和 Vue.delete 删除数组的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = [4, 5, 6];
var b = [1, 2, 3];
delete a[1];
console.log(a);
// [4, empty, 6, __ob__: Observer]
// 0: 4
// 2: 6
//length: 3
this.$delete(b, 1);
console.log(b);
//[2, 3, __ob__: Observer]
//0: 2
//1: 3
//length: 2

以上代码可以看出delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete直接删除了数组 改变了数组的键值

如何优化 SPA 应用的首屏加载速度慢的问题

  • 将公用的 JS 库通过 script 标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度

  • 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的 js 文件

  • 加一个首屏 loading 图，提升用户体验

指令 keep-alive

在 vue-router 写着 ，keep-alive 的含义：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令

感谢以下文章对我总结 vue 的帮助：

https://juejin.im/post/5aae19aa6fb9a028d4445d1a
https://zhuanlan.zhihu.com/p/53703176
http://web.jobbole.com/95670/
https://juejin.im/post/5d046560f265da1b961301d8

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :