原文地址:https://mp.weixin.qq.com/s/rqoZ5KWqT_1QAx91bJMeIg
优点:
缺点:
Vue的全家桶,你可以选择不用,或者只选几样去用,比如不用vuex
MVC
MVVM
防止组件被多个页面使用时,造成的变量互相污染
.lazy
:输入框失焦时才会更新v-model的值.trim
:讲v-model绑定的值首位空格给去掉.number
:将v-medol绑定的值转数字.stop
:阻止事件冒泡.capture
:事件的捕获.self
:点击事件绑定本身才触发.once
:事件只触发一次.prevent
:阻止默认事件.native
:绑定事件在自定义组件上时,确保能执行.left、.middle、.right
:鼠标左中右键的触发passive
:相当于给移动端滚动事件加一个.lazy
camel
:确保变量名会被识别成驼峰命名.sync
:简化子修改父值的步骤全局路由守卫
组件内路由守卫
独享路由守卫
v-text
:元素的textContentv-html
:元素的innerHTMLv-show
:通过样式display改变显隐v-if
:通过操作DOM改变显隐v-else
:配合v-ifv-for
:循环渲染v-on
:绑定事件,缩写@v-bind
:绑定变量,缩写:v-model
:双向绑定v-slot
:插槽v-once
:只渲染一次v-pre
:跳过元素编译v-cloak
:隐藏双括号,有值再显示props
接收$emit
对父组件进行传值$parent
和$chidren
获取实例进而通信vuex
进行状态管理eventBus
进行跨组件值传递provide
和inject
,官方不建议使用$ref
获取实例,进而传值
v-if
:通过操作DOM来控制显隐,适用于偶尔显隐的情况v-show
:通过改变样式display属性控制显隐,适用于频繁显隐的情况computed
:依赖多个变量计算出一个变量,且具有缓存机制,依赖值不变的情况下,会复用计算值。computed
中不能进行异步操作watch
:通常监听一个变量的变化,而去做一些事,可异步操作computed
的多对一,watch
一对多beforeCreate
:实例Vue之前,未初始化和响应式数据created
:已初始化和响应式数据,可访问数据beforeMount
:render调用,虚拟DOM生成,未转真实DOMmounted
:真实DOM挂载完成beforeUpdate
:数据更新,新虚拟DOM生成updated
:新旧虚拟DOM进行对比,打补丁,然后进行真实DOM更新beforeDestroy
:实例销毁前,仍可访问数据destroy
:实例销毁,子实例销毁,指令解绑,解绑本实例的事件activated
:keep-alive所缓存组件激活时调用deactivated
:keep-alive所缓存组件停用时调用errorCaptured
:子孙组件的错误捕获,此函数可返回false阻止继续向上传播v-for
优先级高于v-if
,每项都通过v-for
渲染出来后再去通过v-if
判断显隐,做了很多无用功
state
:定义初始状态getter
:从store从取数据mutation
:更改store中状态,只能同步操作action
:用于提交mutation,而不直接更改状态,可异步操作module
:store的模块拆分父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
原因:Object.defineProperty没有对对象的新属性进行劫持
解决:
splice:arr.splice(index, 1, value)
Vue.set(target, index, value)
新增属性:Vue.set(target, key, value)
删除属性:Vue.delete(target, key)
splice:arr.splice(index, 1, value)
Vue.set(target, index, value)
这里只说Vue2的
bind
:指令绑定到指定元素时调用,只调用一次inserted
:指定元素插入父节点时调用update
:所在组件的 VNode 更新时调用componnetUpdated
:所在组件以及其子组件 VNode 全部更新后调用unbind
:只调用一次,指令与元素解绑时调用修改数据时不能马上得到最新的DOM信息,所以需要使用nextTick,在nectTick回调中可以获取最新DOM信息
优先是Promise.then
方法,是个微任务,这样可以避免多一次队列,进而少一次UI渲染,节省性能
SSR全称Server Side Render
Object.defineProperty
对对象进行递归劫持属性的get、set
watcher
进行观察数据使用的地方dep
收集watcher
,数据更改时,通过notify
方法通知dep
里的watcher
去进行相应的更新数组的元素大概率是成百上千的,所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写,实现数组的响应式
具体:https://juejin.cn/post/6969563640416436232
具体:https://juejin.cn/post/6974293549135167495
Vue.set(target, key, value)
Vue.delete(target, key)
维护一个数组,每次调用时讲回调函数压入这个数组,然后优先选择微任务,在微任务回调中去执行数组中的所有回调,同时维护一个布尔值,确保每一次队列进行一次执行数组所有回调
虚拟dom
虚拟dom是一个对象,一个描述真实DOM的对象,每次数据更新时,新旧虚拟DOM都会互相进行同层对比,而diff算法优化就是在此时做优化的。
diff算法
patch
方法,传入新旧虚拟DOM,开始同层对比isSameNode
方法,对比新旧节点是否同类型节点patchNode
进行对比节点updateChildren
方法进行新旧子节点的对比Vue实例初始化的时候立即调用watch的监听回调函数
样式模块化scoped的效果,在本组件的标签都会带上data-v-xxx的属性,然后通过属性选择器实现样式模块化的效果
引用数据类型响应式,基础数据类型不响应式
同时存在时,el > $mount
computed比较好,computed有缓存机制,可以节省性能。而method则每次更新都会重新计算,不考虑缓存
router.push
:跳转,并向history栈中加一个记录,可以后退到上一个页面
router.replace
:跳转,不会向history栈中加一个记录,不可以后退到上一个页面
router.go
:传正数向前跳转,传负数向后跳转