- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue修改数据页面不重新渲染
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template>...
2022-02-17 20:17:50
442
原创 vue监听和深度监听watch
watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p> </div> <!-- 引入vue --> <script src="/node_modules/vue/dist/vue.js"></sc...
2022-02-17 20:15:36
178
原创 Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注
2022-02-17 20:14:15
290
原创 vue中的diff算法
一、是什么diff算法先来一句概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句人话diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁其有两个特点：比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode
2022-02-17 20:09:56
306
原创 Vue中的虚拟dom
vue的虚拟DOM和diff算法，是Vue面试的最后一招一、什么是虚拟DOM通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。再来一张图： 是不是一下子秒懂 没懂再来一张创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属
2022-02-17 20:06:44
1320
原创 Vue的双向数据绑定原理
先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile(模板解析器)解析模板指令，..
2022-02-17 20:01:20
101
原创 Vue生命周期的执行过程
简单粗暴的答案直接走起：答：总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data....
2022-02-17 19:59:08
125
原创 v-if与v-show的区别
一、相同点都可以动态控制着dom元素的显示隐藏一、区别v-if:控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show:控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候..
2022-02-17 19:58:27
1580
原创 vue常用的指令
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
2022-02-17 19:57:17
66
原创 为何组件的data必须是一个函数
一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数如果为组件data直接定义为..
2022-02-17 19:54:44
120
原创 vue自定义指令的应用场景
使用自定义指令背景代码复用和抽象的主要形式是组件。 当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令 但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-fo
2022-02-14 07:45:26
130
原创 vue中如何自定义指令directive
一、 什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</.
2022-02-14 07:44:13
119
原创 vue组件化开发
你封装过组件吗？？ 说一下组件封装？？？？ 你在项目中是如何封装组件的？？？？？ …以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能
2022-02-14 07:41:00
74
原创 【无标题】
mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…}
2022-02-14 07:35:23
64
原创 vue中的diff算法
一、是什么diff算法先来一句概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。换句人话diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁其有两个特点：比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode
2022-02-09 07:33:24
258
原创 vue生命周期
生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段分别有：创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created() 是最早使用data和methods中数据的钩子函数挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧
2022-02-08 07:40:23
362
原创 Vue的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile(模板解析器)解析模板指令，将模板中的变量替换成数...
2022-02-08 07:38:41
168
原创 vue常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind
2022-01-31 00:17:32
64
原创 diff 算法
diff算法就是进行虚拟节点对比，并返回一个patch对象 用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom 而Vue3只比较发生变化的节点 当节点一旦发生改变 会给一个变量 效率大大提高...
2022-01-31 00:16:37
484
原创 数组部分方法
push可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。pop()从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice()截取数组，如果不传参数，则返回原数组；如果传一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截
2022-01-28 22:55:33
68
原创 null和undefined的区别
相同点在JavaScript中，null 和 undefined 几乎相等在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log
2022-01-27 01:38:03
59
原创 js的数组去重以及数组排序
1.Es6-set 使用Es6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr)];//或者//return Array.from(new Set
2022-01-25 08:28:44
601
原创 for...in 和for...of的区别以及null和undefined的区别
for···in和for···of的区别1.首先一句话：(for···in取key，for··of取value) 2.从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)； 3.从遍历字符串的角度来说，同数组一样。 4.从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错 5.如果要使用for…of遍历普通对象，需要配合Object.keys()一起使用。 var arr
2022-01-25 08:26:05
193
原创 垃圾回收机制与内存泄漏
垃圾回收机制与内存泄漏垃圾回收机制浏览器的js具有自动垃圾回收机制（GC）,执行环境会管理代码执行中所使用的内存，垃圾回收器会定期寻找不在使用的变量，释放其内存，垃圾回收会按照时间间隔周期性的执行变量的死亡全局作用域内的变量，会在关闭浏览器关闭页面时结束，被垃圾回收期回收函数级与块级作用域内的变量，只有在函数执行的过程中存在，函数执行完毕，垃圾回收器回收释放闭包内，因为内部函数使用外部函数变量的原因，它内部的变量，永远不会结束判别变量是否还有用的两种方式1.标记清除（常用）垃圾回收器在运
2022-01-21 08:56:25
125
原创 js数据类型判断
js数据类型判断一共有五种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1. typeof基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object基本
2022-01-21 08:51:43
69
原创 js异步的宏任务和微任务
什么是宏任务和微任务宏任务：setTimeout、setYnterval、Ajax、DOM事件 微任务：Promise、async/await 微任务执行时机比宏任务要早***异步单线异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助他们的区别：异步不会阻塞程序的执行 同步会阻塞程序的执行同步异步的问题javascript是单线程语言，js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着,所以将任务设计成了两类：同步任务、异步任务任务列队
2022-01-21 08:33:01
73
原创 js数组的方法
1.整理一下数组方法join push shift 和unshift sort reverse concat slice splice index forEach map filter every some1.joinjoin,就是把数组转换成字符串，然后给他规定个连续的字符串，默认的是逗号（，）2.push和poppush:把里面的内容添加到数组末尾，并返回修改后的长度 pop:移除数组最后一项，返回移除的那个值，减少数组的length3.shift和uns
2022-01-21 08:31:17
516
原创 js数据类型
js数据类型有哪些基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增） 和 BigInt（es10新增）；引用数据类型：Object。其中包含Object、Array、 function、Date、RegExp。栈堆存储值类型存储：主要针对三种数据（Number、String、Boolean）。从下往上存储直接存储在栈中，占据空间小、大小固定，属于被频繁使用的数据，所以放入栈中存储。**引用数据类型存储：**主要...
2022-01-20 08:16:40
112
原创 js异步的宏任务和微任务
什么是宏任务和微任务宏任务：setTimeout、setYnterval、Ajax、DOM事件 微任务：Promise、async/await 微任务执行时机比宏任务要早***异步单线异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助他们的区别：异步不会阻塞程序的执行 同步会阻塞程序的执行同步异步的问题javascript是单线程语言，js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着,所以将任务设计成了两类：同步任务、异步任务任务列队
2022-01-20 08:14:57
110
原创 闭包的概念
如何产生闭包闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。//根据定义，包含变量的函数就是闭包也就是函数嵌套函数就可以称之为闭包.作用域应对的特殊情况，有两种表现：函数作为参数被传递函数作为返回值被带回闭包的应用场景闭包应用场景1，封装对象的私有属性和方法隐藏数据做一个简单的缓存工具// 闭包隐藏数据，只提供 APIfunction createCache() { const num=100 cons
2022-01-15 19:25:02
171
原创 js 面试题总结
一、js原型与原型链1. prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4.原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的.
2022-01-15 07:41:14
72
原创 两，三栏布局，圣杯双飞翼
1. 两栏布局,左边定宽，右边自适应左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响2. 三栏布局，圣杯布局、双飞翼布局原来我做的主要是后台管理和一些移动端的项目，这两种布局呢是我原来查阅资料时看到的，所以就做了个简单的理解。圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染） 首先要给两侧设置padding预留出相应的空间 随后分别为三列设置宽度与
2022-01-11 07:40:02
39
原创 上传，修改头像
手写一个input的方法1.书写上传的input按钮<input type='file' accept="image/*" @change='change'>上传本地文件type 类型，表示是一个上传文件的inputaccept 上传的类型，代表是图片@change 在选中文件之后触发2.对应的change事件 change(e) { // 手写的input需要一个对象将本地图片转换为对应的格式来上传 let formData
2022-01-11 07:36:59
129
原创 盒子水平垂直居中
第一种：盒子宽高 +margin思路 ：上外边距为自身高度一半，左外边距为自身宽度一半：.box { width: 800px; height: 400px; border: 1px solid black; } .son { width: 400px; height: 200px; margin-top:.
2022-01-08 07:42:13
40
原创 position定位的属性方法
position含义是指定位类型, 可取值有:static,relative,absolute,fixed,inherit,sticky(另: sticky是除css3新发布的属性)1. position: static;static(没定位)是position的默认值, 元素处于正常的文档流中, 会忽略left, top, right, bottom, z-index属性.、2. position: relative;relative(相对定位)是给元素设置相对原本位置的定位,...
2022-01-08 07:35:04
67
原创 vuex的使用
1.什么是vuex1.vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护vuex的持久化数据高级用法—数据持久化问题：存储在vuex中的状态，刷新页面，会丢失。为了解决页面数据丢失，才有了数据持久化。最简单的做法就是利用插件vuex-persistedState安装cnpm install vuex-persistedState -S-S 是–save的简写，意为：把插件
2022-01-07 07:41:17
65
原创 HTML&CSS 面试总结
HTML&C盒模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成标准盒模型 （非IE浏览器）box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异盒模型 （IE浏览器）box-sizing:border-box；一个块
2022-01-06 07:37:51
239
原创 吸顶显示隐藏
1.定义一个自定义指令title <header v-title> <i class="iconfont icon-back"></i> <span>11111</span> </header>2.在该页面引入vueimport Vue from "vue";3.创建title指令,并测试一下Vue.directive("title", { inserted(el) {
2022-01-05 07:36:24
199
原创 头部九宫格 返回 顶部
在组件里设置 <div class="nav" :style="{'backgroundColor':bg,'color':color}">export default { props:["bg","color"], data() { return {}; }, mounted() {}, methods: {}, components:{}};然后在home<div class="mask" v-sh
2022-01-04 21:19:54
283
原创 移动端的vw vh
什么是vw vh属于一种新兴的移动端布局配置，功能与rem类似vw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一如何自动适配vw vh安装依赖 npm install postcss-px-to-viewport -D 修改 .postcssrc.js// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { plug
2022-01-03 21:32:28
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人