hash
模式:通过#号
后面的内容的更改,触发hashchange
事件、实现路由切换
history
模式:通过pushState
和replaceState
切换url、触发popstate
事件、实现路由切换
列举几个常见的:.trim
、.number
、.prevent
、.once
、v-pre
、v-cloak
v-text
是更新元素的textContent
、v-html
是更新元素的innerHTML
:value =“message” @input =“message = $event.target.value”
v-show
是控制元素的dispaly:none
属性
如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
当它们处于同一节点,v-for
的优先级比 v-if
更高,这意味着 v-if
将分别重复运行于每个 v-for
循环中。
所以一般把v-if
写在外层
为了不让数据起冲突,data
是函数,每次调用这个函数拿到的返回值互不影响
利用Object.defineProperty
实现的、Vue在初始化数据的时候,会使用Object.defineProperty
重新定义给data
中所有属性加getter/setter
,当页面使用对应属性时,首先进行依赖收集(收集当前组件的watcher
),如果属性发生变化会通知相关依赖进行更新操作(发布订阅🧡)
-
通过
vm
对象来代理data对象中属性的操作(读/写) -
好处:更加方便的操作data中的数据
-
基本原理:
通过Object.defineProperty()
把data
对象中所有属性加到vm上
为每一个添加到vm上的属性,指定一个getter/setter
在getter/setter
内部去操作(读/写)data
中对应的属性
props
、自定义事件($emit
、ref
)、EventBus
、发布订阅、本地存储、vuex
、$parent与$children
、(provide
和inject
暂不清楚怎么使用)
computed能做的事情,watch都能做,两个都能实现的时候优先使用computed
computed可以缓存,不能处理异步操作
watch可以处理异步操作
computed 多对一;watch 一对多
watch的属性:
deep: true
, // 是否进行深度监听
immediate: true
// 是否初始执行handler函数
作为虚拟DOM
的标识、让vue
对比新旧节点时、更快更高效
diff
算法:
- 新旧虚拟dom如果找到相同key
* 若dom内容没变、直接使用之前真实dom
* 如果变了、生成新真实dom替换之前的
- 如果没有相同key
* 直接生成真实dom
3. 最小力度是标签、同层节点对比…
key的选择:
如果不存在对数据的逆序操作(如果还有输入类节点、渲染也会出问题)、仅用于渲染列表展示可以选择index作为key、有数据唯一标识的时候、最好还是选择唯一标识
对象不更新:是因为Object.defineProperty
没有对对象的新属性进行属性劫持,使用this.$set
方法解决
数组不更新:是因为监测数组不像检测对象,没有getter
和setter
,应该使用push
等方法来操作数组、这类方法已经被Vue
所管理、不完全同于原生方法。(data
中数组重写原型链,使用 push
方法相当于使用了Vue
自己的方法来更新视图)
4对
生命周期、常用的是mounted
和beforeDestory
``mounted发请求,初次渲染数据等;
beforeDestory`用于清除定时器、清除消息发布等
-
beforeCreate
和created
之间、初始化数据:数据监测,数据代理 -
created
和beforeMount
之间、解析模板、生成虚拟DOM
-
beforeMount
和mounted
之间、将内存中虚拟DOM
转为真实DOM
-
beforeUpdate
和updated
之间、生成新的虚拟DOM
与旧的比较并完成model=>view
的更新
原生事件绑定是通过addEventListener
绑定给真实元素的,组件事件绑定是通过Vue自定义的$on
实现的。
-
State:放数据的地方、初始化数据
-
Getter:技术属性、相当于
computed
-
Mutation:同步、唯一更改
store
中数据的方法 -
Action:异步提交
Mutation
-
Moudule:
store
模块化 -
使用方法:
//第一种🧡
import {mapState,mapAction} from ‘store’
…
methods:{
…mapAction([xxx
])
},
computed:{
…mapState([xxx
])
}
//第二种
this.$store.state.数据
this.$store.commit(“mutation函数名,发送到mutation中的数据)
this.$store.dispatch(‘action中的函数名’,发送到action中的数据)
方法一:将数据定义在data
之外
data () {
this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
return {}
}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
.(img-SUCUJrQo-1715659775649)]
[外链图片转存中…(img-27COonIG-1715659775649)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!