vue知识点总结

Posted qydy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue知识点总结相关的知识,希望对你有一定的参考价值。

 

vue响应式数据的原理-vue最大的特点就是数据驱动视图,vue的数据改变,页面一定发生改变吗?这也不一定。当操作引用类型的数据,动态添加属性时,页面不会发生改变。vue响应式的原理:底层是Object.defineProperty(),目前vue2.6和将来的vue3.0都是通过给data中的数据加一个数据劫持,就是setter和getter方法,但是不管是哪种版本,ie浏览器都有兼容性问题,vue2.6不兼容ie8及以下,vue3.0不兼容ie11。被Object.defineProperty()处理过的数据,数据就会添加上get和set方法,数据获取的时候触发get,数据修改的时候触发set。在修改数据的时候,优先触发set,触发watch监听,再通知界面。vue中如果动态添加属性,该属性就没有经历过处理,就没有set和get方法,所以数据变页面不变。vm.$set()可以添加响应式属性,会触发视图的更新。

vue开发过程中踩过的坑:
swiper不轮播
swiper循环轮播loop:true失效---加v-if
portfinder1.0.22版本端口号失效
e对象不写()就是默认传e,如果写了()而没有传$event的话就拿不到e
路由变化而页面没有改变,使用watch监听或者beforeRouterUpdate()


vue和react的区别
数据:vue具有双向数据绑定和单向数据流。双向数据绑定:DOM元素绑定的data值,当发生改变后,vue的响应机制会自动监听data的变化重新渲染。单向数据流:当父组件给子组件传递数据的时候,子组件只可以读取而不能修改数据,可以用watch监听数据的更改,再赋给父组件的变量。react是单项数据流,DOM元素依赖于state,但改变state不会改变渲染好的DOM,通过setState()才能重新渲染。父组件传值到子组件,如果顶级的props变了,会重新渲染所有的子组件。
虚拟DOM:vue计算出DOM的差异,在渲染的过程中跟踪每个组件的依赖关系,不会重新渲染整个组件树。而react当应用的状态发生改变时,重新渲染全部子组件,可以通过shouldComponentUpdate生命周期进行优化。
模板和jsx:vue具有单文件组件,可以把html、css、js写在一个vue文件里---MVVM框架。react依赖于jsx,在javascript中创建DOM---视图层框架。
构建工具:vue-vue-cli。react-create-react-app 项目名
团队支持:vue是尤雨溪个人目前和阿里合作,react是Facebook维护。

vue指令-指令的生命周期:bind()--inserted()--update()--componentUpdate()--unbind()
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot---命名插槽
v-pre---不需要表达式,跳过大量没有指令的节点,会加快编译
v-cloak---配合[v-cloak] { display: none },不显示{{}},如果没有彻底解决,则在根元素上加上style="display:none;" :style="{display:block}"
v-once---值渲染元素和组件一次,元素和组件及其所有子节点都将被视为静态内容并跳过,可以用于优化性能

vue全局API
Vue.extend()---将ui组件转换为js组件
Vue.nextTick()---数据更新后最新的DOM
Vue.set()---向响应式对象中添加一个响应式属性
Vue.delete()---删除对象的属性,如果对象是响应式的,确保删除能触发更新
Vue.directive(指令名,指令的配置项)---自定义指令
Vue.filter("名字",()=>{})---过滤器,管道符进行使用
Vue.component()---注册全局组件
Vue.use()---安装vue.js插件,如果插件是一个对象,必须提供install方法,如果插件是一个函数,那么它会被视为install方法
Vue.mixin()---混入,给当前组件额外扩展一些属性和方法,它的配置项和new Vue()的配置项一样
Vue.version()---判断当前vue版本var version=Number(Vue.version.split(".")[0])

vue修饰符
.lazy----<input type="text" v-model.lazy="value">----在光标离开后input框才会更新数据
.trim----<input type="text" v-model.trim="value">----输入框过滤首尾的空格
.number----<input type="text" v-model.number="value">----加了number修饰符后,如果先输入的是数字,表示这个输入框只能输入数字,如果先输入了字符串,等于这个输入框没有加number修饰符,所以这个修饰符就是个垃圾,还是得用正则判断

事件修饰符:
.stop----<button @click.stop="test"></button>----阻止事件冒泡
.prevent----<a @click.prevent="test"></a>----组件浏览器默认事件
.self----<div @click.self="test"></div>----只有点击到元素本身才会触发----bug:@click.self阻止了自身的点击,必须要点击到padding区域才行
.once----<div @click.once="test"></div>----只有第一次点击有效
.capture----<div @click.capture="test(1)"> <button @click="test(2)">test</button></div>----先1后2----事件机制是捕获-目标-冒泡,capture是倒过来
.passive----<div v-on:scroll.passive="onScroll">...</div>----滚动事件会立即触发,每次滚动都有一个默认事件触发,加了passive就是告诉浏览器,不需要查询,不需要触发这个默认事件
.native----<My-component @click.native="test"></My-component>----给组件绑定原生事件,给vue组件绑定事件的时候,必须加上 .native ,否则会认为监听的是来自子组件自定义的事件,等同于在子组件内部处理click事件后向外发送click事件($emit())
.left .right .middle----<button @click.right="test">test</button>----鼠标点击的时候触发

按键修饰符:.enter .esc .left .right .up .dowm .tab .delete .scape----<input type="text" @keyup.enter="test">
.keyCode----<input type="text" @keyCode(13)="test">

 

