Vue 2 原理的Tips（很值得看）🌀

问题一：Vue2的简单例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 2 简单示例</title>
    <!-- 引入 Vue 2 的 CDN 链接 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <!-- 定义 Vue 实例挂载的 DOM 节点 -->
    <div id="app">
        <!-- 数据绑定：显示 message 数据 -->
        <p>{{ message }}</p>
        <!-- 事件处理：点击按钮调用 reverseMessage 方法 -->
        <button @click="reverseMessage">反转消息</button>
        <!-- 组件使用 -->
        <my-component></my-component>
    </div>
    <script>
        // 定义一个简单的组件
        Vue.component('my-component', {
            template: '<p>这是一个 Vue 2 组件</p>'
        });

        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                // 定义数据
                message: 'Hello, Vue 2!'
            },
            methods: {
                // 定义方法
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        });
    </script>
</body>

</html>

代码解释：

HTML 部分：
- 页面中定义了一个 div 元素，其 id 为 app，这是 Vue 实例的挂载点。
- {{ message }} 是 Vue 的插值语法，用于将 data 中的 message 数据显示在页面上。
- <button @click="reverseMessage"> 是 Vue 的事件绑定语法，当按钮被点击时，会调用 methods 中的 reverseMessage 方法。
- <my-component></my-component> 是自定义组件的使用，它会显示组件模板中定义的内容。
JavaScript 部分：
- Vue.component 用于定义一个全局组件 my-component，并指定其模板内容。
- new Vue 创建一个 Vue 实例，el 指定实例挂载的 DOM 元素，data 是一个对象，包含了实例的数据，methods 是一个对象，包含了实例的方法。
- reverseMessage 方法将 message 字符串反转。

问题二：Vue 实例的挂载点. 如何理解 ？

在 Vue 2 中，div 元素（或者其他 HTML 元素）的 id 为 app 作为 Vue 实例的挂载点，是 Vue 应用与 HTML 页面建立连接的关键步骤。下面为你详细解释这一概念。

挂载点的作用

在 Vue 里，Vue 实例负责管理应用的数据、逻辑和视图更新。然而，Vue 实例本身并不会直接在页面上显示内容，它需要一个具体的 HTML 元素作为 “容器”，将其管理的视图渲染到这个容器里面。这个 “容器” 就是挂载点，它是 Vue 实例与 HTML 页面交互的桥梁。

代码示例及详细解释

以下是之前示例代码的关键部分：

1. HTML 中的挂载点定义

<div id="app">
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转消息</button>
    <my-component></my-component>
</div>

这里定义了一个 div 元素，其 id 属性设置为 app。这个 div 内部包含了一些 Vue 特定的语法，如 {{ message }} 是插值表达式，用于显示 Vue 实例中的数据；@click="reverseMessage" 是事件绑定，用于触发 Vue 实例中的方法；<my-component></my-component> 是自定义组件的使用。这些内容在 Vue 实例挂载之前，只是普通的 HTML 文本，Vue 实例挂载后会对其进行解析和渲染。

2. JavaScript 中的挂载操作

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue 2!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('');
        }
    }
});

在创建 Vue 实例时，通过 el 选项指定了挂载点。el: '#app' 表示将这个 Vue 实例挂载到 id 为 app 的 HTML 元素上。当 Vue 实例挂载后，它会对挂载点及其内部的 HTML 内容进行解析，将插值表达式替换为实际的数据，绑定事件，渲染组件等，从而将 Vue 实例的逻辑和数据反映到页面上。

3.总结

挂载点是 Vue 实例与 HTML 页面的连接点，通过指定挂载点，Vue 实例可以将自己管理的视图渲染到页面上，实现数据的动态展示和交互。同时，Vue 实例也会监听挂载点内部的用户操作，如点击事件等，并根据这些操作更新数据和视图。

问题三：在挂载之前，下面的写法不会报错吗？

<div id="app">
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转消息</button>
    <my-component></my-component>
</div>

在 Vue 挂载之前，这段 HTML 代码本身在浏览器中不会报错。

原因是这段代码是符合 HTML 语法规范的常规代码。其中 {{ message }} 会被浏览器当作普通文本处理，@click 指令在未被 Vue 解析之前也只是被浏览器视为普通的 HTML 属性，不会引发错误。自定义组件 <my - component> 在没有被 Vue 处理时，浏览器也会将其当作一个未知的标签来处理，虽然它不会有实际的功能，但也不会导致语法错误。

当 Vue 实例挂载后，它会对挂载点内的这些特殊语法和组件进行解析和处理，将其转换为具有动态数据展示、事件绑定和组件渲染等功能的页面元素。

在一个 Vue 工程中，通常不需要很多挂载点，一般有一个根挂载点就足够了。

