[JavaScript知识库] Vue3相较于Vue2做出了那些改变

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue3相较于Vue2做出了那些改变 -> 正文阅读

[JavaScript知识库]Vue3相较于Vue2做出了那些改变

1.整体优化

1. 性能方面的提升

1.1 首次渲染更快

1.2 diff算法更快

1.3 内存占用更小

2. 更好的Typescript支持

3.Composition API （这是重点内容）

2.项目搭建

与Vue2搭建项目一样，只是在后面选择时选择Vue3.X

在项目搭建完成之后我们就可以看见变化

在入口文件 main.js 中我们就可以发现

这是Vue2.X

// 这是Vue2中的入口文件
new Vue({
  el: '#app',
  render: h => h(App)
})

?这是Vue3.X

// 这是Vue3中的入口文件
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

?Vue3 中还更新了 template内，根元素不再限定只有一个

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

3.双向绑定

在Vue2中我们使用Object.defineProperty来做劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知，而在Vue3中则通过ES6中的proxy来做劫持，当数据发生改变发出通知。

代码示例

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
      <title>vue3.0数据双向绑定</title>
  </head>
  <body>
      <div>
         <input type="text" id="input">
         <span id="text"></span>
     </div>
 </body>
 </html>
 <script>
     var obj = {};
     var obj1 = new Proxy(obj, {
         // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
         get: function (target, key, receive) {
             // 返回该属性值
             return target[key];
         },
         set: function (target, key, newVal, receive) {
             // 执行赋值操作
             target[key] = newVal;
             document.getElementById('text').innerHTML = target[key];
         }
     })
     document.addEventListener('keyup', function (e) {
         obj1[0] = e.target.value;
     });
 </script>

4.Vue3中的两种API

Vue3中提供了?两种API：选项式API和组合式API

1：组合式API（重点）

组合式API代码示例

<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDivFlag">一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeBlue">蓝色</button>
    <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 功能一
    const showDivFlag = ref(true)
    function show() {
      showDivFlag.value = true
    }
    function hide() {
      showDivFlag.value = false
    }
    // 功能二

    const fontColor = ref('')
    function changeRed() {
      fontColor.value = 'red'
    }
    function changeBlue() {
      fontColor.value = 'blue'
    }
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>

由此代码可以看出组合式中将数据和行为都放在了setup中，这样不利于后期的维护，所以我们需要对其进行拆解