【前端开发】JS同步与异步调用，Vue2基础知识

一、JS同步与异步调用

同步调用是指代码按照其编写的顺序执行，每个函数都必须等待前一个函数完成后才能执行。这种调用方式会阻塞代码的执行，直到当前函数执行完成才能执行下一个函数。
正常的直接代码写下来调用就是同步调用。

异步调用是指代码不按照其编写的顺序执行，而是在某些操作完成后再执行。例如，当我们使用 Ajax 请求数据时，我们可以在请求发送后继续执行代码，而不必等待请求完成。 异步调用不会阻塞代码的执行，可以在后台执行其他操作。

1、异步调用函数：使用回调函数实现异步调用

function asyncFunction(callback) {
  console.log("Start");
  setTimeout(function() {
    console.log("End");
    callback();
  }, 2000);
}

console.log("Before function call");
asyncFunction(function() {
  console.log("Callback");
});
console.log("After function call");
1
2
3
4
5
6
7
8
9
10
11
12
13

在这个例子中，我们定义了一个 asyncFunction 函数，它使用 setTimeout 函数模拟了一个异步操作，并在操作完成后调用了回调函数。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并传入一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Callback”。

2、使用 Promise 实现异步调用：

function asyncFunction() {
  console.log("Start");
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log("End");
      resolve();
    }, 2000);
  });
}

console.log("Before function call");
asyncFunction().then(function() {
  console.log("Promise resolved");
});
console.log("After function call");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这个例子中，我们定义了一个 asyncFunction 函数，它返回一个 Promise 对象，并在异步操作完成后调用 resolve 函数。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Promise resolved”。

3、使用 async/await 实现异步调用：

async function asyncFunction() {
  console.log("Start");
  await new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log("End");
      resolve();
    }, 2000);
  });
}

console.log("Before function call");
asyncFunction().then(function() {
  console.log("Promise resolved");
});
console.log("After function call");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这个例子中，我们定义了一个 asyncFunction 函数，它使用 await 关键字等待异步操作完成，并在操作完成后继续执行。在主程序中，我们先输出 “Before function call”，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 “Before function call”、“Start”、“After function call”、2 秒后输出 “End”、“Promise resolved”。

二、Vue2基础知识

Vue官方文档

能使用vue Temple 调用data 的数据和methods 函数，通过v-for 遍历list 等构建web 页面。
能对axios 库进行二次封装，并对api 进行统一管理，能使用低代码平台strapi 等搭建简易cms。
能使用nuxt.js 开发基于SSR 渲染的网站，并使用commitlint 规范, husky 钩子等进行前端工程化管理

Vue2主要由以下几个部分构成：

这些是Vue2的主要构成部分：指令 & 实例、组件 & 模板、数据绑定和生命周期钩子。它们共同组成了Vue应用程序的基本结构，并提供了丰富的功能和开发方式。

• 指令（Directives）：Vue的指令是特殊的HTML属性，用于给元素添加特定的行为和功能。指令以 v- 前缀表示，并通过Vue实例中的数据进行动态绑定。例如，v-bind、v-on、v-if、v-for 等。

• 实例（Instance）：Vue应用程序的核心是Vue实例。使用 new Vue() 创建一个Vue实例，它是Vue应用程序的根实例，用于管理应用程序的数据、方法和生命周期钩子等。Vue实例允许你在模板中使用数据绑定、指令和事件处理等特性。

• 组件（Components）：Vue2支持组件化开发，允许将应用程序拆分为多个可重用的组件。组件是Vue实例的扩展，具有自己的模板、数据、方法和生命周期钩子。组件可以嵌套、复用，并通过通信机制实现组件之间的交互。

• 模板（Templates）：Vue使用基于HTML的模板语法，将Vue实例的数据和方法绑定到DOM上。模板可以包含插值表达式、指令、事件处理等，用于动态生成和更新DOM元素。

• 数据绑定（Data Binding）：Vue2提供了双向数据绑定的能力，可以将数据与模板进行动态绑定，当数据变化时，模板会自动更新，反之亦然。这样可以实现数据的响应式更新，简化了开发过程。