在 Vue 项目中，根挂载点是整个 Vue 应用的入口和核心容器。它作为 Vue 实例的挂载目标，用于将 Vue 应用的所有组件、数据和逻辑整合在一起，并渲染到对应的 DOM 元素及其子元素中。例如，在一个典型的 Vue 单页面应用中，根挂载点可以是一个具有特定id的div元素，如id="app"，所有的页面内容和交互都在这个根挂载点及其子组件中进行管理和展示。

问题四：vue 挂载点，是如何实现的？

在 Vue 中，挂载点是将 Vue 实例与 DOM 元素关联起来的关键机制，下面从原理、源码层面以及示例代码等方面详细介绍其实现方式。

原理概述

Vue 挂载点的实现主要基于以下几个步骤：

创建 Vue 实例：使用 new Vue() 构造函数创建一个 Vue 实例，并传入配置选项，其中 el 选项用于指定挂载点。
解析挂载点：Vue 实例在初始化过程中会解析 el 选项，找到对应的 DOM 元素。
挂载过程：Vue 会对挂载点及其子元素进行编译，将模板中的指令、插值表达式等转换为实际的 DOM 操作和数据绑定，最终将编译后的结果替换掉挂载点原来的内容。

源码层面的简单解释

在 Vue 的源码中，挂载过程主要涉及到 Vue.prototype.$mount 方法。以下是简化的源码逻辑：

// 简化的 Vue 构造函数
function Vue(options) {
    this._init(options);
}

// 初始化方法
Vue.prototype._init = function (options) {
    // 合并选项
    this.$options = options;
    // 如果有 el 选项，调用 $mount 方法进行挂载
    if (this.$options.el) {
        this.$mount(this.$options.el);
    }
};

// 挂载方法
Vue.prototype.$mount = function (el) {
    // 获取挂载点的 DOM 元素
    el = el && document.querySelector(el);
    if (!el) {
        return;
    }
    // 编译模板并挂载
    const vm = this;
    const options = vm.$options;
    // 这里省略了复杂的编译过程
    // ...
    // 将编译后的结果替换挂载点的内容
    el.parentNode.replaceChild(vm.$el, el);
    return vm;
};

示例代码及详细解释

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 挂载点示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <!-- 插值表达式 -->
        <p>{{ message }}</p>
    </div>
    <script>
        // 创建 Vue 实例
        new Vue({
            // 指定挂载点
            el: '#app',
            // 数据选项
            data: {
                message: 'Hello, Vue!'
            }
        });
    </script>
</body>

</html>

代码解释

HTML 部分：
- <div id="app"> 是挂载点，它包含了一个插值表达式 {{ message }}，在 Vue 实例挂载之前，这只是普通的文本。
JavaScript 部分：
- new Vue() 创建了一个 Vue 实例。
- el: '#app' 指定了挂载点，Vue 会根据这个选择器找到对应的 DOM 元素。
- data 选项定义了一个数据属性 message。
- 在 Vue 实例挂载过程中，会对 #app 及其子元素进行编译，将 {{ message }} 替换为 data 中 message 的实际值，最终将编译后的结果替换掉 #app 原来的内容。

通过上述步骤，Vue 实现了将 Vue 实例与指定的 DOM 元素关联起来，从而将 Vue 的数据和逻辑应用到页面上，实现动态的视图更新和交互。

问题五：举个vue单体应用的例子？

下面为你提供一个简单的 Vue 单页面应用（SPA）示例，使用 Vue 2 和 Vue Router 实现一个包含多个路由页面的应用。

项目结构

vue-spa-example/
├── index.html
├── js/
│   ├── app.js
│   ├── router.js
│   └── components/
│       ├── Home.vue
│       └── About.vue

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue SPA Example</title>
    <!-- 引入 Vue 和 Vue Router 的 CDN 链接 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.js"></script>
    <script src="js/router.js"></script>
    <script src="js/app.js"></script>
</head>

<body>
    <div id="app">
        <!-- 导航链接 -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <!-- 路由出口 -->
        <router-view></router-view>
    </div>
</body>

</html>

router.js

// 引入组件
import Home from './components/Home.vue';
import About from './components/About.vue';

// 定义路由
const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

// 创建路由实例
const router = new VueRouter({
    routes
});

export default router;

app.js

import Vue from 'vue';
import router from './router.js';

// 创建 Vue 实例
new Vue({
    router,
    el: '#app'
});

Home.vue

<template>
    <div>
        <h1>Home Page</h1>
        <p>Welcome to the home page of our Vue SPA!</p>
    </div>
</template>

<script>
export default {
    name: 'Home'
};
</script>

About.vue

<template>
    <div>
        <h1>About Page</h1>
        <p>This is the about page of our Vue SPA.</p>
    </div>
</template>

<script>
export default {
    name: 'About'
};
</script>

代码解释

