Vue
爱编程的梨清
向往成为前端大佬
展开
-
解决 Cannot read properties of undefined类型的报错
vue报错 “TypeError: Cannot read properties of undefined (reading...)原创 2022-10-21 09:00:50 · 193198 阅读 · 1 评论 -
Vuex是干嘛的?每个属性有什么用?
1. Vue的概念Vuex是集中管理项目的公共数据的2. vuex的属性:state:保存数据状态的仓库getters:对state数据进行计算,类似于计算属性(依赖数据发生变化才会重新计算)action:发异步请求获取数据,提交mutation(类似于mutation,不同的是,action用于提交mutation,而不是直接变更状态)1. 写在action获取的数据适用于全局公用的2. 写在页面的mounted是用于当前页面的mutation:唯一可以改变state状态的方法,不原创 2022-05-19 17:00:55 · 1835 阅读 · 0 评论 -
Vue的性能优化
Vue的性能优化编码阶段尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件在更多的情况下,使用v-if替代v-showkey保证唯一使用路由懒加载、异步组件使用防抖、节流第三方模块按需导入长列表滚动到可视区域动态加载图片懒加载SEO优化预渲染服务端渲染SSR打包优化压缩代码使原创 2022-04-18 21:02:54 · 200 阅读 · 0 评论 -
Vue父组件和子组件声明周期函数执行顺序
vue的父组件和子组件生命周期钩子函数执行顺序如下可归为四部分:加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新父beforeUpdate->父up原创 2022-04-12 21:08:55 · 190 阅读 · 0 评论 -
Vue路由传参
1. router-link传参父组件:使用<router-link to="/跳转的路径/传递的参数"></router-link>例如:<router-link to="/a/123"></router-link>子组件接收:this.$route.params.num来接收传递过来的参数mounted(){this.num=this.$route.params.num}路由配置:{path:‘/a/num’,name:A,componen原创 2022-04-12 21:06:46 · 108 阅读 · 0 评论 -
Vue的生命周期钩子函数
Vue的生命周期钩子函数一、Vue的生命周期共分为四个阶段1.创建实例2.DOM渲染3.数据更新4.销毁实例二、共有八个基本钩子函数1.beforeCreate —创建前触发的行为:Vue实例的挂载元素$el和对象data都为undefined,还未初始化此阶段可以做的事情:加loading事件2.created —创建后触发的行为:Vue实例的data已经有数据了,但是$el还没有此阶段可以做的事情:解决loading,发请求拿数据为mounted渲染做准备3.be原创 2022-04-09 20:49:54 · 2990 阅读 · 0 评论 -
Vue的响应式原理
Vue的响应式原理vue2.x的响应式原理是Object.defineProperty代码简单实现:基本原理 <script> const data={} let name='Vue' // 拦截对data对象的name属性的访问 Object.defineProperty(data,'name',{ //拦截属性的访问 访问属性的时候 会执行get get: function(){ console.log('get')原创 2022-04-08 19:00:46 · 377 阅读 · 0 评论