- 博客(25)
- 收藏
- 关注
RSS订阅原创 Vue数据双向绑定的原理
一、原理：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤需要observer对数据对象进行递归遍历，包括子属性对象的属性，通过Object.defineProperty()都加上 setter和getter方法，同时添加属性订阅器(dep)。这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化c
2021-05-06 00:41:06
106
原创 vue简版源码 Compile
vue简版源码 Compile篇这篇源码里 bind 方法很重要，不管我们解析什么（除事件指令）都会调用到 bind 方法，同时给每一个都添加 Watcher 监听者。function Compile(el, vm) { this.$vm = vm; // this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选择器 去
2021-05-06 00:26:37
128
原创 vue简版源码 Observer
vue简版源码 Observer篇相关链接：MVVM篇这篇代码的入口在中间 function observe(value, vm) 的时候。function Observer(data) { //在Observer实例上暂存data this.data = data; // 调用Observer 里 walk 方法 ，这里用的是颗粒化开发思想 this.walk(data);}Observer.prototype = { walk: function(da
2021-05-06 00:26:06
143
原创 vue简版源码 Watcher
vue简版源码 Watcher篇function Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //n个相关的dep的容器 this.value = this.get(); //当前表达式对应的value}Watcher
2021-05-06 00:25:04
75
原创 vue简版源码 MVVM
function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; //保存this 为了之后使用this的时候保证this指向的正确性 var me = this; //通过Object.key
2021-05-05 16:21:59
218
原创 vue中axios的封装
为什么要对axios进行封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。axios有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。在一个完整的项目中，和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。axios的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。axios的安装npm install a
2021-05-05 15:12:57
249
原创 vuex的核心概念和运行机制
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。核心概念vuex由五部分组成：State、Mutations、Actions、Getter、Modulevuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActionsstate： 储存初始化数据mutations：唯一可以修改state里的数据的场所acti
2021-05-05 03:05:23
91
原创 vue-router 路由守卫和执行顺序
vue-router 路由守卫全局路由守卫// 全局前置钩子 router.beforeEach((to, from, next) => { // ...})// 全局解析守卫 router.beforeResolve((to, from, next) => { // ...})// 全局后置钩子 router.afterEach((to, from) => { // ...})路由独享的守卫const router = new VueRoute
2021-05-05 01:59:43
4061
1
原创 vue中的$nextTick
什么是Vue.nextTick()？官方定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。理解：Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新示例当我点击按钮的时候要让input框显示并且获取焦点<template> <div class="home"> <p>Hello</p>
2021-05-05 00:48:54
98
原创 修改数据页面不更新的原因和解决方案
在Vue项目中，有时候在我们修改或者添加新的对象属性后，明明data中的数据已经更新了，但是页面依旧没有更新var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的原因：vue2是用过Object.defineProperty实现数据响应式，组件初始化时，对data中的数据进行递归遍历，对data的每一个属性进行劫持，
2021-05-04 17:23:03
2843
原创 v-for 中的key值的作用
v-for中的key值的作用key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。2. 同一层级的一组节点，他们可以通过唯一的id进行区分。基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^
2021-05-04 15:24:52
393
原创 v-if 和 v-for 谁的优先级高？
v-if 和 v-show 的优先级1、v-for 的优先级是高于v-if 的我们查看下vue源码 ，源码位置：\vue-dev\src\compiler\codegen\index.jsexport function genElement (el: ASTElement, state: CodegenState): string { if (el.parent) { el.pre = el.pre || el.parent.pre } if (el.staticRoot &&am
2021-05-03 21:58:17
2126
原创 vue组件中data为什么是一个函数
组件中为什么data必须是一个函数一、实例和组件定义data的区别vue文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app">{{ message }}</div>var vm= new Vue({ el: '#app', data: { message: 'Hello Vue!' }})在这个demo中data是一个对象，通过 new Vue 创建的 Vue 实例中，我们直接把data上的message属性通过模板渲染到页面上去了
2021-05-03 20:23:36
153
转载 vue中 v-if 和 v-show的区别
在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染，而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。v-if 和 v-show 都是通过判断绑定数据的true\false来展示的简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低本质的区别v-show 本质就是标签display设置为none，控制隐藏v-if 是动态的向DOM树内添加或者删除DOM元素编译的区别v-show 其实就是在控制cssv-if 切换有一个局
2021-04-29 22:01:32
89
原创 解决数值输入框可以输入字母E的问题
1、问题描述（1）如果页面需要输入常规数值时，我们通常会使用number类型的控件。这样浏览器会自动忽略非数值字符，只能输入数字进去。<inputtype="number"/>（2）但我们发现还是能输入进去字母E，无论大写还是小写（当然除了e以外的其它字母确实无法输入）。2、问题原因 e在数学上代表的是无理数，是一个无限不循环的小数，其值约为2.7182818284，所以在输入e的时候，输入框会把e当成一个数字看待。3、解决办法（1）如果我们...
2021-04-27 08:52:36
1143
原创 Vue组件通讯的几种方式
说到组件通讯大家一般都会想到，父传子、子传父、或者兄弟组件传参(Bus.js事件总线)，这三种我之前有发表过，还有不明白的可以去看一看：父传子、子传父、兄弟组件传参除了这些其实还有好多可以实现组件传参的方法，下面为大家详细的介绍一下其他几种：1、localStorage 和 sessionStorage本地存储其实大家都知道，可能太熟了会忘记了他们也可以实现组件传参。localStorage 和 sessionStorage 使用方法一样 // localStorage 和 s.
2021-04-25 02:54:22
203
原创 NavigationDuplicated 产生原因和解决方法
NavigationDuplicated 的产生原因当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题） 或者其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给...
2021-04-16 10:05:47
4021
原创 js事件总汇
js事件1.1 onclick 点击事件1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）1.3 onunload 用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）1.4 onchange 内容变化事件（常结合对输入字段的验证来使用）1.5 onmouseover 鼠标移动到HTML元素上方的事件1.6 onmouseout 鼠标移出HTM
2021-04-12 00:01:16
102
原创 JSONP的原理
基本原理基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。详解： 利用script标签不受同源策略的影响,通过src属性向后端发送请求,后端接受到请求之后,根据前端请求地址中的callback回调函数的名字 来把JSON数据填充到回调函数内部, 进行返回. 前端在接收到返回结果之后 自动的调用本地callback中填写的方法 实现数据获取执行过程执行过程：前端定义一个解析函数(如: function hello (data) {})通过params的形式包装scrip
2021-04-08 16:52:29
97
原创 HTTP常用的状态码
1xx：信息100 Continue客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。101 Switching Protocols服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那
2021-04-08 11:38:42
117
原创 Vue组件通信(父传子、子传父、兄弟通信)
1、父组件传到子组件1.在父组件的子组件标签上自定义一个属性，挂载要传递的数据2.在子组件上用props接收数据1. 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> </div> </template> <s.
2021-04-05 16:26:18
125
原创 数组去重
数组去重的几种方法1、利用 Set 去重（ES6中最常用）/* 1.返回值是一个去重的数组 2.注意 Number 和 String 类型*/var arr = ['one','two','three','one','three','two','four'];let el = new Set(arr);console.log(el); // ['one','two','three','four'];2、利用for嵌套for，然后splice去重（ES5中最常用）
2021-04-05 15:21:59
88
原创 事件冒泡和事件捕获
什么是事件JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）什么是事件流事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。事件冒泡、事件捕获IE提出的事件流是事件
2021-04-02 00:02:20
359
1
原创 computed() 计算属性
vue中Computed的使用计算属性 ：computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一
2021-04-01 00:56:02
226
原创 数组方法
数组常用的方法目录数组常用的方法 1、sort()：将数组里的项从小到大排序 2、join() 数组转字符串3、filter() 书写格式：arr.filter()4、map()5、forEach()6、push()和pop()7、shift() 和 unshift()8、reverse()9、concat()10、splice()11、slice()12...
2021-03-31 00:53:43
82
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人