Vue3.0与2.0对比

最新推荐文章于 2024-06-25 16:02:02 发布

要这头发有何用·

最新推荐文章于 2024-06-25 16:02:02 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41202187/article/details/126176196

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

vue项目构建

vue是渐进式的框架，意思是你可以用script脚本引入，可以npm安装vue也可以利用官方构建工具构建一个vue工程。但是现在大部分项目都是构建工程。vue3构建方式有两种：

vue官方脚手架：

vue-cli是官方提供的项目构建脚手架，可以构架vue2和vue3，并且在构建之初可以选择自己想要的配置，非常好用。

npm install -g @vue/cli
vue create hello-world

在控制台中可以选择项目的配置，包括vue版本，是否使用ts，vuex等。非常方便。

vite：

vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
npm init vite-app
vite不可以在项目创建之初为我们提供配置，只是一个单页面，需要自己后面去构建。

二、vue目录介绍

vue.config.js简介：

https://cli.vuejs.org/zh/config/

三、vue3.0新特性

组合式API：setup

以往的vue中，代码是根据组件选项分区的。比如数据全部要定义在data下，方法全部要写在method下。
这样分区造成一个问题，如果页面功能多，会将单个逻辑分布到文件的各个地方，不方便代码阅读，而且容易造成单个文件很大，不好拆分。
vue3.0的组合式API解决了两个问题：

代码根据逻辑分区，
大文件的拆分。举个栗子，下图是vue2的代码分区，同样的颜色代码表他们是实现一个功能的。

vue3新增了setup选项。把新增两个字重点标出来是说，vue2的所有选项在vue3里是可以使用的。就是在vue3中完全使用vue2的那套写法，语法上没有任何问题。

setup选项如何工作

setup的生命周期：
新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。
读到这会有一个疑惑，因为我们知道vue2中，是要在created之后，才能操作data和method。在setup这个时间节点，应该是没有this的。那我们怎么去调用vuex做网络请求呢？
直接用是不行的，但是可以使用vuex的useStore方法获取store。所以我们完全可以在setup中做网络请求和数据初始化，如下：

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'About',
  props: {
  },
  setup () {
    const store = useStore() // 获取store实例
    store.dispatch('getTest').then(res => {
      console.log(res)
    })
    console.log(store.state.test)
    // return { user }
  }
}
</script>

setup的输入和输出：

setup输入的是props，也就是父组件传进来的值。return的是一个对象，这个对象里面的值可以在页面的任何地方直接使用。

setup中可以做哪些操作：

vue3没有放弃之前的生命周期函数，在setup中我们依然可以调用vue2中的那些生命周期，在特定的周期做特定的事情。
在这里插入图片描述

为了使setup中返回的对象是响应式的，所以一般使用ref函数定义这些变量。
举个栗子：

<template>
  <div>
<!--    {{menus.hsmenu2}}-->
    <p>{{ t("menus.hsmenu2") }}</p>
    <el-input v-model="input" />
    <p>{{model.var1}}</p>
    <p>{{model.var1Value}}</p>
  </div>
</template>

<script lang="ts">
import { useI18n } from "vue-i18n";
import { defineComponent, ref } from "vue";
import model1 from './model1'
export default defineComponent({
  name: "Menu2",
  setup() {
    const { t } = useI18n();
    const model = model1()
    return {
      input: ref(""),
      t,
      model
    };
  }
});
</script>

model1：

import {ref, onMounted, computed} from 'vue'
export default function model1 () {
  const var1 = ref(1)
  const f1 = async () => {
    var1.value = 2
    console.log('do f1')
  }
  const var1Value = computed(() => {
    return var1.value + 3
  })
  onMounted(f1)
  return {
    var1,
    var1Value
  }
}

响应性实现的变化

什么是响应性：响应式即对外界的变化做出的反应的一种形式
vue2使用对象的原型链实现响应性，通过实现对象的set和get方法，在对象变化时可以进行页面刷新。局限是无法监听数组元素的变化。
vue3使用proxy代理实现响应性，用proxy对象把变量包裹，并且使 Vue 能够在 property 的值被访问或修改的情况下进行依赖跟踪和变更通知。

Teleport、片段、css变量等

teleport可以实现更改dom结构。比如把一个dom从原来的位置移到body下。作用就是可以脱离原本的dom。

<teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
</teleport>

其他变化

vue2中，一个vue文件只能有一个根。所有的元素都要在这个根下。导致项目的嵌套会增多，比如我们的管理系统。vue3如果不想，可以不用这样做了。
vue3的css中可以使用js的变量：

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>