小柒的前端之旅

前面的话Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。这篇文章介绍Vue实例的生命周期。图解vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后， 销毁前/后。beforeCreate （创建前）：vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化created (创建后) ： data数据初始...

前面的话前端日问，巩固基础，不打烊！！！解答为什么要进行懒加载？如果不使用懒加载，首页加载的内容就会很大，会出现长时间的白屏。运用懒加载可以实现按需加载，请求到该页面时，才会加载这个页面。三种实现方式Vue的异步组件 routes: [ { path: '/', name: 'memo', component: (resolve) =...

前面的话前端日问，巩固基础，不打烊！！！解答组件之间的通信方式有很多种，Vuex解决了非父子组件通信消息传递，一般适合用于大项目，如果项目不大，涉及的组件通信方式不多，可以采用$.attrs与$.listeners.Vuex：是Vue的状态管理器，用来存储数据，并且数据都是响应式的。Vuex的原理介绍通过new Vuex.Store()来创建一个store实例，store实例有5大属性...

前面的话以前使用vue-cli，vue init webpack project-name一行命令就可以初始化一个我们自己的项目,小柒觉得好神奇，之后研究啦一下vue-cli,其实就是一个高级版的克隆。然后就决定自己实现一套属于自己的脚手架（xq-cli），目前xq-cli脚手架已经实现了有一段时间了，决定拿出来分享。xq-cli脚手架功能创建项目询问用户：询问用户新建项目的基本信息下...

前面的话前端日问，巩固基础，不打烊！！！解答单个Slot（匿名插槽）在子组件内使用特殊的< slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将代替子组件的 < slot>标签以及它的内容。（一个组件只能有一个单个Slot）看个例子：父组件中所有的元素都会放到子组件的单个slot中。具名插槽匿名属性是没...

前面的话Vue每日一练，巩固基础，不打烊！！！每天花20分钟巩固，思考总结。解答次日更新

前面的话Vue每日一练，巩固基础，不打烊！！！

前面的话Vue每日一练，巩固基础，不打烊！！！解答简单来说，diff算法有以下过程同级比较，再比较子节点先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)比较都有子节点的情况(核心diff)递归比较子节点正常Diff两个树的时间复杂度是O(n^ 3)， 但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n...

前面的话Vue每日一练，巩固基础，不打烊！！！解答首先：Object.defineProperty是可以对数组进行劫持的，但对后来新添加的属性是不会劫持的。也就是说，Object.defineProperty是根据数组的索引来监听数组的变化的，只不过不能劫持后添加的属性。来看例子： function defineReactive(data,key,value){ Obj...

前面的话Vue每日一练，巩固基础，不打烊！！！解答基本用法使用Vue.directive()来注册自定义指令：全局注册比如制定一个懒加载指令v-lazyLoadVue.directive('lazyLoad', { // ...指令选项})指令选项bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作inserted: ...

前面的话Vue每日一练，巩固基础，不打烊！！！解答参照尤大大的回答，小柒总结一下：mutations里的同步意义在于，每个mutation执行完毕之后，可以得到对应的状态，使用devtools可以跟踪状态的变化如果是异步的，就没法知道状态是什么时候更新的，才有了actions。actions用来专门处理异步，里面触发mutations，就可以很清楚的看到mutation是何...

前面的话Vue每日一练，巩固基础，不打烊！！！解答如有错误欢迎指出，感谢！！！提出问题提出几个问题：computed 是如何初始化的？为何data值的变化computed会重新计算？为什么computed值是缓存的呢？想了解computed的原理，你需要了解Vue的响应式原理，了解computed其实就是一个惰性watcher。下面一一解答这几个问题。Watcher 的实...

前面的话Vue每日一练，巩固基础，不打烊！！！源码系列一直是小柒想总结的部分，之后也会逐步更新。解答Observer ：扮演的角色是发布者，主要作用调用defineReactive函数，在defineReactive函数中使用Object。defineProperty方法对对象的每一个属性添加get与set方法Dep：是调度中心/ 订阅器，作用是收集观察者watcher，以及通知wat...

前面的话Vue每日一练，巩固基础，不打烊！！！解答相信大家都知道虚拟DOM是由render函数生成，那么render函数是如何来的呢？答案： 是由template模板编译而来。看一下源码中是如何实现的：// src/compiler/index.jsexport const createCompiler = createCompilerCreator(function baseC...

前面的话Vue每日一练，巩固基础，不打烊！！！解答keep-alive是Vue内置的组件，可以使被其包含的组件保留状态，避免重新渲染。作用：用于缓存组件两个属性：include、exclude。被include匹配的属性会被缓存，被exclude属性匹配的不会被缓存。对应两个钩子函数：activated、deactivated,当组件被激活时，触发activated钩子函数，...

前面的话Vue每日一练，巩固基础，不打烊！！！解答回答思路： 路由的两种模式。

前面的话Vue每日一练 ，巩固基础，不打烊！！！解析面试官问虚拟DOM的优势是啥？你答：直接操作DOM性能不好。操作DOM性能不好？为什么不好？ 。。。怎么答才好： 虚拟DOM解决了什么问题？ 为什么频繁操作DOM性能会差？...

前面的话Vue每日一练，巩固基础，不打烊！！！解答我们将着两个打印出来看看：$route是路由信息对象： 它包括 path, params，hash,name等路由信息$route.path : 当前路由的路径$route.params: 是一个对象$ route.query: 对象，表示url查询参数。比如/user?user=1,则$route.query.user为1$r...

前面的话Vue每日一练， 巩固基础，不打烊！！！解析分三部分来看：加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程父 be...

前面的话Vue每日一练，巩固基础，不打烊！！！解答首先Vue中有一个重要的概念：异步更新队列Vue异步更新DOM的原理：Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。异步更新队列实现的选择 ： Vue会根据当前浏览器环境优先使用原生的Promise.then和Muta...

前面的话Vue每日一练，不打烊！！！解析一般情况，我们将请求接口放在mounted中，mounted阶段，el已经挂载，可以操作DOM。created阶段也可以做一些简单的请求（不操作DOM）注意：如果是服务端渲染，需要放到created中。因为只支持beforeCreat与created两个钩子。...

前面的话每日一练，不打烊！！！解答首先：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM；举个例子：表单切换<template v-if="logi...

前面的话每日一练，不打烊！！！今天问一个小问题：Vue事件绑定加括号与不加括号的区别？解答不加括号：结果打印出了MouseEvent：加括号：此时打印undefined：如果想要打印MouseEvent，括号中必须传$event：总结： 加不加括号，其实就是是否默认传事件对象 event 。不加括号时，函数第一个参数为 event，加了括号后，需要手动传入...

前面的话Vue每日一问，与小柒一起打卡学习，每天进步一点点！原生操作doma = document.getElementById('elea');// 获取aelementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的lielement = document.querySelector(selectors)//...

前面的话问题 ：说说你对SPA单页面的理解SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：1、用户体验好、快，内容的改变不需...

前面的话vue每日一问来喽！！！ 先思考两分钟，再看解答。解析computed： 计算属性，一般依赖其他属性值时，我们使用计算属性，并且设置return将其返回。它的特点是可以缓存，只有它依赖的属性值发生变化，它才会重新取值。更适用于复杂的逻辑操作。（一个数据受多个数据影响）应用场景： 简化{{}}里的计算。watch： 更多的是观察作用，每当监听的数据发生变化时，就会执行相应的...

前面的话因疫情影响，小柒已经22天没碰过电脑，博客也没有更新。今天喜提充电器，无比激动！！！ 小柒将继续更新博客，之前的Vue每日一题也会补起来。又可以与小伙伴们一起学习进步，开心！！！什么是virtual dom?virtual dom即虚拟dom，不是真实的dom。它是用js模拟的DOM结构，是一个js对象。看一下真实dom与虚拟dom的区别：真实dom:<div id = ...

每日一练 / 2.16vue为什么要求组件模板只能有一个根元素?我们在使用单文件组件时，一般这样写：<template><div class='component'></div></template>为什么template下必须有一个根元素？首先看一看template这个标签，这个标签是html5的新标签，有三个特性：隐藏性：不...

前面的话Vue只会使用而不懂其原理也是不行的，小柒将总结一系列Vue相关问题，从基本知识到源码分析都进行一遍梳理。基本知识点（1）(1) Vue.js的两个核心是什么？数据驱动（双向数据绑定）组件系统：包括模板（template）、初始数据（data）、接受的外部参数(props)、方法（methods）、生命周期构造函数、私有资源等(2) 对于Vue是一套构建用户界面的渐进式...