vue
文章平均质量分 50
m0_50520143
这个作者很懒,什么都没留下…
展开
-
Vue数据双向绑定的原理
一、原理:vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤需要observer对数据对象进行递归遍历,包括子属性对象的属性,通过Object.defineProperty()都加上 setter和getter方法,同时添加属性订阅器(dep)。这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化c原创 2021-05-06 00:41:06 · 91 阅读 · 0 评论 -
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 · 116 阅读 · 0 评论 -
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 · 63 阅读 · 0 评论 -
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 · 122 阅读 · 0 评论 -
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 · 176 阅读 · 0 评论 -
vue中axios的封装
为什么要对axios进行封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。axios有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。在一个完整的项目中,和服务端的交互会很频繁,一个项目会有很多请求,冗余代码很多。所以将请求封装,统一管理还是很有必要的。axios的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。axios的安装npm install a原创 2021-05-05 15:12:57 · 236 阅读 · 0 评论 -
vuex的核心概念和运行机制
Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。核心概念vuex由五部分组成:State、Mutations、Actions、Getter、Modulevuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActionsstate: 储存初始化数据mutations:唯一可以修改state里的数据的场所acti原创 2021-05-05 03:05:23 · 71 阅读 · 0 评论 -
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 · 3751 阅读 · 1 评论 -
vue中的$nextTick
什么是Vue.nextTick()?官方定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。理解:Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新示例当我点击按钮的时候要让input框显示并且获取焦点<template> <div class="home"> <p>Hello</p>原创 2021-05-05 00:48:54 · 86 阅读 · 0 评论 -
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 · 374 阅读 · 0 评论