标签 vue 下的文章 - 杀死一只知更鸟

在created和mounted去请求数据，有什么区别?

created:在渲染前调用，通常先初始化属性，然后做渲染mounted:在模板渲染完成后，一般都是初始化页面后，再对元素节点进行操作，在这里请求数据可能会出现闪屏的问题，created里不会，一般用created比较多。请求的数据对DOM有影响，那么使用created如果请求的数据对DOM无关，可以放在mounted

面试 · 2023-08-07

在created和mounted去请求数据，有什么区别?

vue中的修饰符都有哪些？

1.事件修饰符 .stop 阻止冒泡 .prevent 阻止默认行为 .capture 内部元素触发的事件先在此处理 .self 只有在event.target是当前元素时触发 .once 事件只会触发一次 .passive 立即触发默认行为 .native 把当前元素作为原生标签看待2.按键修饰符 .keyup 键盘抬起 .keydown 键盘按下3.系统修饰符 .ctrl .alt .meta4.鼠标修饰符 .left 鼠标左键 .right 鼠标右键 .middle 鼠标中键5.表单修饰符 .lazy 等输入完之后再显示 .trim 删除内容前后的空格 .number 输入是数字或转为数字

面试 · 2023-08-06

vue中的修饰符都有哪些？

vue3的性能为什么比vue2好？

1.diff算法的优化2.静态提升3.事件侦听缓存

面试 · 2023-08-06

vue3的性能为什么比vue2好？

vuex刷新数据会丢失吗? 怎么解决?

vuex肯定会重新获取数据，页面也会丢失数据1.把数据直接保存在浏览器缓存里 (cookie localstorage sessionstorage)2.页面刷新的时候，再次请求数据，达到可以动态更新的方法监听浏览器的刷新事件，在刷新前把数据保存到sessionstorage里，刷新后请求数据，请求到了用vuex，如果没有那就用sessionstorage里的数据

面试 · 2023-08-05

vuex刷新数据会丢失吗? 怎么解决?

说一下v-if和v-show的区别?

共同点：都可以控制元素的显示和隐藏区别：1.v-show是控制元素的display值来让元素显示和隐藏: v-if显示隐藏是把DOM元素整个添加和删除2.v-if有一个局部编译/卸载的过程，切换这个过程中会适当的销毁和重建内部的事件监听和子组件，v-show只是简单的css切换3.v-if才是真正的条件渲染: v-show从false变成true的时候不会触发组件的生命周期，v-if会触发生命周期4.v-if的切换效率比较低 v-show的效率比较高

面试 · 2023-08-05

说一下v-if和v-show的区别?

vue路由传参面试题：params参数传的是空串如何解决？

面试题一：如何指定params参数可传可不传？在配置路由的时候，在占位符后面加个?面试题二：params参数可传可不传，如果传的是空串如何解决？使用undefined解决

面试 · 2023-07-29

vue路由传参面试题：params参数传的是空串如何解决？

vue运行npm run serve后在浏览器自动打开

在package.json文件，找到scripts配置项，配置serve为："vue-cli-service serve --open"，在后面加一个--open

技术 · 2023-07-28

vue运行npm run serve后在浏览器自动打开

Vue3.0 响应式实现原理

通过Proxy (代理): 拦对象中任意属性的变化，包括: 属性值的读写、属性的添加、属性的删除等通过Reflect (反射): 对源对象的属性进行操作示例代码： const p = new Proxy(person,{ //有人读取p的某个属性时调用 get(target,propName){ console.log(`有人读取了p身上的${propName}属性`); return Reflect.get(target,propName) }, //有人修改p的某个属性、或者给p追加某个属性时调用 set(target,propName,value){ console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`) // target[propName]=value Reflect.set(target,propName,value)

技术 · 2023-07-20

vue3 reactive对比ref

从定义数据角度对比:ref 用来定义: 基本类型数据reactive 用来定义: 对象 (或数组)类型数据备注: ref 也可以用来定义对象 (或数组)类型数据,它内部会自动通过 reative 转为代理对象从原理角度对比:ref 通过 object.defineProperty() 的 get 与 set 来实现响应式 (数据劫持)reactive通过使用Proxy来实现响应式(数据动持)，并通过Reflect操作源对象内部的数据从使用角度对比:ref定义的数据: 操作数据需要 .value，读取数据时模板中接读取不需要 .valuereactive定义的数据: 操作数据与读取数据: 均不需要 .value

技术 · 2023-07-20

vue双向绑定原理分析(二)—事件绑定

接上回：vue双向绑定原理分析(一)—模板解析编译现在在button标签内添加@click事件：<button @click="handleClick">点击事件</button>在methods中：handleClick(){ alert('点击事件触发了') },主要是vue.js代码：class Vue{ constructor(options) { this.$el = document.querySelector(options.el) //获取el元素 this.$options=options this.compile(this.$el) } compile(node) { //对节点进行循环遍历 node.childNodes.forEach((item) => { /** * nodeType：可以获取到节点的类型，可以通过数字判断你这个节点到底是哪种类型的

技术 · 2023-07-19

Theme Jasmine by Kent Liao