Vue.js
关注
分享
扫一扫
文章平均质量分 88
vue学习之路
5coder
有道无术，术尚可求。有术无道，止于术！
展开
-
Vite实现原理
接下来再来回顾一下Vite，之前已经演示过Vite的基本使用，这里的重点是来了解Vite的核心实现原理。先来回顾一下Vite的概念，ECMAScriptES Module它的出现是为了解决外webpack在开发阶段使用冷启动时间过长，另外热更新反应速度慢的问题。使用Vite创建的项目就是一个普通的Vue3的应用，没有太多特殊的地方，相比基于Vue cli创建的项目也少了很多的配置文件和依赖。Vite创建的项目开发依赖非常的简单，只有vite和@。Vite就是接下来要模拟实现的命令航工具，原创 2022-11-30 22:58:02 · 1234 阅读 · 0 评论 -
3. Vue.js 3.0 响应式系统原理
接下来通过模拟Vue3的响应式系统来深入了解它内部的工作原理。先来回顾一下Vue3重写了响应式系统，和Vue2相比，Vue3的响应式系统底层采用对象实现，在初始化的时候不需要遍历所有的属性，把属性通过转换成和。另外如果有多层属性嵌套的话，只有访问某个属性的时候才会递归处理下一级的属性，所以Vue3中响应式系统的性能要比Vue2好。Vue3的响应式系统默认可以监听动态添加的属性，还可以监听属性的删除操作以及数组的索引和属性的修改操作。另外Vue3的响应式系统还可以作为一个模块单独使用。接下来自己实现Vue3中原创 2022-11-29 00:04:05 · 647 阅读 · 0 评论 -
2. Vue3 Composition API
接下来我们来介绍一下Vue3中新增的如何使用。注意仅仅是Vue3中新增的，我们依然可以使用。先来实现一下之前演示的获取鼠标位置的案例。做这个案例之前，需要先介绍一下这个函数，这里不借助任何的构建工具，直接使用浏览器中原生的的方式来加载Vue模块。注意，这里我们会使用完整版的Vue。首先，安装Vue3.0，创建文件。打开浏览器，可以看到打印出来的对象。这里可以看到和都可以正常响应式，然后打开开发人员工具来看一下刚刚打印的对象，把这个对象展开，这里的成员要比Vue2中的对象的成员要少很多，而且这些成员都没有使原创 2022-11-27 20:46:29 · 1020 阅读 · 0 评论 -
1. Vue 3.0介绍
源码组织方式的变化TypeScriptMonorepopackages下都是独立发行的包，可以独立使用。Composition API（组合API）Vue 3.0代码虽然重写，但是90%以上的API兼容2.x，并且增加了（组合API），是用来解决Vue 2.x在开发大型项目时遇到超大组件，使用不好拆分和重用的问题。性能提升Vue 3.0使用Proxy重写了响应式代码，并对编译器做了优化，重写了虚拟DOM，从而让渲染和update的性能都有了大幅度的提升，另外服务端渲染SSR的性能也提升了2-3倍。原创 2022-11-27 20:44:55 · 679 阅读 · 0 评论 -
Vue CLI拉取2.x模板（旧版本）download template失败解决方法
Vue CLI拉取2.x模板（旧版本）download template失败解决方法方案一：配置hosts文件或networks文件映射主机名和端口号windows系统中，找到目录：C:\Windows\System32\drivers\etc\,从其中找到hosts或者networks文件，使用编辑器打开，在尾部添加一下映射：# github192.30.253.113 github.com185.199.108.153 github.github.io151.101.72.133 a原创 2021-04-15 15:22:08 · 1240 阅读 · 2 评论 -
Vue——过滤器、键盘修饰符、动画等
Vue——过滤器、键盘修饰符、动画等1.过滤器Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值（Mustache）和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示<!--在Mustache中使用过滤器-->{{message | capitalize}}<!--在v-bind中使用过滤器--><div v-bind:id=原创 2021-03-31 17:12:08 · 252 阅读 · 0 评论 -
Vue学习——生命周期
Vue学习——生命周期<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="button" value="数据更新" @click="msg='No'"> <h3原创 2021-03-23 23:22:27 · 125 阅读 · 1 评论 -
Vue学习——指令
Vue学习-指令1.v-ifv-if可以完全根据表达式的值在DOM中生成或移除一个元素。true->生成元素；false->移除元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <原创 2021-03-23 15:30:01 · 401 阅读 · 0 评论