![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
w1fl1w
这个作者很懒,什么都没留下…
展开
-
8.5.4 Vite实现原理
本文为拉勾网大前端高薪训练营第一期笔记Vite概念Vite是一个面向现代浏览器的一个更轻、更快的web应用开发工具基于ECMAScript标准原生模块系统(ES Modules)实现Vite项目依赖Vite@vue/compiler-sfcvite指令vite servevite buildHMRVite HMR: 立即编译当前所修改的文件Webpack HMR: 会自动以这个文件为入口重写build一次,所有的涉及到的依赖也都会被加载一遍build内部是rollup,最后原创 2020-11-20 15:54:42 · 231 阅读 · 0 评论 -
8.5.3 Vue.js 3.0响应式系统原理
本文为拉勾网大前端高薪训练营第一期笔记Vue.js响应式Proxy对象实现属性监听多层属性嵌套, 在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用Proxy注意事项<script> 'use strict' // 问题1: set 和 deleteProperty 中需要返回布尔类型的值 // 在严格模式下,如果返回 false 的话会出现 Type E原创 2020-11-20 15:54:00 · 140 阅读 · 0 评论 -
8.5.2 Composition API
本文为拉勾网大前端高薪训练营第一期笔记心得体会Vue3.0的重要变动就是composition API,在查看代码方面比之前真的好太多了,感觉起来和React.js的Hook很类似。composition api举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2020-11-20 15:53:10 · 169 阅读 · 0 评论 -
8.5.1 Vue3.0介绍
本文为拉勾网大前端高薪训练营第一期笔记Vue.js 3.0源码组织方式的变化采用TypeScript重写使用Monorepo管理项目结构Composition API性能提升Vitepackages目录结构compiler-core平台无关的编译器compiler-dom浏览器平台下的编译器,依赖于compiler-corecompiler-sfcsingle file component,用来编译单文件组件,依赖于compiler-core和comp原创 2020-11-20 15:49:26 · 180 阅读 · 0 评论 -
8.4.3 封装Vue.js组件库
本文为拉勾网大前端高薪训练营第一期笔记CDD(Component-Driven Development)自下而上从组件级别开始,到页面级别结束CDC的好处组件在最大程度被复用并行开发可视化测试组件的边界情况root: 获取根组件parent: 获取父组件children: 获取所有子组件ref:拿到组件或者domprovide&inject: 类似于react的context provider,上层定义一个provide的一些变量,下层任意一层都能inject获取原创 2020-11-20 15:47:20 · 185 阅读 · 0 评论 -
8.4.2 静态站点生成
本文为拉勾网大前端高薪训练营第一期笔记什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据,生成静态HTML文件及相关资源的工具这个功能也叫预渲染生成的网站不需要类似PHP这样的服务器只需要放到支持静态资源的Web Server或CDN上即可运行好处省钱不需要专业服务器,只要能托管静态文件的空间即可快速不经过后端服务器的处理,只传输内容安全没有后端程序的执行,自然会更安全常见的静态网站生成器Jekyll (Ruby)Hexo (Node)原创 2020-11-20 15:43:51 · 369 阅读 · 1 评论 -
8.4.1 搭建自己的SSR
本文为拉勾网大前端高薪训练营第一期笔记心得体会SSR是未来前端页面必不可少的一个组成成分,掌握了Vue SSR基本上其他框架都非常类似。3-4-1 搭建自己的SSRVue SSR 介绍是什么官方文档:https://ssr.vuejs.org/Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈官方文档的解释:Vue.js 是构建客户端应原创 2020-11-21 00:05:21 · 7134 阅读 · 1 评论 -
8.3.4 NuxtJS综合案例
本文为拉勾网大前端高薪训练营第一期笔记心得体会本章节花了很多时间看和学,主要是我对Vue.js和Nuxt.js并不是特别熟悉,之前写React.js比较多,这次真的是用一个非常实战的例子来学和实践,老师在视频里基本上只是把重点给做了,还有很多页面需要自己补全功能,经过这次作业有了一次全方位的理解,硕果累累,真的推荐学的人都自己实践一下。实现的过程会遇到很多奇奇怪怪的问题,具体的问题和解决办法在本文最后,nuxtjs的报错真的不告诉是代码的哪一行真的很麻烦。还有个意外收获就是因为这次作业是需要部署到原创 2020-09-24 13:35:27 · 634 阅读 · 0 评论 -
8.3.3 NuxtJS基础
本文为拉勾网大前端高薪训练营第一期笔记Nuxt.js 介绍官网:https://zh.nuxtjs.org/GitHub 仓库:https://github.com/nuxt/nuxt.jsNuxt.js 是一个基于 Vue.js 的服务端渲染应用框架,它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有Node.js 项目中使用 Nuxt.j原创 2020-09-24 11:02:33 · 184 阅读 · 0 评论 -
8.3.2 服务器端渲染基础
本文为拉勾网大前端高薪训练营第一期笔记在今天看来,这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下,这种模式存在很多明显的不足:应用的前后端部分完全耦合在一起,在前后端协同开发方面会有非常大的阻力;前端没有足够的发挥空间,无法充分利用现在前端生态下的一些更优秀的方案;由于内容都是在服务端动态生成的,所以服务端的压力较大;相比目前流行的 SPA 应用来说,用户体验一般;但是不得不说,在网页应用并不复杂的情况下,这种方式也是可取的。SPA单页面应用概述随着前端技术栈和原创 2020-09-24 11:00:25 · 204 阅读 · 0 评论 -
8.3.1 Vuex 状态管理
本文为拉勾网大前端高薪训练营第一期笔记组件内的状态管理流程Vue 最核心的两个功能:数据驱动和组件化。组件化开发给我们带来了:更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // action原创 2020-09-24 10:57:48 · 188 阅读 · 0 评论 -
8.2.3 Vue.js 源码剖析-模板编译和组件化
本文为拉勾网大前端高薪训练营第一期笔记8.2.3 Vue.js 源码剖析-模板编译和组件化模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)<div> <h1 @click="handler">title</h1> <p>some content</p></div>渲染函数 renderrender (h) { return h('div', [ h('h原创 2020-08-07 14:40:19 · 180 阅读 · 0 评论 -
8.2.2 Vue.js 源码剖析-虚拟 DOM
本文为拉勾网大前端高薪训练营第一期笔记8.2.2 Vue.js 源码剖析-虚拟 DOM虚拟 DOM 回顾什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM,虚拟 DOM 的本质就是 JavaScript 对象,使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM,最终映射到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom,并添加了一些 Vue.js 中的特性,例如:指令和组件原创 2020-08-07 14:37:48 · 149 阅读 · 0 评论 -
8.2.1 Vue.js 源码剖析-响应式原理
本文为拉勾网大前端高薪训练营第一期笔记8.2.1 Vue.js 源码剖析-响应式原理Vuejs 2.6 https://github.com/vuejs/vueVuejs 3.0 https://github.com/vuejs/vue-nextVue.js使用flow进行静态类型检查Vue.js源码的打包工具是RollupVue.js 源码的打包工具使用的是 Rollup,比 Webpack 轻量Webpack 把所有文件当做模块,Rollup 只处理 js 文件更适合在 Vue.js原创 2020-08-07 14:31:21 · 582 阅读 · 0 评论 -
8.1.4 Virtual DOM 的实现原理
本文为拉勾网大前端高薪训练营第一期笔记8.1.4 Virtual DOM 的实现原理虚拟DOM虚拟DOM就是js对象描述dom对象,成本比真实DOM低很多,因为真实DOM的属性特别多以snabbdom为例,导入时需要这样写import {init, h, thunk} from 'snabbdom'创建脚手架md snabbdom-democd snabbdom-demoyarn init -yyarn add parcel-bundler//package.jsonscript原创 2020-08-07 14:13:30 · 152 阅读 · 0 评论 -
8.1.3 模拟Vue.js响应式原理
本文为拉勾网大前端高薪训练营第一期笔记8.1.3 模拟 Vue.js 响应式原理Vue数据驱动数据响应式数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用v-model在表单元素上创建双向数据绑定数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图Vue2.x数据响应式实现原理是Object.d原创 2020-08-07 14:09:58 · 170 阅读 · 0 评论 -
8.1.2 Vue Router原理实现
本文为拉勾网大前端高薪训练营第一期笔记8.1.2 Vue Router原理实现Vue router初始化vue的时候选择router,会自动生成router相关代码Vue.use(VueRouter)use传参如果是函数,会调用函数注册组件,如果是对象的话会调用对象的install方法import Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'// 1. 注册路由原创 2020-08-07 14:07:58 · 97 阅读 · 0 评论 -
8.1.1 Vue.js基础
Vuejs基础本文大部分Vuejs介绍来自Vuejs官方文档Vue生命周期图示单文件页面建议提前编译template,优化性能Vue.js语法和概念建议https://cn.vuejs.org/v2/guide/查看官方文档插值表达式<span>Message: {{ msg }}</span>指令指令 (Directives) 是带有 v- 前缀的特殊 attribute跟angular的ng-if很接近<p v-if="seen">现原创 2020-08-07 14:03:42 · 107 阅读 · 0 评论