Vue2

Vue 通过组件允许创建可重用块标记。大多数时候，Vue 组件是使用一个特殊的 HTML 模板的语法写的。当需要比 HTML 语法允许的更多的控制时，可以编写 JSX 或纯 JavaScript 函数来定义组件。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

template是一级节点，用于写tag组件，script和style是并列的一级节点，也就是有3个一级节点。

• HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

• CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。

• JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

DOM

文档对象模型（Document Object model，简称DOM）是针对HTML和XML文档的一个API（应用程序编程接口）。文档对象模型（DOM）通过将文档的结构（例如表示网页的 HTML）以对象的形式存储在内存中，将网页与脚本或编程语言连接起来。DOM 使用逻辑树的形式来表示文档。树的每个分支末端都是一个节点，每个节点都包含对象。DOM 方法允许以编程方式来访问树。借助这些方法，你可以改变文档的结构、样式或内容。

![rendering.svg]()

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况）。

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

计算属性与方法属性

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。因此，计算属性对于性能要求更低。

getter和setter的含义

Getter

1. 含义:
   • Getter 是计算属性的主要组成部分，它是一个函数，用于获取计算属性的值。
   • 当你访问计算属性时，实际上是在调用 getter 方法。
2. 用途:
   • Getter 方法通常用于基于其他数据属性计算出一个新值。
   • Getter 方法可以访问组件的所有数据和其他计算属性。
   • 当依赖的数据发生变化时，Vue.js 会自动调用 getter 方法来更新计算属性的值。

Setter

1. 含义:
   • Setter 是一个可选的部分，它也是一个函数，用于设置计算属性的值。
   • 当你试图改变一个只读的计算属性时，Vue.js 会自动调用 setter 方法。
2. 用途:
   • Setter 方法通常用于更新其他数据属性的值，而不是直接改变计算属性本身。
   • 当计算属性被赋值时，Vue.js 会调用 setter 方法。

箭头函数表达式=>

() => {
  statements
}

param => {
  statements
}
(param1, paramN) => {
  statements
}

箭头函数可以是 async 的，方法是在表达式前加上 async 关键字。

async param => expression
async (param1, param2, ...paramN) => {
  statements
}

异步操作和Async/Await

promise

Promise 是现代 JavaScript 中异步编程的基础。它是一个由异步函数返回的对象，可以指示操作当前所处的状态。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象提供了方法来处理操作最终的成功或失败。

Promise 的优雅之处在于 then() 本身也会返回一个 Promise，这个 Promise 将指示 then() 中调用的异步函数的完成状态。由此可以链式使用promise。

promise有待定（pending）、已兑现（fulfilled）和已拒绝（rejected）三种状态。

Async和Await

在一个函数的开头添加 async，就可以使其成为一个异步函数。

在 uni-app 中，async 和 await 的底层逻辑与原理与其他 JavaScript 环境相同。

在Vue组件的生命周期中，有一些钩子函数是异步的，比如created和mounted。这些钩子函数允许你在组件被创建或挂载到DOM之后执行异步操作。

