前端学习博客

而对于v-model，在我们编译模板时，会针对v-model进行解析：如果发现当前节点有v-model(eg: v-model=‘str’)，那就会监听input事件，当str的值发生变化时，会将用户输入的值赋值到str属性上，此时相当于属性值发生变化，observer就会检测到值的变化，那就会通知到dep，然后dep通知到watcher.每一个属性有一个dep属性，里面存放了这个属性的watcher，可能一个属性的dep中存放了很多个watcher，因为这个属性在很多地方都用到了。

如果新节点的尾指针下一个没有节点，那就证明是头比头，继续在后面插入。

到现在，我们已经实现了dep和watcher的收集，以及值改变时的更新操作。梳理：首先，我们会渲染当前组件，那么就会创建一个watcher，此时就会给Dep增加一个静态属性target，即。

现在，我们已经实现了render函数，将数据渲染到页面上的操作已经进行了一半了(我们实现了将数据转成ast，再转成render函数)，接下来就是将render函数进行调用，挂载到页面上。下面我们就开始实现这个**mountComponent(vm, el)**函数。

在上一节中，我们已经实现了初始化数据，并且对数据进行劫持，现在需要将数据渲染到页面上，即实现模板编译。首先，我们在测试的index.html中增加一些模板。background:yellow"

当我们对进行属性是对象时进行劫持并且遍历各个属性值时，走到defineReactive函数(这个函数是对对象的每一项进行监测的函数)，进行set设置时，如果出现设置的值是一个新的对象，又会走observe函数，然后又会进到类的实例中，在类的实例中，又会对对象进行劫持，然后就会产生死循环。我们当时是将data从$options中取出，然后赋给了一个属性_data上，那么也就是说，我们的访问data是通过。)时，我们可以监测到。上面说到，我们对数据进行初始化，并且，实现了通过vm.data来访问。

【vue】路由hash和history模式文章目录【vue】路由hash和history模式hash模式改变hash的三种方式：第一种：手动在导航栏中修改第二种方式：手动点击前进后退按钮第三种方式：通过js代码修改history 模式popstate二者对比hash模式hash 就是指 url 后的 # 号以及后面的字符，比如，http://127.0.0.1:5500/test.html#/user，这里的hash值就是#/user。hash 值的变化不会导致浏览器像服务器发送请求hash 的

【Vue】仿小米商城系统（四）文章目录【Vue】仿小米商城系统（四）前言八、Element-UI使用1.按需引入一个🌰2.插件引用3.对于 babelrc文件 和 babel.config.js文件方案一：方案二：在该项目中引入 --> 方法一，用import在该项目中引入 --> 方法二，将该方法扩展到vue实例身上九、订单支付页面支付宝微信支付十、订单列表页 --> 分页功能elementUI: 分页器加载更多按钮滚动加载 --> 插件实现原生实现加载更多十一、项目优化十二、总

【vue】仿小米商城系统（三）文章目录【vue】仿小米商城系统（三）前言五、商品详情页的开发顶部吸附导航条实现六、订单细节页面（detail）七、首页完善：退出功能实现（1）首显示定义退出功能的结构：（2）逻辑实现（3）完善（4）cookie设置前言本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻【Vue】仿小米商城系统（一）【Vue】仿小米商城系统（二）【Vue】仿小米商城系统（三）【Vue】仿小米商城系统（四）项目源码：点击这里👉mimall五、商品详情页的开发

【Vue】仿小米商城系统（二）文章目录【Vue】仿小米商城系统（二）前言三、商品首页的开发mixin的使用商标移出和进入鼠标移动到菜单上显示下拉列表对返回的数据统一样式 --> 使用过滤器鼠标移动到左侧菜单上，右侧列表打开弹框组件实现 --> Modal组件Modal.vueVue动画：modal.scss首页使用Modal组件图片懒加载四、登录页面的开发登录模块将登录的信息进行保存到vuex注册模块登录后获取用户信息和购物车商品数量第一次登录进去保存数据到vuex在vuex中设置action

【Vue】仿小米商城系统（一）文章目录【Vue】仿小米商城系统（一）前言一、项目概述项目介绍商城页面与组件技术栈商城各页面展示商品首页产品站商品详情登录页面：账号 jack 密码 jack订单确认购物车页面订单支付页面支付宝支付微信支付订单列表项目源码：二、项目开发前准备跨域解决jsonpnginx项目目录结构Storage封装接口错误拦截Mock设置集成Mock API（本地集成Mock.js）前言本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻【Vue】仿小米商城系统（一）

