自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(24)
  • 收藏
  • 关注

原创 虚拟 dom?

虚拟 dom 是利用 js 描述元素与元素的关系,用 js 对象来表示真实的 DOM 树结构,创建一个虚拟 DOM 对象由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM,会产⽣⼀定的性能问题.在组件渲染的时候会调用 render 函数,这个函数会生成一个虚拟 dom,再根据这个虚拟 dom 生成真实的 dom,然后这个真实的 dom 会挂载到我们的页面中。如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom如果组件内有响应的数据,数据发

2022-04-26 20:27:08 100

原创 组件写name有啥好处?

增加 name 属性,可以实现组件递归调⽤自身,调用的时候用的就是 name 名字可以表示组件的具体名称,⽅便调试和查找对应的组件比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的...

2022-04-26 20:25:52 136

原创 vue.use是干什么的?

vue.use 是用来安装 Vue.js 插件。这个插件可以是一个组件也可以是一个函数,插件里要有一个 install 方法,install 方法调用时,他的第一个参数就是 Vue 在调用 vue.use 方法的时候就会执行 Vue.install 方法该方法需要在调用 new Vue() 之前被调用。...

2022-04-26 20:25:07 3185

原创 生命周期的钩子函数?

创建阶段- beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this- created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了- beforeMount 组件挂载之前- mounted 组件挂载之后 这个时候能拿到 dom 节点使用运行阶段 只要修改 data 就会触发- beforeUpdate 数据变了 视图还没...

2022-04-26 11:38:52 77

原创 Vue的diff算法原理是什么?

Vue的diff算法是平级⽐较,不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较先⽐较两个节点是不是相同节点相同节点⽐较属性,复⽤⽼节点先⽐较⼉⼦节点,考虑⽼节点和新节点⼉⼦的情况优化⽐较:头头、尾尾、头尾、尾头⽐对查找,进⾏复⽤...

2022-04-25 18:51:15 1297

原创 MVVM模式的优点以及与MVC模式的区别?

MVVM模式的优点:1、低耦合: 视图(View)可以独⽴于 Model 变化和修改,⼀个 ViewModel 可以绑定到不同的"View"上,当View变化的时候Model 可以不变,当Model变化的时候View也可以不变。2、可重⽤性: 你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯,让很多 view 重⽤这段视图逻辑。3、独⽴开发: 开发⼈员可以专注于业务逻辑和数据的开发(ViewModel),设计⼈员可以专注于⻚⾯设计。4、可测试: 界⾯素来是⽐较难于测试的,⽽现在测试可以针对

2022-04-25 18:46:28 255

原创 为什么vue中data必须是⼀个函数?

如果data是⼀个函数的话,这样每复⽤⼀次组件,就会返回⼀份新的data,类似于给每个组件实例创建⼀个私有的数据空 间,让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式,就使得所有组件实例共⽤了⼀份data,就会造成⼀个变了全 都会变的结果。 所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计⽆关。...

2022-04-25 18:42:11 144

原创 vue 中 data 发⽣变化,视图不更新如何解决?

在 vue2 中 vue 实例的 data 数据是响应式 的 就是数据变了 视图也会跟着变,如果给某一个 data 新添加了一个字段 这个新添加的字段因为 js 的限制不响应,需要使用 this.$set 方法代替原本的普通添加方法 就能实现响应,这个方法的三个参数 是给谁添加 添加的字段 初始值 如果不是在组件中 用这个方法 那么就用 Vue.set...

2022-04-25 18:41:21 337

原创 vue 和 jquery 的区别?

⾸先呢 jquery 他是⽤ js 封装的⼀个类库,主要是为了⽅便操作 dom 元素,⽽ vue 他是⼀个框架,并且呢,他会从真实 dom 构建出⼀个虚拟的 dom 树,通过 di!算法渲染只发⽣改变的 dom 元素,其他的相同的 dom 元素不⽤在重新渲染. ⽽使⽤ jquery 去改变 dom 元素的时候,即使有相同的 dom 元素也会重新渲染, jq 重点操作 dom,而 vue 重点操作数据。以上就是我对 vue 和 jquery 区别的理解....

2022-04-25 18:40:25 1776

原创 axios拦截器?

拦截器有两种 一个是请求拦截一个是响应拦截拦截器不需要手动调用而是每次发送 http 请求的时候都会自动触发我们一般在请求拦截中 放全局的 loading 和 token在响应拦截中关闭全局的 loading 和对 token 进行过期处理 还可以处理错误编码字典...

2022-04-25 18:39:47 71

原创 生命周期函数?

创建阶段- beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this- created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了- beforeMount 组件挂载之前- mounted 组件挂载之后 这个时候能拿到 dom 节点使用运行阶段 只要修改 data 就会触发- beforeUpdate 数据变了 视图还没变...

2022-04-25 11:05:44 49

