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

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

技术 · 2023-07-28
vue运行npm run serve后在浏览器自动打开

面试题：computed与watch的区别

1.computed能完成的功能，watch都可以完成。2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。3.computed会使用缓存，而watch不使用缓存，每次监听都执行回调4.computed需要return，而watch不一定要return5.computed从一开始就进行监听，而watch则不监听第一次加载，如果要watch监听第一次加载，需要配置immediate：true6.使用场景：computed适用于一个数据受多个数据影响时，watch适用于多个数据受一个数据影响时。两个重要的小原则: 1.所有被Vue管理的函数，最好写成普通丽数，这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

面试 · 2023-07-28
面试题：computed与watch的区别

当被问到vue组件中的 data 为什么是函数?

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，如果其中一个组件改变了data的值，那么其它所有使用同一个data对象的组件都会受到影响。而当我们将data定义为一个函数时，每个组件都会调用这个函数，返回一个新的对象，这样每个组件都拥有了自己独立的data对象，彼此之间不会产生影响。因此，为了保证每个组件都有自己独立的data对象，Vue规定了data必须是返回一个对象的函数。 具体来说，当我们在组件中定义data为一个对象时，这个对象会被所有组件实例共享，如果其中一个组件改变了data的值，那么其它所有使用同一个data对象的组件都会受到影响。而当我们将data定义为一个函数时，每个组件都会调用这个函数，返回一个新的对象，这样每个组件都拥有了自己独立的data对象，彼此之间不会产生影响。

面试 · 2023-07-27

面试题：说下vue、react中key的作用是什么？（key的内部原理）

1.虚拟DOM中key的作用:key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，随后Vue进行[新虚拟DOM] 与[旧虚拟DOM]的差异比较，比较规则如下:2.对比规则: (1).旧虚拟DOM中找到了与新虚拟DOM相同的key: a.若虚拟DOM中内容没变，直接使用之前的真实DOM b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM(2).旧虚拟DOM中未找到与新虚拟DOM相同的key:创建新的真实DOM，随后渲染到到页面。 3.用index作为key可能会引发的问题:a.若对数据进行:逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低b.如果结构中还包含输入类的DOM，会产生错误DOM更新 ==> 界面有问题。4.开发中如何选择key?:最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key也是没有问题的

面试 · 2023-07-27

css滤镜应用：透明表单、玻璃效果

毛玻璃背景已被广泛应用于网页设计中，其关键代码是：backdrop-filter: blur(4px);配合内外阴影设置，可达到最佳效果：box-shadow: inset 1px 1px 6px rgba(255,255,255,0.3), 2px 2px 15px rgba(0, 0, 0, 0.5); 本例实现毛玻璃表单特效，结合动画的使用让页面更具动感，下面是html代码部分： <div class="container"> <div class="bg"> <span></span> <span></span> <span></span> </div> <div class="glass"> <div class="text&q

技术 · 2023-07-25
css滤镜应用：透明表单、玻璃效果

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

vue双向绑定原理分析(一)—模板解析编译

vue底层是如何实现模板解析的呢？在html中写这样的代码： <div id="app"> {{str}} <h1>{{str}}</h1> <ul> <li>{{text}}</li> </ul> </div>js中：new Vue({ el:'#app', data:{ str:'你好，哈哈中国', text:'好的' } })引入vue.js：class Vue{ constructor(options) { this.$el = document.querySelector(options.el) //获取el元素 this.$data=options.data this.compile(this.$el) } compile(node

技术 · 2023-07-19
vue双向绑定原理分析(一)—模板解析编译

纯css实现弹跳，仿真重力碰撞效果 循环动画/ease-in

纯css实现弹跳，仿真重力碰撞效果，主要用到动画特效 animation ，它的6个属性为：animation: name duration timing-function delay iteration-count direction;值描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。html代码：<div class="boxwrap"> <div class="ball"></div> <div class="ground"></div> </div>css代码：b

技术 · 2023-07-17
纯css实现弹跳，仿真重力碰撞效果 循环动画/ease-in
2014 - 2024 杀死一只知更鸟. All Rights Reserved.
Theme Jasmine by Kent Liao
友情链接：知新网