【Vue】

什么是Vue

Vue是一款用于构建用户界面的JavaScript框架，它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue是一个JS库，无依赖其他JS库，直接引入一个JS文件就可以使用。Vue具有易于入门、方便与第三方库或已有项目整合以及适合做复杂的单页应用等特点，Vue的核心概念包括组件化、MVVM、响应式虚拟DOM和生命周期。组件化使得开发者可以将一个庞大复杂的前端工程拆分为一个个组件，提高了开发的效率。MVVM模式实现了数据双向绑定，减少了DOM操作，使界面、交互和数据层分离。响应式虚拟DOM则通过只重新加载更改的部分，提高了效率。每个Vue组件都有生命周期，开发者可以在不同阶段进行相应的逻辑处理。

插值表达式

在Vue.js中，插值表达式是一种用于在模板中嵌入JavaScript表达式并显示其结果的方式。插值表达式使用双大括号 {{ }} 来包裹JavaScript表达式，当Vue实例的数据变化时，插值表达式的内容会自动更新

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

响应式

在Vue中，响应式（Reactivity）是一个核心概念，它允许数据的变化能够驱动视图的自动更新。这是通过Vue的响应式系统实现的，该系统在Vue实例创建时开始工作，并持续追踪所有被Vue实例观察的数据对象

响应式特点：

1. 数据驱动视图：当Vue实例中的数据发生变化时，相关的视图部分会自动更新。这是通过Vue的响应式系统实现的，该系统追踪数据的变化并触发视图的重新渲染。
2. 细粒度更新：Vue的响应式系统只更新实际发生变化的部分，而不是整个页面。这意味着只有依赖于更改数据的视图部分才会被重新渲染，这有助于提高性能。
3. 深度观察：Vue的响应式系统能够深度观察嵌套的对象和数组，并追踪它们的变化。这意味着即使对象或数组的内部属性发生变化，Vue也能检测到并更新相关的视图。
4. 异步更新队列：为了优化性能，Vue不会每次数据变化都立即更新视图，而是将多个变更放入一个队列中，并在下一个事件循环“tick”中异步地进行更新。这意味着如果你在同一个事件循环中多次修改数据，Vue只会触发一次视图更新。
5. 批处理更新：当使用v-for指令渲染一个列表时，如果你修改了多个项目，Vue会尝试批量更新这些项目，而不是为每个更改单独触发一次更新。这有助于减少不必要的计算和DOM操作，提高性能。
6. 计算属性缓存：计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这意味着只要计算属性依赖的响应式数据没有变化，多次访问计算属性会立即返回之前缓存的结果，而不会重新执行计算逻辑

Vue指令

Vue提供了许多指令（Directives）来帮助我们更方便地操作DOM和实现特定的功能。以下是一些常用的Vue指令：

• v-bind：用于属性绑定，可以将数据绑定到元素的属性上。例如，v-bind:src="imageSrc"将imageSrc数据绑定到元素的src属性上。
• v-model：用于在表单元素上创建双向数据绑定。例如，v-model="message"将message数据与输入框的值进行双向绑定。
• v-if、v-else-if、v-else：用于条件渲染，根据表达式的值来决定是否渲染元素。
• v-for：用于列表渲染，可以基于数组或对象渲染一系列的元素。例如，v-for="item in items"将遍历items数组并为每个元素渲染一个元素。
• v-on：用于监听DOM事件，并在触发时执行一些JavaScript代码。例如，v-on:click="handleClick"将在元素被点击时执行handleClick方法。
• v-show：根据表达式的值来决定是否显示元素。与v-if不同的是，v-show只是通过CSS的display属性来控制元素的显示与隐藏，而不会销毁和重建DOM元素。
• v-pre：跳过元素和其子元素的编译过程。可以用来显示原始的Mustache标签。
• v-cloak：这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
• v-once：只渲染元素和组件一次。随后的重新渲染, 元素/组件及其所有的子节点将被视为静态内容并跳过

计算属性

计算属性是Vue中的一个重要概念，它允许你声明一个依赖于组件状态的属性，该属性的值会根据其依赖的数据变化而自动更新。计算属性是基于它们的响应式依赖进行缓存的，只有在相关依赖发生改变时才会重新求值

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'John',  
    lastName: 'Doe'  
  },  
  computed: {  
    fullName: function() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
});

watch监视器

在Vue中，watch选项用于观察和响应Vue实例上的数据变化。当你想要在数据变化时执行异步操作或复杂操作时，可以使用watch

new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  watch: {  
    // 当message数据变化时，这个函数将被调用  
    message: function(newVal, oldVal) {  
      // newVal是数据变化后的新值  
      // oldVal是数据变化前的旧值  
      console.log('Message changed from', oldVal, 'to', newVal);  
      // 你可以在这里执行任何你需要的操作，例如发送请求到服务器  
    }  
  }  
});

watch: {  
  // 监听计算属性的变化  
  computedPropertyName: {  
    handler(newVal, oldVal) {  
      // 执行你的逻辑  
    },  
    // 可以指定深度监听，当嵌套对象发生变化时也会触发  
    deep: true,  
    // 可以指定立即执行监听回调，即在初始化时立即执行一次  
    immediate: true  
  }  
}

生命周期

生命周期指的是 Vue 实例从创建到销毁的整个过程

1.创建阶段：

• beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件/监听的配置之前被调用。此时，组件的实例已经创建，但尚未挂载到 DOM，$el 属性目前不可见。
• created：实例创建完成后调用，此阶段完成了数据观测，属性和方法的运算，以及事件监听，$el 属性还没有显示出来。

2.挂载阶段：

• beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时模板已经编译完成，但尚未挂载到 DOM。
• mounted：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果实例被挂载到一个文档内元素上，当mounted被调用时vm.el 也在文档内。

3.更新阶段：

• beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

4.销毁阶段：

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