Vue 基础

 前端   打工人   2024-09-14 07:00   181
  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 双向数据绑定依赖于 inputchange 事件监听器和数据更新同步,实现数据与视图的双向绑定。


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 上。