vue组件传值
1、父传子-props
2、子传父-$emit()
3、非父子:①给vue原型上添加一个公共的vue实例对象,使用$on()和$emit()进行接收和传递。②手动封装事件订阅observer。③事件总线EventBus。④vuex⑤如果是亲兄弟传值可以用父元素做周转。⑥provide/inject(提供/注入)跨组件传值,父传子孙。⑦插槽作用域(子传父)

vue路由传值-动态路由传值,加上props:true就可以用路由解耦、query、params。动态路由传值的时候,值是必须要传递的,要不然路由打不开,query传值的时候值不是必须要传递的。

vue路由的配置项-routes-path、component、redirect、children、meta、props、name、immediate:true

路由守卫-路由的生命周期-路由导航钩子-全局前置守卫beforeEach()、局部守卫beforeRouterEnter()、beforeRouterUpdate()、beforeRouterLeave()、路由独享守卫beforeEnter()直接在路由表中定义

路由懒加载-vue异步组件require()、ES6的import、webpack提供的require.ensure()---使用异步组件会将每个组件都生成一个js文件,import指定相同的webpackChunkName会合并打包成一个js文件,require.ensure()多个路由指定相同的chunkName,会合并打包成一个js文件。


vue过渡动画-transition-enter、enter-active、enter-to、leave、leave-active、leave-to,还可以搭配animate.css使用

computed和watch

$route和$router和routes的区别-$route是当前路由跳转对象,可以获取当前路由的name、path、query、params、hash、fullpath等。$router是路由的实例对象,编程式导航的跳转。routes是路由表,是一个数组,里面写路由的配置项。

 

less和sass的区别-less基于js,sass基于ruby,sass的环境较复杂,功能更多,less支持css语句,入手更简单,sass定义变量用$,less定义变量用@

vue UI框架:
vue-awesome-swiper-和swiper插件一样,用户操作之后停止轮播的bug,autoplay设置为一个对象,有个参数disableOnInteraction值默认为true,将它设置为false。循环轮播失效是因为循环还没有结束的时候swiper组件运行冲突出错导致的,可以添加v-if属性进行判断
mintUI-需要新建 .babelrc文件
vant-babel.config.js文件中添加plugins配置项
cubeUI-cmd安装,不需要在main.js中引入可以直接使用
elementUI-需要安装按需引入插件:babel-plugin-component,配置babel.config.js文件中的plugins配置项
iview

 

vue-lazyload图片懒加载-npm i vue-lazyload,v-lazy替换 :src

封装loading JS组件-先将html和css写好,再用Vue.extend()继承UI组件,实例化这个JS组件,返回一个对象,对象中有show()和hide(),使用的时候直接用对象.show()或对象.hide()

better-scroll二次封装、scrollTo()、上拉下拉-pullingUp和pullingDown事件,pullUpload和pullDownRefresh设置为true,finishPullUp()和finishPullDown()方法告诉better-scroll可以进行下一次的上拉和下拉,refresh()方法使DOM渲染正确。父组件访问子组件中的方法:this.$refs.BScroll.scrollTo()

搜索组件的封装-watch监听将每次输入框里的变化都拿来当做参数进行数据请求

input节流-在utils中封装成throttle(),传入一个回调,设置默认300ms调用一次,使用的时候用throttle()直接将原来请求的代码包裹,可以根据需求传入节流时间

vant框架tab切换动画

localStorage二次封装

vuex-只要用了vuex,input标签中就不能使用v-model,因为v-model的原理是直接修改数据,而vuex中要求修改数据在mutations中。如果不涉及到异步,可以在组件中直接触发commit()。input事件是每次输入框变化时都会执行,change事件是在输入框操作完后,按下回车键才会执行。事件函数如果不写(),就是不传参数,此时方法中可以直接接收到e对象,如果写了(),而没有手动传递$event,此时方法中就拿不到e对象。在组件中使用state中的值时,如果是标签中使用可以直接获取到$store,可以省略this,但是在js代码中使用$store不可以省略this。辅助函数:mapState、mapGetters、mapActions、mapMutations---前两个映射到computed中,后两个映射到methods中。modules配置项是多个合作开发的时候建立一个个小型的vuex,在使用的时候,如果是属性需要在前面加上模块名.,如果是方法需要在前面加模块名/。

vuex修改数据的流程-组件中用dispatch()去触发actions中的方法,actions中的方法({commit},params)通过解构commit后用commit()触发mutations中的方法(state,params),mutations中的方法去修改state中的数据,数据是响应式的,数据变页面变


json-server-先安装(npm i json-server),再使用(json-server goods.json)

mock数据-mock.mock(//users/list/,"get",(options)=>{return data})
----id---------"id|+1":0
----name-----"name":"@cname"
----tel---------"tel":/^1(3|5|7|8|9)d{9}$/
----imgUrl----"imgUrl":"@image(‘600x400‘,‘#000‘,‘#fff‘,‘png‘,‘孙艺珍‘)"
----address---"address":"@county(true)"
----date-------"date":"@datatime(‘yyyy-MM-dd A HH:mm:ss‘)"
----desc-------"desc":"@cparagraph(1,5)"
----list---------"list|5":[{},{},{}]

以上是关于vue知识点总结的主要内容,如果未能解决你的问题,请参考以下文章

vue知识点总结

vue总结的知识点

Vue知识总结

总结vue 需要掌握的知识点

Vue知识点总结

前端知识点总结——Vue