Vue 3.0 学习
Vue 3.0 有什么更新?
- 检测机制的改变:
- 基于代理Proxy的observer实现,提供全语言覆盖的反应性跟踪;
- 消除了Vue 2 中基于 Object.defineProperty 的实现所存在的很多限制。
- 只能监测属性,不能监测对象:
- 检测属性的添加和删除;
- 检测数组索引和长度的变更;
- 支持 Map、Set、WeakMap 和 WeakSet。
- 模板:
- 作用域插槽,2.x 的机制导致作用域插槽变了,父组件会重新渲染,
而 3.0 把作用域插槽改成了函数的方式,这样只会影响子组件的重新渲染,提升了渲染的性能。 - 对于 render 函数的方面,vue3.0 也进行一系列更改来方便习惯直接使用 api 来生成 vDom 。
- 作用域插槽,2.x 的机制导致作用域插槽变了,父组件会重新渲染,
- 对象式的组件声明方式:
- vue2.x 中的组件是通过声明的方式传入一系列 option,和 TypeScript 的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。
- 3.0 修改了组件的声明方式,改成了类式的写法,这样使得和 TypeScript 的结合变得很容易。
- 其它方面的更改:
- 支持自定义渲染器,从而使得 weex 可以通过自定义渲染器的方式来扩展,而不是直接 fork 源码来改的方式。
- 支持 Fragment(多个根节点)和 Protal(在 dom 其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。
- 基于 tree shaking 优化,提供了更多的内置功能。
Vue 3.0 学习的更多相关文章
- Vue 2.0 学习路线
「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...
- Vue 2.0学习(七)方法与事件
基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...
- Vue 2.0学习(四)计算属性
{{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div ...
- Vue 2.0学习(二)数据绑定
Vue实例对象 创建一个vue应用很简单,通过构造函数Vue就能创建一个Vue的根实例: var app = new Vue({ el: '#app', data: { message: 'Hello ...
- Vue 2.0学习(一)简介
简介 Vue是一套用于构建用户界面的渐进式框架.简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既 ...
- Vue 2.0学习(六)内置指令
基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="ap ...
- Vue 2.0学习(五)v-bind及class与style绑定
DOM元素经常会动态地绑定一些class类名或style样式. 基本用法 <div id="app"> <a v-bind:href="url" ...
- Vue 2.0学习(三)指令与事件
指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v- ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- 新手向:Vue 2.0 的建议学习顺序
新手向:Vue 2.0 的建议学习顺序 尤雨溪 1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...
随机推荐
- SciTech-Physics-Relativity:相对论: 正解"相对论" + "光速不变原理"+VS 声波、水波 的传播速度
SciTech-Physics-Relativity:相对论: Relativity:相对论 Relativity:相对论 分 "广义相对论"和"狭义相对论". ...
- #include <cstring>
在void和int后面的都叫函数吗 2024/3/6 00:10:34 在C++中,void和int等关键字用来表示函数的返回类型,而不是函数本身的名称.函数名称位于返回类型之前.下面是一个简单的函数 ...
- 能源管理系统EMS与IEC61850
接上上文,板上运行提示缺少某些库,可能是因为交叉编译工具版本太高了.后续使用vitis自带的交叉编译工具编译,然后放入Xilinx开发板运行成功. EMS,即能源管理系统,是储能"3s&qu ...
- zuul 源码解析
1. RefreshableRouteLocatorRouteLocator 路由定位器,在 Spring Cloud Zuul 中,RouteLocator 的主要作用是加载 zuul 路由配置信息 ...
- linux的bash shell的操作环境
1 bash的tty登录界面的信息配置文件:/etc/issue telnet远程登录的登录界面信息:/etc/issue.net 2 /etc/motd这个文件中的内容可以让所有用户包括root用户 ...
- 开心网、快播、千千静听...我用 AI 给这些逝去的网站建了座 “墓园”
大家好,我是程序员鱼皮,分享个有点儿意思的项目,我用 AI 制作了一个 互联网数字墓园 !用于纪念那些曾经辉煌的互联网产品. 有这个想法挺突然的,前几天我上网冲浪的时候刷到了人人网,结果发现人人网在 ...
- MyEMS开源能源管理系统简介
MyEMS 是一款基于 Python 和 React 开发的开源能源管理系统,源代码基于 MIT 开源软件许可协议发布2.它能为建筑.工厂.商场等各类场景提供全面.智能的能源管理解决方案2.以下是具体 ...
- 我的AI自学路线,可能对你有用
前言 很多同学说想学习AI,但是不知道从哪里开始,学习路线是什么.我学习AI已经有一段时间了,这篇文章来聊聊我是如何学习AI的,欢迎各位大佬补充和指点. 加入欧阳的AI交流群 我是怎么开始的 16年的 ...
- 超简单!手把手教你玩转ClaudeCode,无魔法不会员!
如果我说 Claude Code 是目前世界上最强的 AI 生成工具,大家应该都没意见吧? 不是因为 Claude Code 牛逼,而是因为它底层使用了 Claude 4 Sonnet 满血模型,这是 ...
- debain终端显示菱形乱码
原因:是因为安装时选择的中文,所以出现了乱码情况,需要改变系统编码 第一步:env | grep LANG ##查看当前系统编码 第二步 :export LANG=en_US.UTF-8 第三步:dp ...