Vue基础

一、简介

Vue.js是一款流行的前端JavaScript框架，由尤雨溪于2014年发布。它被设计为易于上手，同时也能够强大到驱动复杂的单页应用（SPA）。Vue的核心库只关注视图层，不仅易于学习，而且容易与其他库或现有项目整合。以下是Vue的简要概述：

Vue采用声明式渲染方式，使得开发者只需关注数据模型，Vue会自动将数据渲染到视图上。这种数据驱动的设计理念大大提高了开发效率。Vue提供了响应式数据绑定和组合视图组件的能力，使得构建交互式的Web界面变得更加简单快捷。

其主要特点包括：

1. 响应式数据绑定：当数据发生变化时，视图会自动更新，无需手动操作DOM。
2. 组件化开发：Vue允许开发者将界面拆分成可复用的组件，提高代码的可维护性和可读性。
3. 简洁的API：Vue的API设计简洁，易于理解和记忆。
4. 易于上手：Vue提供了丰富的文档和示例，帮助初学者快速入门。
5. 良好的生态圈：Vue拥有庞大的社区，提供了丰富的插件和工具，助力开发者高效开发。

凭借这些特点，Vue.js在国内外得到了广泛的应用，成为了前端开发领域的重要技术之一。如今，Vue.js已被许多企业和开发者用于构建高性能、高可用的Web应用。

二、Vue.js 的基础功能

1、声明式渲染： Vue.js 提供了声明式渲染的语法，使得开发者可以简洁地描述应用界面的状态。当数据发生变化时，Vue 会自动更新渲染的 DOM。

<div id="app">{{ message }}
</div>
<script>
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
});
</script>

2、条件渲染： Vue.js 允许使用 v-if、v-else-if 和 v-else 指令来条件性地渲染元素。

<h1 v-if="seen">Now you see me</h1>

3、列表渲染： 使用 v-for 指令可以渲染一个列表，这个指令可以遍历数组或对象。

<ul><li v-for="item in items">{{ item }}</li>
</ul>

4、事件处理： Vue.js 使用 v-on 指令监听 DOM 事件，并执行 JavaScript 代码。

<button v-on:click="reverseMessage">Reverse Message</button>

5、表单输入绑定： Vue.js 提供了 v-model 指令，可以轻松实现表单输入和应用状态之间的双向绑定。

<input v-model="message">

6、组件系统： Vue.js 允许开发者定义可复用的组件，组件是 Vue 实例的一个扩展，可以接收数据、拥有方法，并且可以嵌套使用。

Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

7、计算属性和侦听器： Vue.js 提供了计算属性（computed）和侦听器（watchers），用于响应数据的变化。

var vm = new Vue({data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}},watch: {firstName: function (val) {// 当 firstName 改变时，这个函数会被调用}}
});

三、Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。生命周期又称为生命周期回调函数，生命周期函数，生命周期钩子。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

1. setup():

   • setup() 是 Vue 3 中 Composition API 的入口点，它在组件实例创建之初被调用，即在 beforeCreate 和 created 钩子之前执行。
   • 在 setup() 中，你可以定义组件的响应式数据（通过 ref 或 reactive）和方法。
   • setup() 返回的对象中的属性和方法可以在组件的模板或其他选项中被访问。

2. onBeforeMount():

   • 在组件的模板和 HTML 挂载到 DOM 之前调用。
   • 此时，组件还没有挂载到页面上，因此无法访问到模板中的 DOM 元素。

3. onMounted():

   • 在组件的模板和 HTML 被挂载到 DOM 之后调用。
   • 在这个钩子中，可以访问到模板中的 DOM 元素，并进行操作。

4. onBeforeUpdate():

   • 在响应式数据发生变化，DOM 将要重新渲染之前调用。
   • 此时，可以访问到当前的 DOM 元素，但它们还没有更新。

5. onUpdated():

   • 在响应式数据发生变化，DOM 已经重新渲染之后调用。
   • 在这个钩子中，可以访问到更新后的 DOM 元素。

6. onBeforeUnmount():

   • 在组件实例被卸载之前调用。
   • 此时，组件实例仍然完全可用。

7. onUnmounted():

   • 在组件实例被卸载之后调用。
   • 在这个钩子中，可以执行一些清理操作，例如取消事件监听器或定时器。

8. onActivated():

   • 当组件被 <keep-alive> 包裹时，如果组件被激活（即从缓存中被取出并显示）时调用。
   • 这个钩子对于缓存组件非常有用，可以执行一些激活时的逻辑。

9. onDeactivated():

   • 当组件被 <keep-alive> 包裹时，如果组件被停用（即不再显示，被缓存起来）时调用。
   • 这个钩子可以用来执行一些停用时的清理操作。

10. onErrorCaptured():

    • 当子孙组件中的任何地方发生错误时调用。
    • 它接收三个参数：错误对象、发生错误的组件实例和一个包含错误来源信息的字符串。
    • 这个钩子可以用来记录错误或者执行一些错误处理逻辑，并决定是否阻止错误继续向上传播。

总结

Vue.js 是一款以易用性和高效性著称的前端JavaScript框架，它通过声明式渲染、响应式数据绑定、组件化开发和简洁的API，极大地简化了前端开发的复杂度。从基础功能的实现，如条件渲染、列表渲染、事件处理，到高级功能的运用，如表单输入绑定、组件系统和计算属性，Vue.js 为开发者提供了构建现代Web应用的强大工具。此外，Vue的生命周期钩子让开发者能够在组件的不同阶段进行自定义操作，确保了应用的灵活性和可维护性。总的来说，Vue.js以其出色的性能和广泛的社区支持，成为了前端开发领域的重要选择之一。