Vue 3

Vu3

简述: 快速上手,开发即用,具体知识参考官方文档

具备知识

Vite

了解即可,使用时按需配置,更多参考官方文档( https://cn.vitejs.dev)

简述: 极速响应工具 (构建、启动、更新、插件使用等)

核心思想: 依赖 和 源码

工作原理:

引入rollup: 灵活,相比webpack速度快,适配 、esbulid(预构建依赖):打包速度快,兼容性差

HMR(动态模块热更新、热替换)

原生模块化提供源码,部分浏览器优化处理及按需加载

vite对于浏览器缓存处理: 源码(304协商缓存) ,依赖(强缓存)

TS

https://www.tslang.cn/index.html

通用写法

单文件组件(通过构建使用)

单组件
选项aip写法
组合api写法

可通过引入cdn

Composition API

ref

给源码传值,框架自动响应数据更新视图

支持参数: string、number、object、symbol、array

但若对数据不可修改,返回通过Object原型生成数据格式 RefImpl ,可通过value拿值

xxx.value

有一种情况可修改其数据

javascript 复制代码
 setup() {
                let obj = { name: 'vue3' };
                let data = ref(obj);
                data.value.name = 'aaa'; // ref不可修改值,但传入的是对象,源码自动判断为reactive,因此可修改值,
                return {
                    data
				}
            }
reactive

响应式数据更新视图

支持参数: object

可修改原数据值

javascript 复制代码
setup () {
		let obj = {name:'vue3'};
		let data = reactive(obj);
		data.name = 'haha';  // 可对值修改
		return {
			data			
		}
	}
toRef
javascript 复制代码
setup () {
		let obj = {name:'vue3'};
		let data = reactive(obj);
		data.name = 'haha';  // 可对值修改
		return {
			data			
		}
	}

// 待更新

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python