- 博客(23)
- 收藏
- 关注
RSS订阅转载 JavaScript——浏览器的重绘与回流
一、浏览器渲染过程？ 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式. 3. dom tree和样式结构体(...
2021-09-27 08:02:34
332
原创 Watcher类
1. Watcher类创建在编写Watcher类之前，我们先来看一张图，理解一下Dep与Watcher的关系通过前面的学习，我们知道在Observer类中为每一个响应式的数据创建了Dep对象，而且在getter 中会收集依赖，所谓收集依赖就是将watcher观察者添加到subs数组中.而在setter中会触发依赖，其实就是调用Dep对象中notify方法，该方法会获取subs数组中的所有的watcher,然后执行watcher中的update方法来更新对应的视图。Watcher 类的代码如下：cl
2021-09-26 19:39:40
256
原创 VueRouter模拟实现与源码解读
1、Vue.use( )源码源码位置：vue/src/core/global-api/use.jsexport function initUse (Vue: GlobalAPI) { //use方法的参数接收的是一个插件，该插件的类型可以是一个函数，也可以是一个对象 Vue.use = function (plugin: Function | Object) { //_installedPlugins数组中存放已经安装的插件。 const installedPlugins
2021-09-26 19:30:14
161
原创 Vue Router原理
现在我们已经掌握了Vue Router的基本使用，下面我们来模拟Vue Router的实现，通过模拟实现，来了解其内部的实现原理。我们这里模拟的是History模式。Hash模式基本实现上是一样的。这里先来复习一下Hash模式的工作原理。 ·URL中#后面的内容作为路径地址，当地址改变的时候不会向服务器发送请求，但是会触发hashchange事件。 监听hashchange事件，在该事件中记录当前的路由地址，然后根据路由地址找到对应组件。 根据当前路由地址找到对应组件重新渲
2021-09-26 19:26:47
223
原创 Hash模式与History模式
Hash模式与History模式区别前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。如果需要向服务器发送请求，需要用到ajax方式。两种模式的区别首先是表现形式的区别Hash模式https://www.baidu.com/#/showlist?id=22256hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。当然这种模式相对来说比较丑，路径中带有与数据无关的符号，例如#与?His
2021-09-26 09:18:44
2133
原创 Vue 路由简介
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为： 后端路由 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 SPA（Single Page Application） Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容.
2021-09-26 09:00:44
151
原创 Vue 动态路由匹配
1.动态匹配路由的基本用法思考：<!– 有如下 3 个路由链接 --> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> // 定义如下三个对应的路由规则，是否可行？？？{ pat.
2021-09-26 08:56:30
149
原创 Observer
Observer的功能 负责把data选项中的属性转换成响应式数据 data中的某个属性也是对象，把该属性转换成响应式数据（例如data中的某个属性为Student对象，也要将Student对象中的属性转换成响应式） 数据变化发送通知 observer.js文件中的基本代码如下：class Observer { constructor(data) { this.walk(data); } walk(data) { //1、判断data是否是对象...
2021-09-26 08:52:10
704
原创 Compiler
功能 负责编译模板，解析指令/差值表达式 负责页面的首次渲染 当数据变化后重新渲染视图 通过以上功能的描述，可以总结出Compiler主要就是对Dom进行操作。在js目录下面创建compiler.js文件，实现代码如下：class Compiler { constructor(vm) { this.el = vm.$el; this.vm = vm; } //编译模板，处理文本节点和元素节点. compile(el) {} // 编...
2021-09-26 08:42:26
116
原创 Vue 侦听器watch
侦听器就是侦听data中的数据变化，如果数据一旦发生变化就通知侦听器所绑定方法，来执行相应的操作。从这一点上，与计算属性是非常类似的。但是，侦听器也有自己独有的应用场景。执行异步或开销较大的操作。下面，先来看一下侦听器的基本使用我们使用侦听器来统计总人数。 <p> 总人数：{{totalCount}} </p>在data中定义totalCount属性。 data: { selectItem: ""...
2021-09-26 08:22:42
175
原创 Vue 兄弟组件之间数据传递
兄弟组件传值，通过事件总线完成。1、定义父组件并且在父组件中，完成两个兄弟组件的创建。<script> Vue.component('father', { template: '<div><son></son><daughter></daughter></div>', components: { son: { ...
2021-09-26 08:07:57
428
原创 Vue 子组件向父组件传值
第一：子组件通过自定义事件向父组件传递信息。<button v-on:click='$emit("countSum")'> 计算</button>第二：父组件监听子组件的事件<menu-item v-on:countSum='sum+=1'></menu-item>具体的实现步骤如下：1、构建基本的结构 <div id="app"> </div>var vm = new Vue...
2021-09-24 11:29:30
714
原创 Vue 父组件向子组件传值
当我们将整个页面都拆分了不同的组件以后，这样就会涉及到组件之间的数据传递问题。常见的组件的通信可以分为三类：第一类: 父组件向子组件传递数据第二类: 子组件向父组件传递数据第三类：兄弟组件的数据传递。下面，我们先来看一下父组件向子组件传递数据的情况第一：子组件内部通过props接收传递过来的值。Vue.component('menu-item',{ props:['title'] // props后面跟一个数组，数组中的内容为字符串，这个字符串可以当做属性类使用。 temp
2021-09-24 08:03:38
7201
原创 Vue 自定义局部指令
局部指令的基本语法：directives:{ focus:{ //指令的定义 inserted:function(el){ el.focus() } }}在Vue实例中添加directives具体实现的代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />...
2021-09-23 19:56:31
332
原创 Vue 自定义指令-带参数
带参数的自定义指令创建的语法（改变元素背景色）Vue.directive('color',{ inserted:function(el,binding){ //binding表示传递过来的参数 el.style.backgroundColor=binding.value.color; }})指令的用法<input type="text" v-color='{color:"orange"}' />下面，看一下完整的代码案例：...
2021-09-23 19:53:59
1282
原创 Vue 自定义指令基本用法
为什么需要自定义指令呢？因为内置指令不满足需求。下面看一下基本的创建自定义指令语法:Vue.directive('focus',{ inserted:function(el){ //获取元素焦点 el.focus(); } })自定义指令用法<input type="text" v-focus>下面看一下具体的代码。<!DOCTYPE html>&...
2021-09-23 19:50:10
144
原创 Vue 过滤器
1. 过滤器基本使用过滤器在日常生活中也是比较常见的，例如自来水的过滤等。在Vue中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写或者将日期格式化为指定的格式等。下面先看一下自定义过滤器的语法Vue.filter('过滤器名称',function(value){//value参数表示要处理的数据 //过滤器业务逻辑，最终将处理后的数据进行返回})定义好以后可以使用。使用的方式如下：<div>{{msg|upper}}&
2021-09-23 09:14:59
101
原创 Vue 组件化的理解
你能谈一下对Vue组件化的理解吗？其实这也是一个比较常见的面试题。当然，这个问题的面是非常广的。可以通过以下几点来描述：定义：组件是可复用的Vue实例，准确讲它是VueComponent的实例，继承自Vue优点：组件化可以增加代码的复用性，可维护性和可测试性。使用场景：什么时候使用组件？以下分类可以作为参数第一：通用组件：实现最基本的功能，具有通用性，复用性。例如按钮组件，输入框组件，布局组件等。(Element UI组件库就是属于这种通用的组件)第二：业务组件，用于完成具体的业
2021-09-23 09:07:38
129
原创 Vue 路由守卫
Vue-router中的路由守卫，主要是对其内容进行保护，如果没有对应的权限，则不允许访问。我们首先来看一下全局守卫，也就是所有的路由都会经过全局守卫来进行检测。//实现全局守卫 router.beforeEach((to, from, next) => { //to:去哪个页面，from来自哪个页面，next继续执行. //判断哪个路由需要进行守卫，这里可以通过元数据方式 if (to.meta.auth) { ...
2021-09-23 09:00:44
180
原创 Vue 编程式导航
页面导航的两种方式声明式导航：通过点击链接实现导航的方式，叫做声明式导航 例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航 例如：普通网页中的 location.href编程式导航基本用法常用的编程式导航 API 如下：this.$router.push('hash地址')this.$rou
2021-09-23 08:56:41
144
原创 Vue 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的
2021-09-23 08:53:08
22840
原创 Vue 发布订阅模式
发布订阅模式：订阅者，发布者，信号中心我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心"发布"(publish)一个信号，其它任务可以向信号中心“订阅”(subscribe)这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern)家长向学生所在的班级订阅了获取学生考试成绩的事件，当老师公布学生的成绩后，就会自动通知学生的家长。在整个案例中，学生所在的班级为信号中心，老师为发布者，家长为订阅者Vue 的自定义事
2021-09-23 08:46:33
2809
原创 Vue 响应式的核心原理
1.Vue2.x响应式原理关于Vue2.x的响应式原理在官方文档中也有介绍。https://cn.vuejs.org/v2/guide/reactivity.html在该文档中，我们注意如下一段内容：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是.
2021-09-23 08:40:53
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人