【Vue3】李南江老师讲解--个人笔记(一)
太喜欢李南江老师了,自带二倍速还可以讲的明明白白,又拥有一个有趣的灵魂~i了i了
【vue3笔记】
vue2和vue3的区别:
1.vue2使用Object.defineProperty方法实现响应式数据
缺点:无法检测到对象属性的动态添加和删除
无法检测到数组的下标和length属性的变更
解决方案:
vue2提供Vue.$
set动态给对象添加属性
Vue.$
delete动态删除对象属性
重写数组的方法,检测数组变更2
2.vue3使用proxy实现响应式数据
优点:可以检测到代理对象属性的动态新增和删除
可以见到测数组的下标和length属性的变化
缺点:es6的proxy不支持低版本浏览器 IE11
回针对IE11出一个特殊版本进行支持
vue3的新特性:
性能比vue2快一到两倍:diff算法优化:在创建虚拟DOM的时候,会根据DOM中的内容会不会发生变化,添加静态标记。静态提升:对不参与提升的元素,做静态提升,只会被创建一次,在渲染时直接复用。事件监听缓存:默认onClick会被视为动态绑定,所以每次都会追踪他的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可。
按需编译,体积比vue更小
Composition API:组合API
更好的TS支持
暴露了自定义渲染API
更先进的组件
关于vue3的setup()函数
setup()函数是组合API的入口函数,在setup()中定义的变量/方法,要想在外界使用,必须使用return {xxx,xxx}暴露出去
setup()是在beforeCreate和Created之间执行的,由于在执行setup函数的时候,还没有执行Created生命周期方法,所以不可以使用data和methods,所以,为了避免使用data值的错误使用,vue直接将setup函数中的this修改成了undefined。
setup()函数只能是同步的不能是异步的
setup()可以使用ref,reactive定义响应式数据,本质上就是将传入的数据包装成一个Proxy对象。使用reactive必须是对象(JSon/arr)
【三种方式】创建vue3项目:
–webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev
– vue-cli
npm install -g @vue/cli
vue create projectName
cd projectName
vue add vue-text
npm run serve
– vite
安装vite: npm install -g create-vite-app
创建项目:
create-vite-app projectName
cd projectName
npm install
npm run dev
注意点:
搭好之后,按需下载需要的资源,例如:
npm install --save element-ui
npm install --save axios
补充知识点
框架和库的区别:
框架:是一整套的完整的解决方案,换框架的话,需要重构整个项目;
库:也就是使用是插件,修改需要使用的插件就可以,可以实现无缝切换。
vue的核心概念:
1,通过数据驱动界面更新,不操作Dom来更新页面;2,组件化开发,可以将网页拆分成一个个的组件来编写
let vm = new Vue({router,store,el: '#app',render: (h) => h(App) // Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果
});
render函数是渲染一个视图,然后提供给el挂载,没有render的话,页面什么都出不来。Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树
【Vue3】李南江老师讲解--个人笔记(一)相关推荐
- 【Vue3】李南江老师讲解--个人笔记(二)ref 和 reactive详解
[vue3笔记之 ref 和 reactive ] 实现响应式数据的方法 可以使用 ref,reactive定义响应式数据,本质上就是将传入的数据包装成一个Proxy对象. 使用 reactive 必 ...
- 李永乐讲解计算机科学与技术,【视频】李永乐老师讲解“哥德巴赫猜想”【民科吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 李老师我有一个证明请你审阅:哥德巴赫猜想的证明 摘要:本文证明了任意≥6的偶数都必可表为两个素数之和.证明中是令任意正整数2M为元素的个数,由2M的两两不 ...
- vue2+vue3天禹老师版复习笔记
文章目录 1.Vue2基础 1.1.初始Vue 1.2.模板语法 1.3.数据绑定 1.4.MVVM模型 1.5.el和data的两种写法 1.6.回顾defineProperty方法 1.7.数据代 ...
- 李永乐老师讲解MindSpore
参考:https://www.zhihu.com/zvideo/1452361569703718912 1.人工智能框架:不是从零开始编写,有些已经编好了放在那里了,做菜的厨师不会从种子开始做菜,建筑 ...
- B站李永乐讲解傅里叶变换--笔记
笔记目录 引言 一.变换 (一)举例(图像<---->坐标) (二)标准正交基 二.傅里叶变换 (一)傅里叶级数 (二)连续傅里叶变换 (三)应用 三.总结 四.参考链接 引言 为什么不同 ...
- 倪海厦天纪笔记16_倪海厦老师讲解天纪易经——第3集(13)
上一集链接:倪海厦老师讲解天纪易经--第2集(1-2)之前上传的天纪课程有些播放不了,所以重新上传完整视频,每天一集.有兴趣的同学可以跟随重新温习一遍. 倪海厦:研究中医达30年之久,并精通其它[命. ...
- 哈工大李治军老师的操作系统学习笔记
文章目录 1 什么是操作系统 2 操作系统启动 3 操作系统接口 命令行发生了什么? 图形按钮怎么回事? 操作系统接口(系统调用) 4 操作系统调用 不应该随意访问内核 怎么不让你访问内核 不让我访问 ...
- Maven学习笔记 (颜群老师讲解)
颜群老师讲解,视频地址:https://ke.qq.com/course/303156?taid=2222959108595764 一片很明白的博文:https://blog.csdn.net/qq_ ...
- 线性回归原理(李沐老师学习笔记)
目录 1 线性回归的定义 1.1 线性回归的基本元素 1.1.1 线性模型 1.1.2 损失函数 1.1.3 为什么传统线性回归解不能应用于深度学习 1.1.4 随机梯度下降 2 自动求导 2.1 ...
最新文章
- 培养你的核心竞争能力
- Chrome浏览器不支持字体小于12px的解决办法
- 并发编程--线程池与进程池
- 13 登陆_13级!凌晨,“黑格比”登陆!对莆田的最新影响……
- linux下wxr的权限,Day16-Linux权限知识和应用实践讲解
- python memoryerror_使用Scikit-learn时的Python MemoryError
- Django model、view拆分,添加service
- 《HTML5 2D游戏编程核心技术》——第1章,第1.3节特别功能
- Elasticsearch的用例:灵活的查询缓存
- css隐藏输入框的光标
- 权限设置并未向在应用程序容器 不可用
- ubuntu12.04升级svn到 1.7
- 从客户端中检测到有潜在危险的 Request.Form 值。
- python transform hive_Hive使用TRANSFORM运行Python脚本总结
- asp.net+mysql,asp.net+mysql后台盲注入
- Qt 之 QQ系统表情(三)
- 面向对象编程中的 诡异事件
- @Formula的使用
- linux扩展模式触摸屏,Ubuntu14.04下使用触摸屏以及笔记本扩展触摸屏设置方法
- C#:base64解码显示