Vue 文档 [介绍]

Myth丶恋晨 2023-02-22 05:16 62阅读 0赞

最近项目迭代需求没有出来，开发出现了空档期，今天我就又读了Vue官方文档 从教程开始的 [https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 每一遍看文档可能都有一些新的感受或者收获 ，还有一种可能以前看文档学习的东西忘了，现在看是那么的回事。

**目录**

兼容性

CDN 加速服务

数据与方法

实例生命周期钩子

计算属性和侦听器

条件渲染

为什么在HTML中监听事件？

封装的Vue组件 data 为什么是一个函数？

--------------------

### 兼容性 ###

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

### CDN 加速服务 ###

在使用CDN 加速服务时，生产环境 ，建议引入一个特定的版本 ，以免最新版本对功能造成不可预期的破坏，对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

### 数据与方法 ###

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的**响应式系统**中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。**值得注意的是只有当实例被创建时就已经存在于****data** **中的 property 才是****响应式**的。

### 实例生命周期钩子 ###

每个Vue 实例在被创建时都会经历一系列的初始化过程，在这个过程中会有一些回调函数（钩子函数）被触发，以便在各个时机用户可以进行自己需要的操作。

生命周期示意图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

### 计算属性和侦听器 ###

**计算属性缓存 VS 方法**

计算属性是基于它的**响应式依赖**进行缓存的，只在响应式依赖发生变化时才会从新求值，如下面的计算属性将不会更新，因为Date.now(),不是响应式依赖。

computed: {
      now: function () {
        return Date.now()
      }
    }

**data 中的 Property 才是响应式的**

**计算属性缓存 VS 侦听属性**

根据名字的感触

**在一个属性随着其他的属性变化而变化时 ，使用计算属性**

**在一个属性发生变化时想去做一些对应的操作 ，使用侦听器**

其实后者一个属性发生变化事想做一些操作也可以使用 计算属性，因为计算属性默认只getter ，需要时是可以设置setter 的

computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }

什么时候使用侦听器呢？

**当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。**

### 条件渲染 ###

**用 key 管理可复用的元素**

Vue 为了尽可能高效的渲染元素，通常会复用已有的元素，而不是重头开始渲染，示例：

<template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username"></template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>

以上代码 loginType 的切换，input 中用户已经输入的内容是不会清除的，因为两个模板使用了相同的input 元素 ，其仅仅是替换了placeholder,

*怎么解决呢？*  
 **只需要给每个input 添加一个唯一的key 就可以**。如下：

<template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input"></template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

**v-if vs v-show**

v-if 是‘真正’的条件渲染，因为他会确保在切换过程中条件块内的事件监听和子组件被适当的销毁和重建。

v-if 也是**惰性的，**即在不符合条件时是不进行任何的渲染的。

v-show 无论条件是否满足都会渲染，只是基于CSS 进行简单的切换 disable 属性。

*怎么选择？*

**v-if 有更高的切换开销，v-show 有更高的初始渲染开销，如果非常频繁的切换，则使用v-show 较好，如果运行时条件很少改变 选择 v-if**

**v-if 与 v-for 一起使用**

官方是不推荐v-if 和 v-for 一起使用的，当他们一起使用时 ，**v-for 比 v-if 有更高的优先级**

**v-for 使用**

**为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key attribute

### *为什么在HTML中监听事件？* ###

1.  扫一眼HTML 模板便能轻松定位在JavaScript代码里对应的方法
2.  因为你无需在JavaScript 里手动绑定事件 你的 ViewModel代码可以是非常纯粹的逻辑 ，和DOM 完全解耦 易于测试。
3.  当一个ViewModel 被销毁时，所有事件处理器都会被删除，你无需担心如何清理他们

### *封装的Vue组件 data 为什么是一个函数？* ###

**一个组件的****data** **选项必须是一个函数**，因此每个实例可以维护一份被返回对象的独立的拷贝，在组件复用时不会出现问题。

这次就到这里吧，以后补充！

[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702155221365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70