• 生命周期钩子（Lifecycle Hooks）：Vue实例有一系列的生命周期钩子函数，可以在不同的阶段插入代码逻辑。例如，created、mounted、updated 和 destroyed 等，可以在这些钩子函数中执行相应的操作。

1、基本概念 & dom中常用的v指令

安装Vue.js：你可以通过在HTML文件中引入Vue.js的CDN链接来使用Vue.js。在标签中添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
1

创建Vue实例：在JavaScript文件中创建一个Vue实例来管理你的应用程序。

var app = new Vue({
  el: '#app', // 绑定Vue实例到HTML元素
  data: {
    message: 'Hello Vue!' // 数据属性
  },
  methods: {
    changeMessage: function () {
      this.message = 'New message'; // 方法
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11

模板语法：Vue使用一种简单的模板语法，让你可以将数据绑定到HTML中。在HTML文件中，你可以使用双花括号插值表达式来显示Vue实例中的数据。
事件处理：你可以使用v-on指令来监听DOM事件，并在触发时调用Vue实例中的方法。

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change Message</button>
</div>
1
2
3
4

v-on（缩写为@）：用于监听DOM事件并触发相应的方法。可以监听任何DOM事件，如click、input、keydown等。例如：

<button v-on:click="handleClick">Click me</button>

1
2

条件渲染：你可以使用v-if指令根据条件来渲染或销毁HTML元素。

<div id="app">
  <p v-if="isVisible">Visible</p>
  <p v-else>Hidden</p>
</div>
1
2
3
4

列表渲染：你可以使用v-for指令根据数组或对象的数据来渲染列表。

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>
1
2
3
4
5

v-show：根据条件判断是否显示元素（通过CSS的display属性）。例如：

<div v-show="isVisible">Visible</div>
1

v-bind（缩写为:）：绑定HTML属性或Vue实例的数据。例如：
v-bind（缩写为:）：用于动态地绑定HTML元素的属性。可以绑定任何HTML属性，例如class、style、href等。例如：

<img v-bind:src="imageSrc">
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

1
2
3

v-model：在表单元素和Vue实例的数据之间创建双向绑定。例如：

<input v-model="message">

1
2

v-text：更新元素的文本内容。与双花括号插值表达式({{ }})类似，但是只会更新文本内容，不会解析HTML。例如：

<p v-text="message"></p>

1
2

v-html：更新元素的HTML内容。会将Vue实例中的数据解析为HTML，并更新到元素中。注意要谨慎使用，以避免XSS攻击。例如：

<p v-html="rawHtml"></p>

1
2

v-pre：跳过Vue实例中的元素或组件的编译过程，直接将其原始内容渲染到页面上。主要用于显示静态的、不需要动态绑定的内容。例如：

<pre v-pre>{{ rawText }}</pre>

1
2

2、vue2的实例 & 数据绑定（先#el，再v-bind）

Vue2的实例是Vue应用程序的核心。你可以使用new Vue()来创建一个Vue实例，它允许你管理应用程序的数据、方法和生命周期钩子等。

在创建Vue实例时，你需要传入一个选项对象，这个对象包含了Vue实例的配置项。下面是一个基本的Vue实例的创建示例：

var app = new Vue({
  el: '#app', // 将Vue实例挂载到指定的HTML元素上
  data: {
    message: 'Hello Vue!' // 数据属性
  },
  methods: {
    changeMessage: function () {
      this.message = 'New message'; // 方法
    }
  },
  created: function () {
    console.log('Vue实例已创建');
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在上述示例中，创建了一个Vue实例，并将其挂载到id为app的HTML元素上。实例的配置选项包括：

• el：指定Vue实例要挂载的HTML元素的选择器或DOM元素。
• data：定义Vue实例的数据属性，这些属性可以在模板中进行数据绑定。
• methods：定义Vue实例的方法，可以在模板或其他方法中调用。
• created：钩子函数，在Vue实例创建后立即调用，可以执行一些初始化操作。

通过访问Vue实例，你可以获取和修改数据属性，调用方法，并根据需要监听生命周期钩子函数。例如，在模板中使用双花括号插值表达式可以获取数据属性的值：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change Message</button>
</div>
1
2
3
4

上述示例中，message属性的值会在Vue实例中进行动态绑定，并在模板中显示出来。点击按钮会调用changeMessage方法，修改message属性的值。

Vue实例提供了丰富的功能和选项，用于构建交互式的Web应用程序。你可以在实例中定义数据、方法、计算属性、监听器等，还可以使用指令、组件和路由等扩展Vue的功能。

————————————————————————————————————

Vue2提供了灵活而强大的数据绑定机制，使你可以将数据与模板进行动态绑定，实现数据的自动更新。Vue2的数据绑定主要包括以下几个方面：

1、插值表达式（Interpolation）：
Vue2使用双花括号{{ }}来创建插值表达式，将Vue实例中的数据绑定到模板中。例如：

<p>{{ message }}</p>

1
2

上述示例中，message是Vue实例中的一个数据属性，它的值会动态地插入到

标签内部。

2、指令（Directives）：指令是Vue中特殊的HTML属性，以v-开头。通过指令，你可以将元素的属性、事件和内容与Vue实例中的数据进行绑定。常用的指令有v-bind和v-on。例如：

<img v-bind:src="imageUrl">
<button v-on:click="handleClick">Click me</button>
1
2

上述示例中，v-bind指令将src属性与imageUrl数据进行绑定，实现动态的图片路径。v-on指令监听按钮的点击事件，并调用handleClick方法。

3、双向数据绑定（Two-way Data Binding）：
Vue2提供了v-model指令，用于实现表单元素的双向数据绑定。它可以将表单元素的值与Vue实例中的数据属性相互绑定，当表单元素的值改变时，数据属性也会自动更新。例如：

1

上述示例中，message是Vue实例中的一个数据属性，输入框的值与message进行双向绑定，任一方的改变都会同步更新另一方。

4、计算属性（Computed Properties）：
Vue2允许你定义计算属性，它们可以根据其他数据属性的值进行计算，并返回一个新的值。计算属性可以在模板中进行数据绑定，当依赖的数据发生变化时，计算属性会自动重新计算。例如：

var app = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11

上述示例中，fullName是一个计算属性，根据firstName和lastName的值计算出完整的姓名，并可以在模板中进行数据绑定。

通过这些数据绑定的机制，Vue2实现了数据的响应式更新，当数据发生变化时，相关的模板会自动更新，从而实现了数据和视图的同步。这大大简化了开发过程，提高了应用程序的可维护性和用户体验。

——————————————————————
你需要先使用el选项将Vue实例挂载到HTML元素上，然后才能在对应的子元素中使用v-bind进行数据绑定。

当Vue实例挂载到HTML元素后，Vue会将该HTML元素及其子元素作为Vue应用的管理范围。这意味着Vue实例可以访问和控制挂载元素及其子元素的数据、方法和指令。

因此，在挂载Vue实例之后，你可以在挂载元素的子元素上使用v-bind指令，将Vue实例中的数据绑定到子元素的属性上。这样，子元素的属性值将会随着Vue实例中的数据变化而更新。

以下是一个示例，展示了先使用el挂载Vue实例，然后在子元素中使用v-bind进行数据绑定的过程：

<div id="app">
  <p v-bind:title="message">Hover over me</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'This is a tooltip'
  }
});
1
2
3
4
5
6
7
8
9
10

在上述示例中，先通过el选项将Vue实例挂载到id为app的HTML元素上。然后，在该元素的子元素

上使用v-bind指令，将message数据属性绑定到title属性上。当message的值发生变化时，子元素的title属性也会相应地更新。

因此，确保先使用el挂载Vue实例，然后再在对应的子元素中使用v-bind进行数据绑定，以确保Vue实例能够正确管理和更新绑定的数据。

3、Vue2的组件 & 模板 （template， script， export default）

• 组件（Components）：组件是Vue2中的核心概念，它将一个应用程序划分为多个独立且可复用的模块。每个组件都包含了自己的模板、数据、方法和样式，可以通过组合和嵌套来构建复杂的应用程序。组件使代码更易于维护、测试和重用，并提供了更好的组织结构。在Vue2中，你可以使用Vue.component方法或单文件组件（.vue文件）来定义组件。

• 模板（Templates）：模板是Vue2中用于描述组件的HTML代码。模板定义了组件的结构和布局，并使用Vue提供的指令和语法来实现动态数据绑定和逻辑控制。在模板中，你可以通过插值、指令、事件绑定等方式将数据和方法与HTML元素进行绑定。Vue的模板语法非常直观和灵活，使得你可以轻松地创建动态的、响应式的用户界面。

• 单文件组件（Single File Components）：单文件组件是Vue2中一种组织和编写组件的方式。它将组件的模板、逻辑和样式封装在一个单独的文件中，通常使用.vue作为文件扩展名。单文件组件提供了更好的代码组织和可维护性，使得开发者可以更清晰地定义和管理组件。单文件组件可以使用预处理器（如Babel、TypeScript、Sass等）来增强开发体验和功能。

在Vue2中，你可以使用全局注册和局部注册两种方式定义和注册组件。

全局注册组件：
全局注册允许你在应用的任何地方都可以使用该组件，它适用于在整个应用程序中广泛使用的组件。

Vue.component('component-name', {
  // 组件的选项
});
1
2
3

其中，component-name是组件的名称，可以自定义。组件选项是一个包含模板、数据、方法等的对象，用于定义组件的行为和外观。

在模板中使用全局注册的组件，示例：

<div id="app">
  <component-name></component-name>
</div>

1
2
3
4

局部注册组件：
局部注册允许你在特定的Vue实例或组件内部使用该组件，它适用于仅在特定范围内需要的组件。

在Vue实例或组件的选项中，使用components属性局部注册组件，语法如下：

new Vue({
  components: {
    'component-name': {
      // 组件的选项
    }
  },
  // 其他选项
});
1
2
3
4
5
6
7
8

其中，component-name是组件的名称，可以自定义。组件选项是一个包含模板、数据、方法等的对象，用于定义组件的行为和外观。

在模板中使用局部注册的组件，示例：

<div id="app">
  <component-name></component-name>
</div>

1
2
3
4

无论是全局注册还是局部注册，一旦组件被注册，就可以在对应的模板中使用该组件，并根据组件选项定义的行为和外观进行渲染和交互。

以下是一个示例，展示了全局注册和局部注册组件的用法：

<div id="app">
  <global-component></global-component>
  <local-component></local-component>
</div>

// 全局注册组件
Vue.component('global-component', {
  template: '
This is a global component
'
});

// 局部注册组件
var LocalComponent = {
  template: '
This is a local component
'
};

new Vue({
  el: '#app',
  components: {
    'local-component': LocalComponent
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

当涉及Vue2组件和模板的代码示例时，以下是一个简单的示例：

<!-- index.html -->
<div id="app">
  <my-component></my-component>
</div>

// main.js
Vue.component('my-component', {
  template: `
    

      
{{ message }}
      Update Message
    
  `,
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message!';
    }
  }
});

new Vue({
  el: '#app'
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在上面的示例中，我们在index.html中定义了一个Vue实例，并在该实例中使用了``标签。这个标签代表了我们自定义的组件my-component。

在main.js中，我们使用Vue.component方法全局注册了my-component组件。组件的选项包含了一个模板，其中包含了一个

标签和一个按钮。模板中使用了插值表达式{{ message }}来展示组件里的数据，并使用@click指令绑定了按钮的点击事件。

组件的选项中还包含了一个data方法，返回一个包含了message属性的对象。message属性的初始值为’Hello, Vue!'。

组件的选项中还定义了一个methods对象，其中包含了一个updateMessage方法。这个方法在按钮点击时被调用，更新了message属性的值。

当应用程序运行时，标签会被渲染为组件的模板，显示出Hello, Vue!的标题和一个按钮。当按钮被点击时，message属性的值会更新为’Updated message!'，从而导致模板中的数据和视图的更新。

这个示例展示了Vue2中组件和模板的基本用法，包括组件的定义、模板的使用、数据绑定和方法的触发。通过这种方式，你可以创建可复用的组件，并在模板中实现动态的数据渲染和交互行为。

在Vue2中，