Vue2
小彭努力中
不积跬步,无以至千里
展开
-
Vuex 的原理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。Vuex为Vue Components建立起了一个完整的生态圈,包括开发中的API调用一环。原创 2024-04-19 09:37:06 · 462 阅读 · 0 评论 -
对前端路由的理解
前端路由可以帮助我们在仅有一个页面的情况下,“记住”用户当前走到了哪一步——为 SPA 中的各个视图匹配一个唯一标识。SPA极大地提升了用户体验,它允许页面在不刷新的情况下更新页面内容,使内容的切换更加流畅。在前端技术早期,一个 url 对应一个页面,如果要从 A 页面切换到 B 页面,那么必然伴随着页面的刷新。这个体验并不好,不过在最初也是无奈之举——用户只有在刷新页面的情况下,才可以重新去请求数据。后来,改变发生了——Ajax 出现了,它允许人们在不刷新页面的情况下发起请求;在这样的背景下,出现了。原创 2024-04-18 09:42:56 · 395 阅读 · 0 评论 -
vue中params和query的区别
query更加类似于ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示。:query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是。原创 2024-04-17 09:13:31 · 384 阅读 · 0 评论 -
Vue-router跳转和location.href有什么区别
【代码】Vue-router跳转和location.href有什么区别。原创 2024-04-16 10:17:04 · 462 阅读 · 1 评论 -
Vue-router 路由钩子在生命周期的体现
有的时候,需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。为此有很多种方法可以植入路由的导航过程:全局的,单个路由独享的,或者组件级的。路由导航、keep-alive、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件∶。如果不想全局配置守卫的话,可以为某些路由单独配置守卫,有三个参数∶ to、from、next。这三个钩子都有三个参数∶to、from、next。原创 2024-04-15 09:43:04 · 856 阅读 · 0 评论 -
vue如何定义动态路由?如何获取传过来的动态参数?
通过$route.query 获取传递的值。原创 2024-04-12 10:40:00 · 414 阅读 · 0 评论 -
$route 和$router 的区别
$route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数 $router 是“路由实例”对象包括了路由的跳转方法,钩子函数等。原创 2024-04-11 16:20:18 · 92 阅读 · 0 评论 -
Vue中如何获取页面的hash变化
window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。// 监听,当路由发生变化的时候执行。原创 2024-04-10 15:29:05 · 424 阅读 · 0 评论 -
路由的hash和history模式的区别
Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。简介: hash模式是开发中默认的模式,它的URL带着一个#,例如:http://www.abc.com/#/vue,它的hash值就是。特点:hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端完全没有影响。所以改变hash值,不会重新加载页面。这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。原理: hash模式的主要原创 2024-04-03 13:48:28 · 834 阅读 · 0 评论 -
Vue-Router 的懒加载如何实现
(3)方案三:使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。(1)方案一(常用):使用箭头函数+import动态加载。(2)方案二:使用箭头函数+require动态加载。原创 2024-04-03 13:46:51 · 481 阅读 · 0 评论 -
Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?
点击 button 会发现,obj.b 已经成功添加,但是视图并未刷新。这是因为在Vue实例创建时,obj.b并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局 api。$set()方法相当于手动的去把obj.b处理成一个响应式的属性,此时视图也会跟着改变了。原创 2024-03-22 15:58:22 · 559 阅读 · 0 评论 -
vue中v-if和v-show的区别
手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐; 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换; 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留; 性能消耗:v-if有更高的切换消耗;v-sh原创 2024-03-22 15:55:54 · 374 阅读 · 0 评论 -
Vue2中使用 Object.defineProperty() 来进行数据劫持有什么缺点?
在对一些属性进行操作时,使用这种方法无法拦截,比如通过下标方式修改数组数据或者给对象新增属性,这都不能触发组件的重新渲染,因为 Object.defineProperty 不能拦截到这些操作。更精确的来说,对于数组而言,大部分操作都是拦截不到的,只是 Vue 内部通过重写函数的方式解决了这个问题。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变,唯一的缺点是兼容性的问题,因为 Proxy 是 ES6 的语法。原创 2024-03-21 09:08:09 · 533 阅读 · 0 评论 -
Vue中slot是什么?有什么作用?原理是什么?
slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽。中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在。,xxx 为插槽名,当组件执行渲染函数时候,遇到slot标签,使用。原创 2024-03-21 09:07:06 · 376 阅读 · 0 评论 -
Vue2中Computed 和 Watch 的区别
当想要执行异步或者昂贵的操作以响应不断的变化时,就需要使用watch。原创 2024-03-20 09:18:16 · 450 阅读 · 0 评论 -
浅谈MVVM、MVC、MVP的区别
MVC 中的Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,MVP 模式中,View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。页面的渲染、数据的获取,对用户事件的响应所有的应用逻辑都混合在一起,这样在开发简单项目时,可能看不出什么问题,如果项目变得复杂,那么整个文件就会变得冗长、混乱,这样对项目开发和后期的项目维护是非常不利的。原创 2024-03-20 09:12:35 · 825 阅读 · 0 评论 -
Vue2中data为什么是一个函数而不是对象
所以组件的数据不能写成对象的形式,而是要写成函数的形式。数据以函数返回值的形式定义,这样当每次复用组件的时候,就会返回一个新的data,也就是说每个组件都有自己的。JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。而在Vue中,更多的是想要复用组件,那就需要每个组件都有自己的数据,这样组件之间才不会相互干扰。,它们各自维护自己的数据,不会干扰其他组件的正常运行。原创 2024-03-19 10:35:30 · 419 阅读 · 0 评论 -
浅谈MVVM的优缺点
优点:缺点:原创 2024-03-19 10:30:15 · 479 阅读 · 0 评论 -
Vue2的生命周期
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行。钩子函数,命中缓存渲染后会执行。独有的生命周期,分别为。原创 2024-03-18 09:08:21 · 461 阅读 · 0 评论 -
Vue2组件通信的方式
(1)父子组件间通信子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件,子组件通过$parent获得父组件,这样也可以实现通信。使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据。原创 2024-03-15 14:15:45 · 1528 阅读 · 0 评论