Vue 基础

class Vue

1. Vue.js 基础语法

Vue.js 的基础语法简单易懂，主要通过 Vue 实例将数据与视图进行绑定，实现响应式渲染。Vue 提供了声明式渲染、事件处理、计算属性等功能，简化了前端开发中的逻辑。

示例：

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

在这个简单的例子中，Vue 实例绑定在 #app DOM 元素上，并通过 {{ message }} 将数据动态渲染到页面上。

2. Vue 实例与组件

Vue 实例

Vue 实例是 Vue 应用的核心部分，它提供了数据、方法、生命周期钩子等。每个 Vue 应用至少需要一个 Vue 实例。

示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

Vue 组件

Vue 组件是应用的可复用部分。组件可以是单独的视图模块，也可以嵌套到其他组件中，形成复杂的界面。

示例：

<div id="app">
  <greeting></greeting>
</div>

<script>
  Vue.component('greeting', {
    template: '<p>Hello from a component!</p>'
  });

  new Vue({
    el: '#app'
  });
</script>

实现原理

Vue 实例通过 new Vue() 创建，组件则通过 Vue.component() 全局注册。Vue 的响应式系统会将数据与 DOM 绑定，通过观察者模式检测数据变化，实时更新视图。

3. 模板语法与指令

模板语法

Vue 使用简单的模板语法，通过双大括号 {{ }} 来插入变量，动态绑定数据到 HTML 结构。

指令

指令是以 v- 开头的特殊属性，用于在 DOM 上应用特定的行为。常见的指令有：

  • v-bind：动态绑定属性
  • v-if：条件渲染
  • v-for：列表渲染
  • v-model：双向数据绑定

示例：

<div id="app">
  <input v-bind:placeholder="message">
  <p v-if="seen">This is visible</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Enter something',
      seen: true,
      items: ['Apple', 'Banana', 'Orange']
    }
  });
</script>

原理解释

Vue 的模板语法和指令都是通过编译器解析的。当模板编译时，Vue 会生成虚拟 DOM，确保数据的变化能够高效地反映在视图中。

4. 事件处理与双向数据绑定

事件处理

Vue 允许在模板中通过 v-on 指令（或 @ 简写）来绑定事件监听器，执行特定的 JavaScript 函数。

示例：

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      greet() {
        alert(this.message);
      }
    }
  });
</script>

双向数据绑定

v-model 是 Vue 提供的双向数据绑定指令，通常用于表单控件。它实现了视图与数据的双向同步。

示例：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Type something'
    }
  });
</script>

实现原理

事件处理通过 v-on 指令将 DOM 事件绑定到 Vue 实例的方法中。v-model 双向数据绑定依赖于 input、change 事件监听器和数据更新同步，实现数据与视图的双向绑定。

5. 计算属性与侦听器

计算属性

计算属性是基于依赖缓存的属性，只在依赖的值发生变化时重新计算。相比于在模板中使用方法，计算属性更加高效。

示例：

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

侦听器（Watchers）

侦听器用于观察数据的变化，并在变化时执行回调函数。适合处理异步或复杂的逻辑。

示例：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    },
    watch: {
      message(newValue) {
        console.log('Message changed to:', newValue);
      }
    }
  });
</script>

实现原理

计算属性依赖于 Vue 的响应式系统，只有在依赖的值发生变化时才会重新计算。侦听器则通过观察者模式，在特定数据变化时执行指定的回调函数。

Vue.js 的底层原理

Vue.js 的核心在于其响应式系统与虚拟 DOM。响应式系统通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现对数据的劫持，检测数据变化，通知视图更新。虚拟 DOM 则通过对比新旧 DOM 树的差异（diff 算法），仅更新必要的部分，大幅提高渲染性能。

响应式原理（Vue 2）

Vue 2 使用 Object.defineProperty() 来劫持数据对象的属性，动态添加 getter 和 setter，检测到数据变化时触发视图更新。

响应式原理（Vue 3）

Vue 3 使用 Proxy 来拦截对对象的操作，具备更强的能力，支持对象和数组的新增属性检测，并且性能更好。

虚拟 DOM 原理

虚拟 DOM 是 Vue 内部表示 UI 结构的抽象，数据变化时，Vue 通过 diff 算法比较新旧虚拟 DOM，生成最小的变化操作，直接应用到真实 DOM 上。

评论区
评论列表
menu