vue3入门知识（一）

news2024/11/25 10:36:20

vue3简介

性能的提升

  • 打包大小减少41%
  • 初次渲染快55%，更新渲染快133%
  • 内存减少54%

源码的升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Shaking

新的特性

1. Composition API（组合API）

  • setup
  • ref与reactive
  • computed与watch

2. 新的内置组件

  • Fragment
  • Teleport
  • Suspense

3. 其他改变

  • 新的生命周期钩子
  • data选项应始终被声明为一个函数
  • 移除keyCode支持作为v-on的修饰符

创建vue3项目

基于vue-cli创建（基于webpack）

// 安装或升级@vue.cli
npm install -g @vue/cli
// 执行创建命令
vue create project_name

基于vite创建

vite是新一代前端构建工具，官网地址：Vite中文网

vite的优势：

  • 轻量快速的热重载（HMR），能实现极速的服务启动
  • 对TypeScript、JSX、CSS等支持开箱即用
  • 真正的按需编译，不再等待整个应用编译完成
  • webpack构建与vite构建对比图如下：

webpack构建：

vite构建： 

创建项目的命令 

npm create vue@latest

Tips：

  • 确保 Node.js 版本支持 Vue 3：推荐使用 Node.js 14 及以上版本

尝试使用node版本 14.21.3，创建项目时有报错，升级node版本为 16.20.2 之后就可以了

创建项目时的一些配置项设置，仅供参考

安装好的项目文件目录：

这个文件里面有报错，执行一下 npm install 就好了

并且这个文件里面的内容不能删除，他的作用是告诉 TypeScript 引入 Vite 的类型定义

可能还会有上图中这样的报错提示，在确保已经执行npm install之后，重新打开编辑器，报错提示就会消失了

选项式API的弊端

vue2（选项式API）数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改data、methods、computed，不便于维护和复用

组合式API的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码有序的组织在一起

setup

setup中的this是undefined，vue3中已经弱化this了

setup的执行顺序在beforeCreate之前

setup的返回值可以是一个渲染函数，返回内容直接渲染在页面上

return () => '直接在页面上展示的内容'
<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Person',
    setup() {
        // 这样写的name age tel不是响应式的 vue2中是写在data中的
        let name = '张三';
        let age = 18;
        const tel = '13800138000';

        function changeName() {
            name = '李四'; // 这样修改之后页面不会更新 值确实改了但不是响应式的 因此页面未更新
        };

        function changeAge() {
            age += 1;
        };

        function showTel() {
            alert(tel);
        };

        // 将数据、方法交出去，模板中才可以使用
        return {
            name,
            age,
            tel,
            changeName,
            changeAge,
            showTel,
        };
    },
};
</script>

<style scoped lang="less">
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

data、methods可以和setup同时存在

data中可以读取setup中的数据，通过this.xxx来获取，但是setup中是无法读取data中的数据的，因为setup是在data之前执行的

setup语法糖

<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Person',
};
</script>

<script setup lang="ts">
// 这样写的name age tel不是响应式的 vue2中是写在data中的
let name = '张三';
let age = 18;
const tel = '13800138000';

function changeName() {
    name = '李四'; // 这样修改之后页面不会更新 值确实改了但不是响应式的 因此页面未更新
};
function changeAge() {
    age += 1;
};
function showTel() {
    alert(tel);
};
</script>

<style scoped lang="less">
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

由于这样需要写两块script标签 ，第一块的主要作用是自定义组件名称，可以借助插件，省略第一块script标签

npm i vite-plugin-vue-setup-extend -D

安装之后在 vite.config.ts 中进行引入配置

<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
// 这样写的name age tel不是响应式的 vue2中是写在data中的
let name = '张三';
let age = 18;
const tel = '13800138000';

function changeName() {
    name = '李四'; // 这样修改之后页面不会更新 值确实改了但不是响应式的 因此页面未更新
};
function changeAge() {
    age += 1;
};
function showTel() {
    alert(tel);
};
</script>

<style scoped lang="less">
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

ref

用于（可以）定义基本类型的响应式数据，也可以定义对象类型的响应式数据，想让哪个数据是响应式的 就用ref包一下，在js代码中使用响应式数据需要用 .value 在模板中不需要