【vue】虚拟节点与DOM Diff算法文章目录【vue】虚拟节点与DOM Diff算法虚拟DOM一个🌰DOM Diff算法实现项目初始化创建虚拟DOM --> createElement()虚拟节点转换为真实DOM节点 --> render()render递归孩子节点真实DOM渲染到页面 --> renderDOM()虚拟节点差异分析patches介绍domDiff节点遍历函数 --> vnodeWalk()给真实 dom 打补丁 --> doPatch()相关面试题1.虚

【Vue】数据双向绑定相关面试题文章目录【Vue】数据双向绑定相关面试题前置知识：数据的双向绑定：监听器 Observer订阅器 Dep订阅者 Watcher解析器 Compile总结 --> 如何实现数据双向绑定：相关题目一：Vue 如何检测数组变化为什么只对对象劫持，而要对数组进行方法重写？相关面试题二：Vue3.0 和 2.0 的响应式原理区别相关面试题三：Proxy 与 Object.defineProperty 优劣对比前置知识：实现一个vue的简易数据双向绑定:【vue】双向数据

【vue】双向数据绑定（一）–发布订阅模式一个最简单的发布订阅模式Dep 类负责进行依赖收集首先，有个数组，专门来存放所有的订阅信息其次，还要提供一个向数组中追加订阅信息的方法然后，还要提供一个循环，循环触发数组中的每个订阅信息Watcher 类负责订阅一些事件，将自己的一些行为交给了 Dep类，放在 Dep数组中。当以后到了一定时机， Dep类负责对每一个行为进行循环，然后触发。此时 Watcher类就可以收到通知。// 收集依赖/收集订阅者class Dep

【vue】双向数据绑定（二）-- 实现vue的数据劫持与发布订阅通过 Object.defineProperty() 来实现一个简单的数据劫持文章目录【vue】双向数据绑定（二）-- 实现vue的数据劫持与发布订阅1.创建一个 index.html 和 vue.js，并对属性进行监测（数据劫持） --> Observe函数2.进行属性代理，使得可以通过 vm.age 直接获取，而不是使用 vm.$data.age3.读取vm的属性值，并将值填充到 {{xxx}} 中进行渲染 --> Co

【vue】高频面试题文章目录【vue】高频面试题一、为什么 data 是一个函数二、v-if 和 v-show 有何区别？三、v-for 为什么要加 key四、vue 常见内置指令五、vue常见修饰符六、computed 和 watch 的区别和运用的场景七、Computed 和 Methods 的区别八、slot 的使用九、nextTick的使用和原理十、scoped的作用审查元素时发现data-v-xxxxx，这是啥？十一、对 Vue 的理解十二、v-model 是如何实现的（1）作用在表单元素上（2

MVC 和 MVVM 区别MVCMVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。Model（模型）：是程序需要操作的数据或信息。通常模型对象负责在数据库中存取数据View（视图）：是提供给用户的操作界面，是程序的外壳Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据Controller 负责将 Model 的数据用 View

【vue】vue-Router 常见面试题文章目录【vue】vue-Router 常见面试题一、vue-Router基本使用二、常见面试题1.vue-router 路由钩子函数是什么 执行顺序是什么2. vue-router 动态路由是什么 有什么问题(1) params 方式(2) query 方式(3) params 和 query 的区别3.$route 和 $router 的区别4.Vue-Router 的懒加载如何实现5.vue-router 中常用的路由模式hash 模式history 模式6

【vue】vuex常见面试题文章目录【vue】vuex常见面试题一、vuex简介对vuex的理解各模块在流程中的功能：Vuex实例应用二、常见面试题1.Vuex 为什么要分模块并且加命名空间2.Vuex和单纯的全局对象有什么区别？3.为什么 Vuex 的 mutation 中不能做异步操作？4.Vuex中 action 和 mutation 的区别5.Vuex有哪几种属性？一、vuex简介对vuex的理解Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数

【vue】组件通信方式文章目录【vue】组件通信方式1.props 和 $emit2.$emit 和 $on3.Vuex1.props 和 $emit使用props，父组件向子组件传递数据父组件vue模板father.vue<template> <child :msg="message"></child></template><script>import child from './child.vue';export

