vue学习笔记
不另外加糖
小蜗牛也能登顶!
展开
-
报错Failed to resolve component: column-list
在一个组件中引用了另一个组件,结果被引用的组件不能正常显示,还报错Failed to resolve component: column-list If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at ...原创 2022-07-04 15:44:27 · 1335 阅读 · 0 评论 -
vue3中如何关闭eslint
初始创建vue项目时,开启了eslint,没想到编码不规范造成了编译不成功,又想关掉。看了很多资料都是vue2的,在vue3中应该打开eslintrc.js修改配置,如下:将里面的'plugin:vue/vue3-essential',注释掉,就可。...原创 2022-03-20 18:44:24 · 6791 阅读 · 2 评论 -
原生js、jQuery和vue的区别
原生js、jQuery:jQuery只是对原生js的API进行了封装,操作更加方便,但是数据和视图层没有分开,本质上还是要操作DOM实现逻辑。 vue:不仅对js的API实现了封装,还实现了其他功能,使数据和视图层分开,通过数据驱动,操作的是数据,而不是DOM,能让开发者更加关注到数据上。...原创 2021-08-16 10:20:22 · 1366 阅读 · 0 评论 -
解决vue项目路径不正确,自动跳转404
第一种方法:使用vuerouter钩子函数beforeEach,每次进行路由跳转时都进行判断,若页面不存在就跳转到404页面。import Error from ' 'const router = new Router({ routes:[ name: 'error', path: '/error', component: Error ]}//beforeEach每次进行路由跳转时都会执行router.beforeEach..原创 2021-08-14 21:54:31 · 12113 阅读 · 3 评论 -
vue的单向数据流
单项数据流指的是父子组件通过props通信,父组件传数据给子组件,子组件不能直接对传递过来的数据进行修改,否则vue会有警告;主要是为了防止多个子组件都修改父组件的数据,造成错误不方便追踪。 那有什么方法可以让子组件对传递过来的父组件进行修改然后自己使用呢? 子组件在data中定义专门的数据,把props属性值作为它的初始值,然后在方法或计算属性中更改它的值父组件内:子组件内: 1、在子组件中利用方法改变父组件传递过来的值 2、在子组件中利用方法改变...原创 2021-07-30 11:02:17 · 501 阅读 · 0 评论 -
vue组件中的data必须是一个函数
在vue中,使用组件要先创建组件构造器,然后注册组件,相当于添加了一个组件构造器的引用,之后使用相当于实例化组件。 我们希望尽可能多的复用组件,就希望每个组件都有自己的data,但是由于每个复用的组件都是组件构造器的实例,它们会共享组件构造器的数据(个人理解),这时如果我们把data改为函数,利用函数形成自己的作用域,每个组件的data就不会相互影响了。 JS的原型链 两个对象都是某一构造函数的实例,那么它们能同时访问到构造函数显式原型上的数据var MyComponent...原创 2021-07-07 10:08:10 · 176 阅读 · 0 评论 -
js中的类数组对象
首先先介绍一下数组和对象是啥一、数组 数组是一个有序的数据集合,其索引值从0开始依次递增,有length属性,用于获取数组的元素个数,内部的值可以是任何js数据类型二、对象 对象是一个无序的内部由若干键值对组成的数据集合,它没有length属性,但是我们可以通过把它内部的键改为从0开始依次递增的值来模拟数组,这样就成了类数组对象三、类数组对象3.1 什么是类数组对象 类数组对象首先它是一个对象,但是有数组的某些特点。怎么构造类数组对象呢?先把对象中的键都改为从0开始...原创 2021-06-27 11:23:12 · 1071 阅读 · 0 评论 -
vuerouter的几个钩子函数
主要介绍一下vuerouter的几种钩子函数:一、全局钩子(2个)每次跳转路由时都会执行这个钩子函数,由router调用1、beforeEach(to,from,next) 进入之前执行,有三个参数router.beforeEach((to, from, next) => { if (to.matched.length === 0) { from.name ? next({ name : from.name }) : next('/') } else { ..原创 2021-06-26 22:09:16 · 8162 阅读 · 1 评论 -
vuex原理
目录一、 为啥会出现vuex二 、什么是vuex三、 怎么使用vuex四、vue和vuex比较五、vuex的五个属性5.1 state5.2 mutations5.3 getters一、 为啥会出现vuex 若是vue内需要传递数据的组件不是父子组件关系或者两组件之间隔了很多其他组件,这时再通过上面的几种方式传递数据就会十分困难。于是有了vuex,我们可以把要共享的数据都存放到vuex中的state属性里,通过this.$store.state就能拿到里面的数据了!.原创 2021-06-26 21:23:17 · 2298 阅读 · 1 评论 -
组件之间的传递数据的方式
1、父子间通信:父传子 子组件内定义props属性,父组件通过v-bind(:)向子组件传递数据2、父子间通信:父传子 当子组件内部没有定义props属性时,可以在父组件上用v-bind传递数据,子组件通过this.$attrs获取,获取过来是一个对象,里面包含所有父组件传递过来的数据3、父子间通信:子传父 子组件内this.$emit(事件名,传递参数) 父组件v-on(@)监听子组件发射的事件4、任意组件间的通信 在vue的原型上定义一个$bus,再创建一个vu...原创 2021-06-26 17:29:01 · 1859 阅读 · 0 评论 -
vue中key的作用
key主要是用在v-for循环中,如果不使用的话vue会报错,加了key会使性能大大提高一、在列表渲染时使用key属性官方文档:当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。简单地说就是使用了key属性元素就会记住它们的位置,当更新时vue会复用它们。小栗子: num是data中定义的一..原创 2021-06-26 16:55:21 · 465 阅读 · 0 评论 -
神秘的diff算法
说到diff算法,就得先说虚拟DOM,让我们先来认识一下虚拟DOM一、啥是虚拟DOM 虚拟DOM指的是根据真实DOM树结构,用javascript对象形式表示的DOM树结构。真实DOM<div> <p>123</p></div>var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ]};二、为啥会有...原创 2021-06-26 15:53:50 · 298 阅读 · 0 评论 -
难懂的MVC和MVVM
MVC和MVVM都是一种架构模式,那么为什么会出现它们以及它们的区别是什么呢?把我大致了解的记录一下。一、为啥出现这些架构模式 起初科学家在设计GUI(图形用户界面时),它的设计模式就是视图(view)、模型(model)和逻辑(应用逻辑,业务逻辑,同步逻辑),用户在键盘鼠标上的操作属于应用逻辑,应用逻辑会触发业务逻辑,然后引起model的变化,model变化后会同步逻辑,再引起视图的变化。 可以看出view和model天生就是分离,剩下的就是该如何处理这些逻辑了,所以出现了这些架构模式...原创 2021-06-26 10:35:26 · 120 阅读 · 0 评论 -
vue-router的使用
为了实现单页面富应用(SPA),即页面只在第一次加载时向后端一次性请求到所有的CSS,JS,HTML文件,后续页面如果发生改变不会再向后端申请,会使用vue-router配置,实现页面的更新。一、route,routes,router vue-router主要包括route,routes,router,他们的区别就是route表示单个路由对象,里面有path和component属性,routes是一个数组,里面存放很多route,而router是管理路由的,比如有点击事件发生,就得跳转...原创 2021-06-22 20:23:37 · 697 阅读 · 0 评论 -
vue性能优化之数组扁平化
扁平化就是去除过多繁重的修饰,把数据本身突出来,说到扁平化就想到数组的扁平化。数组扁平化是指将多维数组转化为一维。 那么怎么实现数组扁平化呢?主要记录一下自己看的两种方式 第一种:var arr = [1,2,[3,[4,5]]]function isArray(obj){ if(Object.prototype.toString.call(obj) === [Object Array] return true }else{ ret...原创 2021-06-22 11:31:24 · 1262 阅读 · 0 评论 -
vue性能优化之Object.freeze()
Object.freeze(obj)可以冻结一个对象,该对象的属性不能再被修改增添,响应系统无法追踪它的变化 当有一个数组或者对象,里面的内容一定不发生改变,那么就可以在data、vuex里冻结它,这样性能可以大大提高<p v-for="item in list">{{ item.value }}</p>new Vue({ data: { // vue不会对list里的object做getter、setter绑定 lis...原创 2021-06-22 09:55:08 · 587 阅读 · 0 评论 -
vue性能优化之v-if和v-show的区别
v-if用法:v-if = '表达式'根据表达式的真假决定元素的显示状态,ture:在DOM中显示,false: 在DOM中删除原理:根据通过操作DOM元素来决定显示隐藏v-show用法:v-show = '表达式'根据表达式的真假决定元素的显示状态,ture: 显示,false: display:none隐藏原理:修改元素的CSS属性来决定是显示还是隐藏区别:v-show是一直渲染到HTML,只是通过操作元素的CSS属性(display)来决定元素的显示与隐藏...原创 2021-06-21 22:18:57 · 301 阅读 · 2 评论 -
vue的生命周期函数
大概看了下生命周期函数,记录一下说起生命周期函数离不开这张图原创 2021-06-21 21:35:34 · 374 阅读 · 0 评论 -
重要的vue响应式原理(数据双向绑定)
vue响应式的实现主要是通过数据拦截(拦截数据的set和get)以及发布者订阅者模式。主要有observer,dep,watcher这几个模块。 observer主要是进行原创 2021-06-20 21:26:33 · 557 阅读 · 0 评论