index.html：这是应用的入口文件，引入了 Vue 和 Vue Router 的 CDN 链接，以及 router.js 和 app.js 文件。在页面中使用 <router-link> 组件创建导航链接，<router-view> 组件作为路由出口，用于显示当前路由对应的组件。
router.js：配置路由信息，定义了两个路由：根路径 / 对应 Home 组件，/about 路径对应 About 组件。创建了一个 VueRouter 实例并导出。
app.js：创建 Vue 实例，将路由实例注入到 Vue 实例中，并将其挂载到 id 为 app 的 DOM 元素上。
Home.vue 和 About.vue：分别是首页和关于页面的组件，包含简单的 HTML 模板和组件定义。

问题六：vue挂载点是如何生效的，也就是vue开发html是如何渲染的？

Vue 挂载点生效以及 HTML 渲染的过程是一个较为复杂且包含多个步骤的流程，下面将从原理、详细步骤以及源码层面为你详细介绍。

原理概述

Vue 实例需要一个具体的 DOM 元素作为挂载点，通过这个挂载点将 Vue 实例与页面上的 HTML 元素关联起来。Vue 会对挂载点及其子元素进行编译，将模板中的指令、插值表达式等转换为实际的 DOM 操作和数据绑定，最终实现数据驱动的视图更新。

详细步骤

1. 创建 Vue 实例

当使用 new Vue() 创建一个 Vue 实例时，会传入一个配置对象，其中 el 选项用于指定挂载点。例如：

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!'
    }
});

这里 el: '#app' 表示将 Vue 实例挂载到 id 为 app 的 DOM 元素上。

2. 解析挂载点

在 Vue 实例初始化过程中，会解析 el 选项，找到对应的 DOM 元素。如果 el 是一个 CSS 选择器，Vue 会使用 document.querySelector 方法来查找元素；如果 el 本身就是一个 DOM 元素，则直接使用该元素。

3. 模板编译

获取模板：如果 template 选项存在，则使用该模板；如果不存在，则使用挂载点元素的 innerHTML 作为模板。
编译模板：Vue 会将模板字符串解析成抽象语法树（AST），然后将 AST 转换为渲染函数。渲染函数是一个 JavaScript 函数，用于生成虚拟 DOM。

4. 挂载过程

创建虚拟 DOM：在初始化阶段，调用渲染函数生成虚拟 DOM。虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。
初次渲染：将虚拟 DOM 转换为真实 DOM，并替换掉挂载点原来的内容。这个过程会触发 DOM 的插入操作，将编译后的内容显示在页面上。

5. 数据绑定和更新

响应式原理：Vue 使用 Object.defineProperty() 方法将数据对象的属性转换为 getter/setter，从而实现数据的响应式。当数据发生变化时，会触发相应的 setter 方法。
更新视图：数据变化后，会重新调用渲染函数生成新的虚拟 DOM，然后通过对比新旧虚拟 DOM 的差异，只更新需要更新的真实 DOM 节点，实现高效的视图更新。

源码层面的简单解释

在 Vue 的源码中，挂载过程主要涉及到 Vue.prototype.$mount 方法。以下是简化的源码逻辑：

// 简化的 Vue 构造函数
function Vue(options) {
    this._init(options);
}

// 初始化方法
Vue.prototype._init = function (options) {
    // 合并选项
    this.$options = options;
    // 如果有 el 选项，调用 $mount 方法进行挂载
    if (this.$options.el) {
        this.$mount(this.$options.el);
    }
};

// 挂载方法
Vue.prototype.$mount = function (el) {
    // 获取挂载点的 DOM 元素
    el = el && document.querySelector(el);
    if (!el) {
        return;
    }
    const vm = this;
    const options = vm.$options;
    // 获取模板
    let template = options.template;
    if (!template) {
        template = el.outerHTML;
    }
    // 编译模板，这里省略了复杂的编译过程
    // ...
    // 创建渲染函数
    const render = compileToRenderFunction(template);
    vm.$options.render = render;
    // 挂载前的钩子
    callHook(vm, 'beforeMount');
    // 创建虚拟 DOM 并渲染到真实 DOM
    vm._update(vm._render());
    // 挂载后的钩子
    callHook(vm, 'mounted');
    return vm;
};

// 简化的编译函数
function compileToRenderFunction(template) {
    // 解析模板为 AST
    const ast = parse(template);
    // 将 AST 转换为渲染函数
    const code = generate(ast);
    return new Function(code);
}

// 简化的调用钩子函数
function callHook(vm, hook) {
    const handlers = vm.$options[hook];
    if (handlers) {
        for (let i = 0; i < handlers.length; i++) {
            handlers[i].call(vm);
        }
    }
}

通过以上步骤，Vue 实现了将 Vue 实例挂载到指定的 DOM 元素上，并将模板渲染为真实的 DOM。在数据发生变化时，Vue 会自动更新视图，确保页面显示的数据始终是最新的。

92IT

Just love IT.

Vue 2 原理的Tips（很值得看）🌀