this.$api.common.login(this.loginForm).then(async res => {   // async 异步  箭头函数去除掉function关键字，在形参列表和函数体之间使用=>连接
    if (res.code == 200) {
    // 存储token和账号
    this.saveToken(res.token);
    this.saveAccount();
    // 获取用户信息
    let profile = await this.getProfile();   // 等待异步完成
    uni.$u.vuex('profile', profile);
    // 跳转主页
    uni.switchTab({
    url: '/pages/tabBar/home/index'
    });

async 函数是一个特殊的函数，它总是返回一个 Promise。即使你不显式地返回一个 Promise，async 函数也会返回一个已解决的 Promise，其值为 undefined。

await 关键字只能在 async 函数内部使用。它用于等待一个 Promise 的结果。当 await 一个 Promise 时，JavaScript 引擎会暂停执行 async 函数，直到 Promise 解决或被拒绝。

async 和 await 的底层原理基于 Promise。Promise 是 JavaScript 中处理异步操作的标准方式之一，它有三种状态：pending（挂起）、fulfilled（已解决）和 rejected（已拒绝）。Promise 对象代表了一个最终可能会完成或失败的异步操作，并附带了完成或失败时的值。

await 关键字用于等待一个 Promise 的结果。当你在 async 函数中使用 await 关键字时，JavaScript 引擎会暂停执行 async 函数，直到 Promise 被解决或被拒绝。如果 Promise 被解决，await 表达式的值将是解决值；如果 Promise 被拒绝，await 表达式会抛出一个错误，这可以通过 try...catch 语句来处理。

插槽（slot）

    <!-- 根据不同条件渲染图片 -->
    <u--image v-if="device.imgUrl" :src="device.imageUrl" radius="10" mode="aspectFill"
    width="70" height="70">
    <!-- 插槽（slot）显示不同状态时显示的图像 -->
    <view slot="error" style="font-size: 12px;">加载失败</view>
    <template v-slot:loading>
    <u-loading-icon></u-loading-icon>
    </template>

slot元素是——Web 组件技术套件的一部分——它是一个在 web 组件内部的占位符，你可以使用自己的标记来填充该占位符，从而创建单独的 DOM 树并将其一起呈现。

template中：的使用

Vue.js 中属性绑定的详细解析：冒号 \:\ 和非冒号的区别_vue 属性 冒号-CSDN博客

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

在设置参数时是否添加：主要取决于是在设置HTML属性（attributes）还是Vue特有的指令。它们会在渲染的 DOM 上应用特殊的响应式行为。

不需要:的情况

静态HTML属性：当你直接在元素上写属性时，如<div id="app">，这里的id="app"是一个静态的HTML属性，其值在编译时就已经确定，不会随着Vue实例中的数据变化而变化。

Vue指令但非属性绑定：对于某些Vue指令，如v-model、v-if、v-for等，它们不是用于绑定HTML属性的，而是Vue特有的模板指令，用于实现数据绑定、条件渲染、列表渲染等功能。这些指令不需要:前缀，因为它们不是HTML属性的绑定。

需要:的情况

动态HTML属性绑定：当你想要根据Vue实例中的数据动态地设置HTML元素的属性时，就需要使用v-bind指令。为了简化，Vue允许使用:作为v-bind的简写。例如，<div :id="dynamicId">中的:id="dynamicId"表示id属性的值将绑定到Vue实例的dynamicId数据属性上。如果dynamicId的值发生变化，那么<div>的id属性也会相应地更新。

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

动态绑定和静态绑定在性能上有所差异。动态绑定会增加一定的渲染开销，因为 Vue.js 需要监视表达式的变化并进行响应式更新。静态绑定则不会有这样的性能开销，因为它们是静态的值。

免密码登录相关

从本地缓存中读取token值，并将其存储到Vuex状态管理器中，以便在需要的地方可以方便地访问此token值。

getToken () {
    // 本地缓存获取token
    this.token = uni.getStorageSync('token');
    // vuex存储token
    uni.$u.vuex('vuex_token', this.token);
}

token、session和cookie三者之间的区别

• 安全性：Token 通常比 Cookie 更安全，因为它包含了加密签名，并且可以设计为不持久化存储。而 Cookie 存储在客户端，更容易受到攻击。

• 可扩展性：Token 机制更适合于无状态架构和分布式系统，因为它不需要服务器维护会话状态。

• 跨域问题：Token 可以轻松解决跨域问题，而传统的 Session Cookie 受到同源策略的限制。

this.$refs.form

this.$refs.form 是一个引用，指向了模板中带有 ref="form" 的表单元素或组件。

在 Vue 组件的模板中使用 ref 属性时，Vue 会在该组件实例的 $refs 对象中创建一个对应的属性，该属性的值就是对应的子组件实例或 DOM 元素。

注意：$refs 的值在组件渲染完成之前是 undefined。因此，你不能在 created 钩子中直接访问 $refs，而应该在 mounted 钩子或之后的生命周期中访问。

页面结构

页面 | uni-app官网 (dcloud.net.cn)

一个页面内，有3个根节点标签：

• 模板组件区 <template>
• 脚本区 <script>
• 样式区 <style>

在 vue 文件中，template、script、style 这3个是平级关系。在vue2中，template 的二级节点只能有一个节点，一般是在一个根 view 下继续写页面组件。但在vue3中，template可以有多个二级节点，省去一个层级。

在脚本区中，开发者应谨慎编写 export default {} 外面的代码，这里的代码有2个注意事项：

1. 影响应用性能。这部分代码在应用启动时执行，而不是页面加载。如果这里的代码写的太复杂，会影响应用启动速度，占用更多内存。
2. 不跟随组件、页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。如果必要你需要手动处理。比如 beforeDestroy 或 destroyed 生命周期进行处理。

export

在ES6（ECMAScript 6）中，export与export default均可用于导出变量(含常量)、函数、类、文件、模块等，然后在其它文件或模块中通过import 变量(含常量)|函数|类|文件|模块名的方式，将其导入，以便能够对其进行使用。export可以有多个，然而export default只能有一个。

install

在 Vue.js 中，使用 const install = (Vue, vm) => { ... } 和 export default { install } 是一种常见的模式来定义和导出 Vue 插件。这种方法允许创建一个可以在 Vue 应用程序中使用的插件。

install 函数通常接收两个参数：

• Vue:Vue 构造函数，可以用来扩展 Vue 的原型、注册全局组件、指令等。
• vm:可选参数，通常用于访问 Vue 实例的上下文，但在 Vue 3 中已被废弃。

在函数体中，可以执行各种操作来配置 Vue 或者注册自定义行为。当你在其他地方导入(比如main.js)这个模块时，可以通过 Vue.use() 方法来安装这个插件。

prototype

在 JavaScript 中，原型是一种特殊的机制，用于实现对象之间的继承和共享属性及方法。每个 JavaScript 对象都有一个内部属性 [[[Prototype]]]，它指向另一个对象，这个对象被称为原型对象。当试图访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到这个属性或方法为止。Java 作为一种面向对象的编程语言，也有一种类似于 JavaScript 中原型机制的概念，但它采用的是类继承和接口实现的方式。Java 中并没有直接与 JavaScript 的 prototype 相对应的概念，但我们可以探讨 Java 中的一些机制，它们在某种程度上实现了类似的功能。

prototype 是一个特殊的属性，它存在于所有函数对象上。当创建一个函数时，这个函数会自动获得一个 prototype 属性。这个 prototype 属性是一个对象，它的用途是作为新创建对象的原型。当你使用构造函数创建对象时，新创建的对象会继承 prototype 对象上的属性和方法。

在 Vue.js 中，可以利用 JavaScript 的原型机制来扩展 Vue 的原型，使得所有的 Vue 实例可以共享某些属性和方法。这通常通过将属性或方法添加到 Vue.prototype 来实现。

Vue.prototype.$api = {
    // 导入模块
    common,
    scene,
    group,
    deviceUser,
    deviceLog,
    device,
    deviceJob,
    account,
    energyConsumptionAnalysis
};

上述代码，向 Vue 的原型上添加了一个名为 $api 的属性，并将自定义的模块加入之中。之后，可以在Vue 的任何实例中都可以通过 $api 访问这些方法。

 this.$api.common.xxx()   // 访问自定的方法

Props

uni-app官网 (dcloud.net.cn)

组件基础 | Vue.js (vuejs.org)

props 可以是数组或对象，用于接收来自父组件的数据。Props 可以在子组件上声明注册,在父组件定义其中声明参数的值，父级 prop 的更新会向下流动到子组件中，但不能反向。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

ref

uni-app官网 (dcloud.net.cn)

用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。

<!-- index 父组件页面 -->
<template>
    <view>
        <base-input ref="usernameInput"></base-input>
        <button type="default" @click="getFocus">获取焦点</button> 
    </view>
</template>
<script>
    export default {
        methods:{
            getFocus(){
                //通过组件定义的ref调用focus方法
                this.$refs.usernameInput.focus()
            }
        }
    }
</script>

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex与全局变量区别

vuex	全局变量
不能直接改变store里面的变量，由统一的方法修改数据	可以任意修改
每个组件可以根据自己vuex的变量名引用不受影响	全局变量可能操作命名污染
解决了多组件之间通信的问题	跨页面数据共享
适用于多模块、业务关系复杂的中大型项目	适用于demo或者小型项目

每一个 Vuex 应用的核心就是 store（仓库），它包含着你的应用中大部分的状态 (state)。

状态管理有5个核心：state、getter、mutation、action、module。