【vue】生命周期（包含父子组件）文章目录【vue】生命周期（包含父子组件）一、vue生命周期方法二、keep-alive 中的生命周期三、Vue 子组件和父组件执行顺序四、created和mounted的区别五、异步请求在哪一步发起？六、在什么阶段才能访问操作DOM？一、vue生命周期方法生命周期就是 vue 从开始创建到销毁的过程，分为四大步（创建，挂载， 更新，销毁），每一步又分为两小步，比如：beforCreate和created,beforeMount和mounted,beforeUpda

文章目录四、vue2仿去哪儿网app——景点详情页面Ⅰ项目结构Ⅱ 开发笔记及注意点1.实现点击banner图，弹出一个画廊组件（图片的轮播）2.实现页面滑动至离顶部60时，出现Header组件3.实现Header组件的渐隐渐现动画效果4.对全局事件的解绑四、vue2仿去哪儿网app——景点详情页面Ⅰ项目结构景点详情页header部分画廊页面详情页Ⅱ 开发笔记及注意点1.实现点击banner图，弹出一个画廊组件（图片的轮播）设置v-show来决定画廊组件是否出现，并且绑定图片的点击事

文章目录三、vue2仿去哪儿app——城市列表页面Ⅰ 页面结构Ⅱ 开发笔记及注意点1.使用Better-scroll第三方包实现拖动2.1. 使用router-link实现页面的跳转2.2 router点击后变色问题3.实现点击字母表某个字母，跳转到相应字母的城市列表项（兄弟组件间联动）4.在左侧字母表中做上下拖拽的时候，城市列表内容也跟着变化5.Vuex的高级使用及localStorage6.使用函数节流，限制move方法的频率7.使用keep-alive优化网页性能三、vue2仿去哪儿app——城市列

文章目录二、vue2仿去哪儿网app——首页开发Ⅰ 页面结构Ⅱ 开发笔记及注意点1.公共样式抽取2.路径 --> 绝对路径3.用padding-bottom实现固定宽高比4.保证内容不超出父盒子5.axios 获取数据6.实现有分页效果的图标（icon）轮播区域Ⅲ bug解决1.vue-cli引入iconfont报错：2.vue-awsome-swiper修改轮播图pagination颜色问题3.1. vue轮播图插件 Vue-Awesome-Swiper3.2 npm发布包缺少.d.ts文件，VSC

一、vue2仿去哪儿网app —— 前期准备Ⅰ项目结构Ⅱ 项目收获理解整个vue项目的流程，以及vue整个项目的各部分的划分。Vue Router 实现多页面的路由Vuex 多组件的数据共享Axios 进行 Ajax 数据的获取移动端页面布局技巧stylus编写前端样式swiper组件的使用公用组件的拆分Ⅲ 适配移动端1.meta标签相关设置 <meta name="viewport" content="width=device-width,initial-

vue-router文章目录**vue**-router(一)基本使用**简单案例****创建router实例****挂载到Vue实例中****步骤一：创建路由组件****步骤二：**配置组件和路径的映射关系**步骤三：**使用路由.**最终效果如下**(二)细节处理1.路由重定向(redirect)2.history模式3.router-link补充4.**路由代码跳转**5.**动态路由**(三)**路由的懒加载****懒加载的方式**(四)**嵌套路由**(五)**传递参数**参数分类**传递参数方

vuex文章目录vuex(一)简单案例(二)五个核心概念Ⅰ**Getters**基本使用Ⅱ **Mutation**状态更新1.状态更新2.**传递参数**3.提交风格Ⅲ actionⅣ module(一)简单案例1.首先，我们需要在某个地方存放我们的Vuex代码：这里，我们先创建一个文件夹store，并且在其中创建一个index.js文件在index.js文件中写入如下代码：2.其次，我们让所有的Vue组件都可以使用这个store对象来到main.js文件，导入store对象

Vue组件定义和注册以及组件之间的传值文章目录Vue组件定义和注册以及组件之间的传值(一)认识组件化组件化的思想：模块化和组件化的区别组件化思想的应用：(二)注册组件**注册组件步骤解析**实际开发中组件常见写法（荐）全局组件局部组件注意点：驼峰式命名**全局组件和局部组件****父组件和子组件**(三)**组件数据的存放**(四)组件通信**props**基本用法（父传子）**子级向父级传递**($emit)组件通信的其他方法1.`$emit`/`$on`（eventBus）2.`$parent` /