vue
文章平均质量分 59
Tone@
但行好事 莫问前程
展开
-
Vue最全性能优化方法
尽量减少 data 中的数据,data 中的数据都会增加 getter 和 setter,会收集对应的 watcherv-if 和 v-for 不能连用, v-for的优先级比v-if高,一起使用会造成性能浪费如果需要使用 v-for 给每项元素绑定事件时使用事件代理SPA 页面采用 keep-alive 缓存组件在更多的情况下,使用 v-if 替代 v-showkey 保证唯一使用路由懒加载、异步组件防抖、节流第三方模块按需导入长列表滚动到可视区域动态原创 2023-02-21 21:59:25 · 835 阅读 · 0 评论 -
探索 v-model 原理
v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况,它都是一个语法糖,最终会生成一个属性和一个事件当其作用于表单元素时,vue会根据作用的表单元素类型而生成合适的属性和事件。例如,作用于普通文本框的时候,它会生成value属性和input事件;而当其作用于单选框或多选框时,它会生成checked属性和change事件。v-model也可作用于自定义组件,当其作用于自定义组件时,默认情况下,它会生成一个value属性和input事件。<Comp v-model原创 2023-02-20 17:25:49 · 428 阅读 · 0 评论 -
虚拟 DOM 详解
虚拟 dom 本质上就是一个普通的 JS 对象,用于描述视图的界面结构 在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟 dom 树,这也就意味着每个组件都对应一棵虚拟 DOM 树原创 2023-02-20 17:12:37 · 3250 阅读 · 1 评论 -
Vue axios详解 实例
axios用来链接ajax,去链接后台,可以在浏览器中发送XMLHttpRequests,支持在node中发送Http请求,支持promise,可以拦截请求和响应,可以转换请求和响应的数据,能够取消请求,自动转化json数据,可以防止XSRF网络攻击,可以设置多个回调函数。属性和方法 axios.get(路径,参数) 查询请求,放在请求头 axios.post(路径,参数) (增删改)处理数据,上传文件 放在请求体 axios.delete(路径,参数)原创 2022-09-04 01:04:47 · 359 阅读 · 0 评论 -
Vuex状态管理模式
Actions和Mutations比较类似,包含的都是一些方法,不同的是Actions不能直接更改数据,它的作用是提交Mutations,Mutations里面包含的才是具体操作数据的方法。(仓库)中去,这样各个组件需要数据的时候直接去仓库里面拿就好了,不用组件之间复杂的传值了,而且需要改变数据的时候,只需要将仓库里面的数据更改即可,各个组件里面引用的地方会自动更新。vuex是vue的前端数据库,用来存储变量,定义的是全局变量,保证数据的一致性,存数据的地方,所有的数据都要存在state里面。原创 2022-09-04 01:00:12 · 436 阅读 · 0 评论 -
Vue路由守卫 通俗易懂
beforeRouterEnter(to,from,next)在激活的组件里调用,进入组件之前。没创建在created之前。beforeRouterLeave(to,from,next)在失去的组件里调用,离开组件之前,此时进入了组件,但是没离开。beforeRouterUpdate(to,from,next)在组件被改变的时候调用,路由更新但是内容不会改变。定义子router.js中,只限制可跳转路径的组件。from用来获取将要离开的路径。to用来获取将要进入的路径。在某个组件内容使用,限制子组件。原创 2022-09-04 00:57:05 · 423 阅读 · 0 评论 -
Vue路由最全详解 创建路由
1.hash模式:路径里会带#,会显示锚点,支持所有浏览器,只能改变#后面的路由名称进行跳转。2.history模式:路径和正常网络路径一样,会存储路径的历史记录,每次刷新页面,就会重新请求后台服务器,会执行多次,会耗时间。3.abstract模式:适用于所有的js环境,可以在node环境里使用,可以在node环境下执行代码跳转。createWebHashHistory -> hash模式createWebHistory -> history模式。原创 2022-09-04 00:52:03 · 2499 阅读 · 0 评论 -
Vue子父、父子、兄弟组件传值方法汇总!
父组件传值子组件需要使用props 在子组件里定义一个props,即props:[‘msg’],msg可以是对象也可以是基本数据类型。这里需要使用自定义事件,在子组件中使用this.$emit(‘myEvent’) 触发,然后在父组件中使用@myEvent监听。需要注意的是这种传值是单向的,你无法改变父组件的值(当然引用类型例外);4)使用ref传值,通过ref的能力,给子组件定义一个ID,父组件通过这个ID可以直接访问子组件里面的方法和属性。子组件传值父组件需要使用setup()原创 2022-09-04 00:43:13 · 701 阅读 · 0 评论 -
Vue环境配置 搭建脚手架
node相当于前端的服务器,用来编译js,vue和react框架都一个在node环境下进行安装和执行,为了让js的下扩展语法,列如es6和typescript进行兼容,则用node编译。package-lock.json 记录第三方模块的详细信息,例如:名称,版本,下载地址...模块打包机 ,我们可以把服务器下项目打包成浏览器下执行的项目,也可以打包成手机的app安装包。vue的脚手架cli:帮助你快速搭建项目,给项目内容进行分包分层,进行环境配置。npm install 模块名 -g全局安装模块。....原创 2022-08-14 18:34:28 · 483 阅读 · 0 评论 -
Vue生命周期函数
beforecreate:创建前 vue刚被创建时调用,此时所有变量和函数都未初始化完毕,在此函数下可以新增一些内容,跟着声明周期渲染。created:创建后,变量和函数初始化完毕,没有向页面渲染,此处可以执行ajax,让获取的变量跟着渲染。beforeMount:挂载前,此时el可以寻找到挂载点,开始渲染页面,此处也可以执行ajax。生命周期函数过程分为:创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后。父组件创建-父组件挂载-子组件创建-子组件挂载-子组件渲染-父组件渲染。......原创 2022-08-14 18:30:05 · 609 阅读 · 0 评论 -
Vue 监听函数和计算函数
Vue 监听函数和计算函数。原创 2022-08-14 18:24:07 · 540 阅读 · 0 评论