原创 axios 的封装?

1. 先创建 utils 文件夹2. 创建 request.js3. 引入 axios4. 配置 基本路径和超时时间5. 配置请求拦截和响应拦截6. 在请求拦截里可以放 loading 和 token7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典8. 最后把我们封装的 axios 实例 导出...

2022-04-25 10:58:05 51

原创 vue中key的作⽤是什么?

避免dom元素重复渲染. 我⻔⼀般在设置key的时候⾸先尽量会设置为id,或者index下标。

2022-04-24 16:03:26 270

原创 过滤器 filter?

所谓的 vue 过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据vue 的过滤器分为两种,第⼀种是全局过滤器,通过 vue.filter 来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部,用 filters 过滤项⽬中我们通过过滤器将后台返回的状态 0 和 1 转化为⽀付或者未⽀付 还有对时间格式进行过滤.vue3 中没有过滤器了...

2022-04-24 16:01:12 341

原创 keep-alive的理解?

keep-alive 是 vue 内置的⼀个组件,⽽这个组件的作⽤就是能够缓存不活动的组件,我们能够知道,⼀般情况下,组件进⾏切换的时候,默认会进⾏销毁,如果有需求,某个组件切换后不进⾏销毁,⽽是保存之前的状态,⽐如说刚刚填好的表单数据。那么就可以利⽤ keep-alive 来实现被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated(激活) deactivated(停用)这两个钩子函数...

2022-04-24 15:59:12 247

原创 vue双向数据绑定原理?

vue.js 则是采⽤数据劫持结合发布者-订阅者 模式的⽅式, 通过 Object.defineProperty() 来劫持各个属性的 setter , getter , 在数据变动时发布消息给订阅者,触发相应的监听回调。 这个时候就可以实现数据的双向绑定。...

2022-04-24 15:58:06 486

原创 vue路由守卫?

所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数, 我们把它称之为vue路由守卫.vue⼀共给我们提供了三种路由守卫,第⼀种全局路由守卫,第⼆种是组件内路由守卫,第三种路由 独享守卫,这个是写在路由⾥⾯.全局守卫,会有beforeEach(跳转前触发的钩子函数)、beforeResolve(进⼊路由的时的钩子函数)、afterEach(进⼊路由之后的钩子函数) .这⼏个钩⼦函数⾥⾯都有⼀个回调函数,这个回调函数⾥⾯会有三个参数,分别是to,from,next,分别对应的是要进⼊的路由、

2022-04-24 15:56:04 184

原创 常用的修饰符有哪些?

.trim 去除⾸尾多余的空格.stop 阻⽌事件冒泡.once 只渲染⼀次.self 事件只作⽤在元素本身.number 将值转化为 number 类型.capter 组件之间捕获.prevent 阻⽌元素的默认⾏为.native 事件穿透,让我们可以在⾃定义组件上触发原生的事件...

2022-04-24 10:47:26 182

原创 组件通信: 父传子 子传父 兄弟通信

父传子首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type)默认值(default)以及是否必填(required)子传父首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了兄弟组件利用

2022-04-24 10:44:49 106

原创 v-for与v-if的优先级那个高?如果同时使用v-for和v-if怎么解决?

v-for的优先级高些. 因为v-for的时候我们才开始渲染dom元素,这个时候v-if还⽆法进⾏判断. v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上面。(也就是写到v-for外面)...

2022-04-22 19:22:36 154

原创 methods、computed和watch的区别?

⾸先呢,methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存性。⽽computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓存性,依赖属性值的变化⽽变化.⽽watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发. 在项⽬中,⽐如我们获取state的状态的时候我们会把它放到computed⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性.⽽watch也在项⽬经常使⽤,⽐如我们封装编.

2022-04-22 19:11:37 64

原创 说⼀下什么是mvvm模式?

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。View 的变化会⾃动更新到 ViewModel , ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动 同步是因为 ViewModel 中的属性实现了 Observer ,当属性变更时都能触发对应的操作。...

2022-04-22 19:03:54 92

原创 $nextTick方法有什么作用?

⾸先呢,$nextTick方法也叫做异步更新队列方法,而方法的主要作用就是等待元素加载完毕之后才会执行的回调函数,我们经常会在 nextTick⽅法⾥⾯获取dom元素

2022-04-22 19:01:34 1762

原创 v-if与v-show的区别?

⾸先v-if和v-show都是控制元素的显示与隐藏,不过v-if会删除对⽤的dom元素,当显示的时候,都会重新创建dom和渲染.⽽v-show则是通过css的display:none和display:block来控制元素的显示与隐藏.v-if⽐较消耗性能,当遇到频繁的显示隐藏操作我们建议使⽤v-show,如果不是频繁操作的话,我们可以用v-if在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判断历史记录的显示与隐藏,...

2022-04-22 18:54:58 149

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除