深入响应式原理Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接。如何追踪变化当我们把普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是Vue不支持IE8 以及更低版本浏览器...
一、概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。 二、实现方式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1.Hash --- 利用 URL 中的hash("#"); 2.利用 History interface 在HTML5中新增的方法。 Vue 中，它是通过 mode 这一参数控制路由的实现模式： const router=new VueRouter({mode:‘history‘,routes:[...] }) 创...
大家都知道vue是一种MVVM开发模式，数据驱动视图的前端框架，并且内部已经实现了双向数据绑定，那么双向数据绑定是怎么实现的呢？先手动撸一个最最最简单的双向数据绑定 1 <div>2 <input type="text" name="" id="text">3 <span id="show"></span>4 </div>5 6 <script>7var text = document.getElementById(‘text‘)8var span = document.getElementById(‘show‘)9var obj = {} 10 Object.d...
1、什么VuePress 一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用 2、快速上手VuePress// 安装yarn： https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable # 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm install -D vuepress// 1、创建文件夹，并进入 mkdir vuepress-starter && cd vuepress-starter // 2、初始化项目yarn create vuepress // 3、启动项目 yar...
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理,方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数,Object.defineproperty(obj,‘val‘,attrObject), 参数1: obj是属性所在的对象,参数2: ‘val‘,属性名,它是一个string类型,参数3: {}属性所描述的对象详情可以看Object.defineproperty的文档下面直接上demo,html代码: <input type="text" id="inp1"><br>你...
key值的作用key值大多情况下使用在循环语句中，从本质来讲主要作用大概有以下两点：主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，相当于唯一标识ID。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染， 因此使用key值可以提高渲染效率，同理，改变某一元素的key值会使该元素重新被渲染。key的工作原理// 因为key值主要使用在虚拟DOM算法，即diff算法中。所以我们在src\core\vdom\patch.js文件...
有一段时间没有更新技术博文了，因为这段时间埋下头来看Vue源码了。本文我们一起通过学习双向绑定原理来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。一起来学Vue双向绑定原理-数据劫持和发布订阅一起来学Vue模板编译原理(一)-Template生成AST一起来学Vue模板编译原理(二)-AST生成Render字符串一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法这些文章统一放在我的git仓库：https://github.com/yzsunlei/java...
前端路由原理本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式hashhistorywww.test.com/##/ 就是 Hash URL，当 ## 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。 vue-router hash实现源码（完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L22-L54）：*** 添...
class Watcher {constructor(obj, key, cb) {// Watcher构造函数，先把当前watcher放到一个地方window.curWatcher = this// 触发getter，在getter里就可以将先前放好的watcher拿出来放到其dep中this.value = obj[key]// window.curWatcher = nullthis.cb = cb}update(oldVal, val) {this.cb(oldVal, val)} } class Dep {constructor() {this.subs = []}notify(oldVal, val) {if (this.subs === []) returnthis.subs.forEach(item =...
一、IDE的选择： VsCode和WebStorm都是不错的选择，两者运行调试都非常的方便都可以使用快捷键运行和停止，就打开项目的速度和对电脑配置的要求来说，vscode要比webstorm要出色很多，如果电脑配置足够好的情况下请忽略前面说的性能问题，具体的使用要看个人的需求和爱好了。 1.先说VsCode的配置： 首先是要装VsCode的扩展插件，点击左上角最后一个图标，在搜索里面输入JavaScript (ES6) snippets/NPM/Vue 2 Snippets； ...
采用defineProperty的两个方法get、set示例1<!-- 表单 -->2<input type="text" id="input">3<!-- 展示 -->4<p id="desc"></p> 1 let obj = {};2 let temp = {};//采用临时变量代理obj 3 Object.defineProperty(obj,‘name‘,{4//获取obj的name属性会触发 5 get(){ 6return temp[‘name‘];7 },8//给obj的name属性赋值会触发 9 set(val){ 10 temp[‘name‘] = val;//改变temp的结果11 input.value = val...
浏览器事件循环（结合vue nextTick）https://juejin.im/post/5cb736c5f265da039955d4e8#commentmessageChanel的讲解https://www.jianshu.com/p/4f07ef18b5d7「前端进阶」从多线程到Event Loop全面梳理 https://juejin.im/post/5d5b4c2df265da03dd3d73e5原文：https://www.cnblogs.com/little-ab/p/11760598.html
发现一篇以白话文的形式讲解 Vue 的响应式系统原理的文章，觉得不错~ 响应式系统我们都知道，只要在 Vue 实例中声明过的数据，那么这个数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。也正是因为这个系统，让我们可以脱离界面的束缚，只需要操作数据。 我们可以问出下面三个问题1、Vue 是怎么知道数据改变？2、Vue 在数据改变时，怎么知道通知哪些视图更新？3、Vue 在数据改...
# Vue响应式原理解析首先定义了四个核心的js文件 - 1. observer.js 观察者函数，用来设置data的get和set函数，并且把watcher存放在dep中- 2. watcher.js 监听者函数，用来设置dep.target开启依赖收集的条件，和触发视图的更新函数- 3. compile.js 编译者函数，用来编译模版和实例化 watcher 函数- 4. index.js 入口文件注意dep函数就是一个壳子，用来存放watcher和触发watcher更新的首先从index.js开始，定义函数 SelfVue```j...
从隐藏到显现从显现到隐藏 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Vue中的动画</title> 6<style> 7 .fade-enter,8 .fade-leave-to { 9 opacity: 0;10}11 .fade-enter-active, 12 .fade-leave-active {13 transition: opacity 3s;14}1516</style>17</head>18<body>19<div id="app">20<transition name="fade">21<div v-if=...