# 前端框架-Vue概述

最新推荐文章于 2024-10-17 17:31:06 发布

周星0927

最新推荐文章于 2024-10-17 17:31:06 发布

阅读量1k

点赞数 14

文章标签： vue.js 前端框架 javascript

本文链接：https://blog.youkuaiyun.com/m0_57271017/article/details/142219199

版权

概念介绍

Vue是一套构建用户界面的渐进式框架

什么是构建用户界面？

基于数据渲染出用户可以看到的界面

什么是渐进式?

Vue 被设计为可以逐步采用。开发者可以在一个现有的项目中逐渐引入 Vue 的功能，从简单的视图绑定开始，然后根据需要添加更多的 Vue 特性，如组件和路由等。

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：
Vue核心包开发 (场景：局部模块改造)
Vue核心包&Vue插件&工程化 (场景：整站开发)

Vue的核心特点

数据驱动视图：Vue 采用了响应式的数据绑定系统。当数据发生变化时，Vue 会自动更新与之绑定的 DOM 元素，开发者不需要手动操作 DOM 来反映数据的变化，大大简化了开发过程和提高了开发效率。例如：

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

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

当改变 app.message 的值时，页面上显示的内容会自动更新。

组件化开发：Vue 允许将复杂的用户界面拆分成一个个独立的、可复用的组件。每个组件都有自己的模板、数据和逻辑。例如：

<template>
    <div class="my-component">
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
    </div>
</template>

<script>
    export default {
        name: 'MyComponent',
        data() {
            return {
                title: 'Component Title',
                content: 'Component content'
            }
        }
    }
</script>

<style scoped>
   .my-component {
        border: 1px solid #ccc;
        padding: 10px;
    }
</style>

这些组件可以在不同的地方被复用，提高了代码的可维护性和可扩展性。

Vue的优势

**易用性：**提供了简洁清晰的 API，开发者可以快速上手。例如，通过指令（如 v - bind、v - if、v - for 等）可以方便地实现数据绑定、条件渲染和列表渲染等常见操作。

**虚拟DOM：**Vue 在更新 DOM 时采用了虚拟 DOM（Virtual DOM）技术。当数据发生变化时，Vue 首先会在虚拟 DOM 上进行计算和比较，找出最小化的 DOM 操作，然后再将这些操作应用到实际的 DOM 上，减少了不必要的 DOM 操作，提高了性能。

Vue2和Vue3的区别

api：

**vue2：**vue2的api写法是option(选项式)API，对于新手来说容易上手，按照固定选项实现功能即可，但是这同样又有一个缺点，因为代码是分散的所以代码的可读性/维护不是很优化好。示例代码如下：

<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.jpeg" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
</template>

<!-- vue2 的写法 代码是分散的，可读性不好 -->
<script>
export default {
  data() {
    return {
      show: true,
      count: 0,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    increment() {
      this.count++;
    },
  },
};
</script>

vue3： vue3的api是composition(组合式)API，功能代码组合在一起，相比vue2，vue3的代码可读性和/维护更好。示例代码如下：

<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.png" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script>
//  相对于选项式API增强了代码的可读性
import { ref } from 'vue';
export default {
  setup () {
    // 显示隐藏
    const show = ref(true)
    const toggle = () => {
      show.value = !show.value
    }
    // 计数器
    const count = ref(0)
    const increment = () => {
      count.value ++
    }

    return { show, toggle, count, increment }
  }
};
</script>

// setup语法糖
<script setup lang="ts">
//  相对于选项式API增强了代码的可读性
import { ref } from 'vue';
    // 显示隐藏
    const show = ref(true)
    const toggle = () => {
      show.value = !show.value
    }
    // 计数器
    const count = ref(0)
    const increment = () => {
      count.value ++
    }
</script>