vue 常用知识总结

木森林哥哥

已于 2022-05-25 13:27:56 修改

阅读量1.1k

点赞数 2

分类专栏： Vue 笔记文章标签： vue javascript 前端 es6 vue.js

于 2021-04-19 18:16:57 首次发布

本文链接：https://blog.csdn.net/weixin_47021982/article/details/115870898

版权

Vue 是一个渐进式的框架，什么是渐进式：

渐进式意味着你可以将 vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用 vue 实现，那么 vue 的核心库以及其生态系统。
比如 Core + Vue-router + Vuex，也可以满足你各种各样的需求。

Vue 中有很多特点和 Web开发中常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟 DOM

el只能在vue实例中使用。

事件修饰符：

.stop
.capture
.prevent
.self
.once

el: 指定要控制的区域。
data: 是个对象，指定了控制的区域内要用到的数据。
methods: 虽然带个s后缀，但是是个对象，这里可以自定义方法。

在 vm 实例中，如果要访问 data 上的数据，或者是访问 methods 中的方法，必须带 this。

v-model 只能运用于表单元素。

在 vue 中绑定样式两种方式：

v-bind:class
v-bind:style

v-if 和 v-show
v-if 有更高的切换消耗。
v-show 有更高的渲染消耗。

react, angular, vue各有什么特点？

能够解放程序员。
适合做到页面应用程序。
具体用哪个，由公司的项目负责人决定。

vue 中的插件和库

依赖 vue 的叫 vue 的插件，不依赖 vue 的叫第三方库。

1. 属性动态改变内容用冒号`：`，元素动态改变内容用双括号`{ {}}`。

指令：带有`v-`前缀的特殊属性。

配置对象：属性名固定的对象。

方法调用、computed、watch的区别：

方法：页面数据每次重新渲染都会重新执行，性能消耗大，除非不希望有缓存的时候用。
computed：是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容，不可异步。(有返回值)
watch：监听到值的变化会执行回调，在回调中可以进行一些逻辑操作，可以异步操作。(没有返回值)

注意：

所被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象。
所有不被 Vue 所管理的函数(定时器的回调函数、Ajax的回调函数、Promise的回到函数等)，最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象。

总结：

除非不希望缓存，一般不会用方法。
一般来说需要依赖别的属性来动态获得值的时候可以使用 computed。
对应监听到值的变化需要做异步操作或开销较大的操作时用 watch。
使用时，优先考虑计算属性，计算属性做不了再使用监视属性。

注意：计算属性只适用于当前组件。