<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>地址：{{ address }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { ref } from 'vue';

let name = ref('张三');
let age = ref(18);
const tel = '13800138000';
const address = '北京';

function changeName() {
    name.value = '李四';
};
function changeAge() {
    age.value += 1;
};
function showTel() {
    alert(tel);
};
</script>

<style scoped lang="less">
.person {
    button {
        display: block;
        margin: 10px 0;
    }
}
</style>

 定义对象类型的响应式数据，表面使用的是ref，其实底层用的还是reactive

<template>
    <div class="person">
        <h2>汽车信息: 一辆{{ car.brand }}车，价值{{ car.price }}</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <br>
        <h2>游戏列表: </h2>
        <ul>
            <li v-for="game in games" :key="game.id">
                {{ game.name }}
            </li>
        </ul>
        <button @click="changeFirstGameName">修改第一个游戏的名字</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { ref } from 'vue';

let car = ref({
    brand: 'BMW',
    price: 100,
});
let games = ref([
    { name: 'LOL', id: 1 },
    { name: 'CSGO', id: 2 },
    { name: 'DOTA', id: 3 },
]);

function changePrice() {
    car.value.price += 10;
};
function changeFirstGameName() {
    games.value[0].name = '王者荣耀';
};
</script>

reactive

用于（只能）定义对象类型的响应式数据

<template>
    <div class="person">
        <h2>汽车信息: 一辆{{ car.brand }}车，价值{{ car.price }}</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <br>
        <h2>游戏列表: </h2>
        <ul>
            <li v-for="game in games" :key="game.id">
                {{ game.name }}
            </li>
        </ul>
        <button @click="changeFirstGameName">修改第一个游戏的名字</button>
        <br>
        <h2>{{ obj.a.b.c }}</h2>
        <button @click="changeObj">修改obj</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { reactive } from 'vue';

let car = reactive({
    brand: 'BMW',
    price: 100,
});
let games = reactive([
    { name: 'LOL', id: 1 },
    { name: 'CSGO', id: 2 },
    { name: 'DOTA', id: 3 },
]);
let obj = reactive({
    a: {
        b: {
            c: 666,
        }
    }
})

function changePrice() {
    car.price += 10;
};
function changeFirstGameName() {
    games[0].name = '王者荣耀';
};
function changeObj() {
    // reactive的响应式是深层次的
    obj.a.b.c = 1000;
};
</script>

ref与reactive

1. ref用来定义：基本类型数据、对象类型数据

2. reactive用来定义：对象类型数据

区别：

1. ref创建的变量必须使用 .value （可以使用volar插件自动添加 .value） 

2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）

<template>
    <div class="person">
        <h2>汽车信息: 一辆{{ car.brand }}车，价值{{ car.price }}</h2>
        <button @click="changeCar">修改汽车</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { reactive } from 'vue';

let car = reactive({
    brand: 'BMW',
    price: 100,
});

function changeCar() {
    // 这样会失去响应式
    // car = {
    //     brand: '奔驰',
    //     price: 200,
    // };
    
    // 这样不会失去响应式
    Object.assign(car, {
        brand: '奔驰',
        price: 200,
    });
};
</script>

 使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref

2. 若需要一个响应式对象，层级不深，ref、reactive都可以

3. 若需要一个响应式对象，且层级较深，推荐使用reactive

toRefs

把一个响应式对象中的内容拿出来，依然具备响应式的能力

<template>
    <div class="person">
        <h2>{{ person.name }}</h2>
        <h2>{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { reactive, toRefs } from 'vue';

const person = reactive({
    name: '张三',
    age: 18,
});

// 直接从响应式对象中解构出来的变量都不是响应式的 需要toRefs包裹才会变成响应式的
let { name, age } = toRefs(person);

function changeName() {
    // 这里修改之后 name、person.name 都会改变
    name.value += '~';
};
function changeAge() {
    age.value += 1;
};
</script>

<style scoped lang="less">
.person {
    button {
        margin: 10px;
    }
}
</style>

toRef

作用和toRefs一样，但每次只能取一个

<template>
    <div class="person">
        <h2>{{ person.name }}</h2>
        <h2>{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
    </div>
</template>

<script setup lang="ts" name="Person"> 
import { reactive, toRef } from 'vue';

const person = reactive({
    name: '张三',
    age: 18,
});

let name = toRef(person, 'name');

function changeName() {
    // 这里修改之后 name、person.name 都会改变
    name.value += '~';
};
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2234359.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【产品经理】工业互联网企业上市之路

【产品经理】工业互联网企业上市之路

树根互联2022年6月2日提交招股书之后&#xff0c;因财务资料超过六个月有效期加三个月延长期&#xff0c;2022年9月30日上市审核中止&#xff1b;2022年12月26日树根互联更新了2022年半年度财务资料&#xff0c;又九个月过去了&#xff0c;其上市进程将面临再一次中止。 处于上…
阅读更多...
Centos 7系统一键安装宝塔教程

Centos 7系统一键安装宝塔教程

服务器推荐青鸟云服务器&#xff0c;2H2G低至16元/月 官网地址&#xff1a; 所有产品_香港轻量云 2核 2G-A型_青鸟云 推荐Finalshell软件连接至服务器&#xff0c;下载地址&#xff1a; https://dl.hostbuf.com/finalshell3/finalshell_windows_x64.exe 下载完成后连接服务…
阅读更多...
Vue3-实现父子组件通信

Vue3-实现父子组件通信

Vue3-实现父子组件通信 父组件向子组件传值defineProps()代码示例 子组件给父组件传值defineEmits()示例代码 结语 &#x1f600;大家好&#xff01;我是向阳&#x1f31e;&#xff0c;一个想成为优秀全栈开发工程师的有志青年&#xff01; &#x1f4d4;今天来讨论前端中Vue3父…
阅读更多...
Imperva 数据库与安全解决方案

Imperva 数据库与安全解决方案

Imperva是网络安全解决方案的专业提供商&#xff0c;能够在云端和本地对业务关键数据和应用程序提供保护。公司成立于 2002 年&#xff0c;拥有稳定的发展和成功历史并于 2014 年实现产值1.64亿美元&#xff0c;公司的3700多位客户及300个合作伙伴分布于全球各地的90多个国家。…
阅读更多...
【TabBar嵌套Navigation案例-常见问题按钮-WebView-加载本地html文件 Objective-C语言】

【TabBar嵌套Navigation案例-常见问题按钮-WebView-加载本地html文件 Objective-C语言】

一、接下来，我们来说，webView如何加载本地的html文件 1.把这里的http：//www.baidu.com/ 如何替换成本地的html文件，实际上，我们只需要把URL替换一下就可以了， 然后呢，先给大家看一眼素材，在我们的help.json里边，比如说，第一个按钮， 如何领奖，这块儿有一个叫做htm…
阅读更多...
搜维尔科技：【煤矿虚拟仿真】煤矿企业、高校、科研单位-多语言支持、数字孪生、交互式学习体验

搜维尔科技：【煤矿虚拟仿真】煤矿企业、高校、科研单位-多语言支持、数字孪生、交互式学习体验

品牌&#xff1a;SouVR 发票&#xff1a;支持专票、普票 单位&#xff1a;套 版本号&#xff1a;1.0 包装清单&#xff1a;软件1套 软件形式&#xff1a;U盘、光盘 运行环境&#xff1a;windows 应用对象&#xff1a;煤矿企业、高校、科研单位 系统配置&#xff1a;…
阅读更多...
【CSS】标准怪异盒模型

【CSS】标准怪异盒模型

概念 CSS 盒模型本质上是一个盒子&#xff0c;盒子包裹着HTML 元素&#xff0c;盒子由四个属性组成&#xff0c;从内到外分别是&#xff1a;content 内容、padding 内填充、border 边框、外边距 margin 盒模型的分类 W3C 盒子模型(标准盒模型) IE 盒子模型(怪异盒模型) 两种…
阅读更多...
国标GB28181视频平台EasyCVR私有化视频平台工地防盗视频监控系统方案

国标GB28181视频平台EasyCVR私有化视频平台工地防盗视频监控系统方案

一、方案背景 在当代建筑施工领域&#xff0c;安全监管和防盗监控是保障工程顺利进行和资产安全的关键措施。随着科技进步&#xff0c;传统的监控系统已不足以应对现代工地的安全挑战。因此&#xff0c;基于国标GB28181视频平台EasyCVR的工地防盗视频监控系统应运而生&#xf…
阅读更多...
动态规划 —— dp 问题-打家劫舍II

动态规划 —— dp 问题-打家劫舍II

1.打家劫舍II 题目链接&#xff1a; 213. 打家劫舍 II - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/house-robber-ii/ 2. 题目解析 通过分类讨论&#xff0c;将环形问题转换为两个线性的“打家劫舍|” 当偷第一个位置的时候&#xff0c;rob1在&#…
阅读更多...
配置elk插件安全访问elk前台页面

配置elk插件安全访问elk前台页面

编辑els配置文件vim elasticsearch.yml,添加以下配置文件 用elk用户&#xff0c;启动els服务 关闭防火墙&#xff0c;查看els启动是否成功&#xff0c;通过是否启动java进程来判断 或者通过查看是否启动9200和9300端口来判断是否启动 交互模式启动密码配置文件interactive表示交…
阅读更多...
通过mybatis和mybatis plus 实现用户注册功能和基础的增删改查

通过mybatis和mybatis plus 实现用户注册功能和基础的增删改查

1,切分application的环境并引入依赖 通过将application.yml进行切分&#xff0c;切分成三个不同的环境&#xff0c;生产环境和开发环境&#xff0c;我们可以在不同情况下所需要的不同环境上进行相关的配置 我们对代码进行一次切分 application.yml spring:application:name…
阅读更多...
TypeError: Cannot read properties of undefined (reading ‘__asyncLoader‘)

TypeError: Cannot read properties of undefined (reading ‘__asyncLoader‘)

项目场景&#xff1a; vue3element-plus 项目场景&#xff1a;vue3element-plustsvite的技术栈开发的后台&#xff0c;一个后台列表页面&#xff0c;使用了ElTable组件 问题描述 页面提示报一个好像是异步的问题 runtime-core.esm-bundler.js:2261 Uncaught (in promise) Ty…
阅读更多...
大模型学习笔记------CLIP模型解读与思考

大模型学习笔记------CLIP模型解读与思考

大模型学习笔记------CLIP模型解读与思考 1、为什么提出CLIP模型2、CLIP模型详解3、CLIP模型的重要意义 上文已经讲到&#xff0c;我认为多模态的大模型是最有前途的大模型&#xff0c;首先学习的就是CLIP这个模型。 CLIP&#xff08;Contrastive Language-Image Pretraining&…
阅读更多...
【大数据学习 | kafka】kafka的ack和一致性

【大数据学习 | kafka】kafka的ack和一致性

1. ack级别 上文中我们提到过kafka是存在确认应答机制的&#xff0c;也就是数据在发送到kafka的时候&#xff0c;kafka会回复一个确认信息&#xff0c;这个确认信息是存在等级的。 ack0 这个等级是最低的&#xff0c;这个级别中数据sender线程复制完毕数据默认kafka已经接收到…
阅读更多...
完美解决mysql -u root -p ‘mysql‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件

完美解决mysql -u root -p ‘mysql‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件

如果你已经安装了mysql8.0&#xff0c;但是还出现是下面的问题&#xff0c;解决方法是从根目录打开或者配置环境变量。 遇到的错误主要是与命令行环境和 MySQL 命令无法识别有关。这里我会逐步分析问题&#xff0c;并给出可能的解决方法。 问题描述和分析&#xff1a; ‘my…
阅读更多...
UE5 材质篇 1 如何偏移顶点

UE5 材质篇 1 如何偏移顶点

顶点偏移 start content里的plane长这样 我们进行一点顶点偏移就能长这样 XY加起来乘个缩放系数扔给sin结果乘个缩放系数即可
阅读更多...
求助帖【如何学习核磁共振的原理】

求助帖【如何学习核磁共振的原理】

最近提前进组了 我完全不懂磁共振的相关知识 想问问各位大佬有没有推荐的学习路线 或者是学习资料、论坛都可以的&#xff08;我做的方向是磁共振成像技术&#xff09; 老师给了一本书&#xff0c;但是有点看不懂&#xff0c;全英文的 叫Principles Of Magnetic Resonance …
阅读更多...
vite＋vue项目创建流程；npm error enoent Could not read package.json异常报错问题

vite＋vue项目创建流程；npm error enoent Could not read package.json异常报错问题

前提概要&#xff1a;默认下载好node vue vite等等东西啊 新建文件夹&#xff0c;放项目管理员身份运行命令行&#xff0c;先转到所在大盘&#xff0c;然后再cd到具体的新建文件夹&#xff0c;执行npm init vitelatest命令。 管理员身份运行vscode&#xff0c;打开刚才新建的v…
阅读更多...
[mysql]修改表和课后练习

[mysql]修改表和课后练习

目录 DDL数据定义语言 添加一个字段 添加一个字段到最后一个 添加到表中的第一个一个字段 选择其中一个位置: 修改一个字段:数据类型,长度,默认值(略) 重命名一个字段 删除一个字段 重命名表 删除表 清空表 DCL中事务相关内容 DCL中COMMIT和ROLLBACK的讲解 对比TR…
阅读更多...
秒杀系统的设计与压测

秒杀系统的设计与压测

环境准备 数据库 完成demo至少需要两个数据表&#xff0c;一个customer表示秒杀的用户&#xff0c;一个sec_product表示被秒杀的商品。 create database sec_kill;use sec_kill; create table customer(id int primary key auto_increment not null,name varchar(20),phone …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023