可以简写的三条指令：v-bind(简写为 : )、v-on(简写为 @)、v-slot(简写为 #)。

可以添加修饰符的三条指令：v-bind、v-on、v-model。

样式处理：

class：
- 字符串形式：适用于类名不确定，要动态显示。
  
  :class="xxx"
- 对象形式：适用于要绑定多个样式，个数不确定，名字也不确定。
  
  :class="{ xxx: true, yyy: false }"
- 数组形式：适用于要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  
  :class="[xxx, yyy]"
style：:style="{ fontSize: '20px', xxx: yyy }"
总结：
1. 固定不变的样式，通过 class 写死。
2. 会发生变化的样式：
  - 如果是有限几种的变化，可以用 :class。
  - 如果是无限的变化，可以用 :style。

样式单数据只有一种做法：v-model。

v-for 遍历，遍历数组中的内容，如：`<li v-for="(wang, index) in wangs">{ {wang.name}}的年龄是：{ {wang.age}},索引值为：{ {index}}</li>`

括号中的 (wang, index)第一个wang为值，第二个index为索引。

v-for 遍历，遍历对象中的内容，如：`<li v-for="(value, key, index) in wangs">属性值为：{ {value}}，属性名为：{ {key}}，索引值为：{ {index}}</li>`

括号中的 (value, index)第一个value为属性值，第二个key为属性名，第三个 index为索引值。因为对象是键值对的形式，所以要有属性名和属性值，而后是索引。

开发中：`inc` 表示"加法"，是 increment 的缩写。`desc` 表示"减法"，是 decrement 的缩写。

下拉列表绑定 `v-model`给`select`绑定，`option` 中放`value` 值。

vue 实例对象上自身的属性或方法都是`$`符号开头，除了数据代理的属性(data, methods, computed)。

Vue 监视数据的原理：(天禹)

Vue 会监视 data 中所有层次的数据。
如何监测对象中的数据？

通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据。
1. 对象中后追加的属性，Vue 默认不做响应式处理。
2. 如需要后添加的属性做响应式，请使用如下API：
```
Vue.set(target, propertyName/index, value) 或者
vm.$set(target, propertyName/index, value)
```
如何监视数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：
1. 调用原生对应的方法对数组进行更新。
2. 重新解析模板，进而更新页面。
在 Vue 修改数组中的某个元素一定要用如下方法：
1. 使用这些 API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
2. Vue.set() 或 vm.$set()

**特别注意：**Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象添加属性。

vue 中的普通函数 this 都是指向实例对象，生命周期函数也是。

在 vue 函数中的函数需要用箭头函数，不然 this 指向会不对。

在 vue 实例中，定时器需要自己在 beforeDestroy 中清除。

`moment.js` 可以设置时间，现在不怎么用了，用`dayjs`。

date-fns也是一样的可以设置时间，比dayjs下载量还多。

第三方的库对引入顺序没有太多要求。

计算属性(`computed:{}`)就是下面三点：

获取要参与计算的数据。
开始计算。
返回计算结果。(计算属性一定要有返回值，否则没有意义)

面试题: 请求在 `created` 发送还是 `mounted` 发送，为什么？

created 优势：发送请求的时机快一点，最终响应回来的速度就快一点。

mounted 优势：

可以操作 DOM。
让首屏渲染速度更快一点。

图片懒加载可能会用自定义指令去做。

使用自定义插件：`Vue.use(无引号的插件名)`

组件三部曲：1. 定义组件。2. 注册组件。3. 使用组件。

组件中 data 必须定义成函数形式。

局部组件需要：1. 引入。2. 注册。3. 使用。

PWA：`Progressive Web App` 是一种理念，使用多种奇数来增强 web app 的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用。

脚手架中，可以用大驼峰，命名引入。但是在页面中不可以，页面中可以如：`<test-component></test-component>`

更新数据：数据源在哪儿，更新数据的方法就在哪儿。不然可能会有更新上的隐患。

DOM 事件：

事件名是固定的。
触发事件：满足要求(用户界面等)就会自动触发。

自定义事件一般是给组件绑定的。

事件名可以按照自己的要求来起名。
手动触发事件。方法：this.$emit(事件名称,事件回调参数)
给组件绑定的事件，都是自定义事件。

11. 绑定自定义事件有两种方式：

1. `<Child @setCount="setCount" />`

2. `<Child ref = "child"/>`

mounted() {
   
    this.$refs.child.$on('setCount', this.setCount)
}

触发自定义事件：

this.$emit(事件名称，事件回调参数)

自定义相关事件

$on 绑定持久性事件
$once 绑定一次性事件
$off 解绑事件
$emit 触发事件

特点：自定义事件只为指定的某一个组件服务，给哪个组件绑定，就只有这个组件可以触发。

组件实例的隐式原型指向 vue 实例上的`Vuecomponent`的原型对象。

父子传递数据用：props。兄弟，祖孙之间传递数据用：全局事件总线。

响应式：更新数据(data 中的数据)，数据会发生变化，同时用户界面也会更新。

库和框架的区别：

库：
1. 把一些常用的功能封装成一个个函数或者对象，并放到一个 js 文件里，目的是为了简化原生 js 的操作，它是一个封装好的集合。能够解决部分的功能。
2. 特征：小而美。
框架：
1. 一套架构，提供一套整体解决方案，它能完全搞定整个项目开发，并且很轻松就能解决复杂的问题。
2. 特征：大而全(比较大，功能比较全)。

MVC、MVP 和 MVVM：

MVC：

M Model 模型(数据)：主要任务就是操作数据。
V View 视图(结构)：主要任务是将数据模型转化成UI视图展示出来。
C Controller 控制：主要任务负责处理业务逻辑。

View 传送指令到 Controller。

Controller 完成业务逻辑后，要求 Model 改变状态。

Model 将新的数据发送到 View，用户得到反馈。

MVP：

各部分之间的通信，都是双向的。
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为“被动视图(Passive View)”，既没有任何主动性，而 Presenter 非常厚，所有逻辑都部署到那里。

MVVM：

M Model 模型(数据)：主要任务就是操作数据。
V View 视图(结构)：主要任务是将数据模型转化成UI视图展示出来。
VM ViewModel 视图模型(控制)：监听 Model 数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 对象，连接 Model 和 View。

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

MVC 和 MVVM 的区别：这两个的原理是一样的，不过，MVVM 中的 VM 解决了 MVC 当中大量操作 DOM 的问题。