嗨哥IT知识-前端牛逼技术Vue全部知识点整理（-）
vue是什么
以数据驱动为视图的渐进式MVVM框架。
渐进式:循序渐进的使用vue,可选择性强,可以只使用vue的小功能,不必完全使用vue。不强制的意思。
– mvvm：m:数据模型, v-view 视图:数据是双向绑定的,所有数据改变导致视图改变。
vue底层原理和vue描述
原理:Object.definProperty
vue:优点:虚拟dom,模块化开发,数据驱动,双向响应，浏览器统一兼容。
缺点：由于是js生成的虚拟dom,不利于seo爬虫爬取,首屏加载相对于静态页面慢。
data为什么是函数
因为组件的data会提升,而根实例上的data是对象,会导致一个合并。把data变成函数,以调用的方式来使,避免了覆盖和冲突
什么是虚拟dom
使用js算法动态生成的dom叫虚拟dom
diff算法和key的关系
同层对比,只要发现不一样的节点就会用新的dom替换旧的dom。正是因为diff算出来的虚拟dom没有跟踪标识,当一个循环出来的虚拟dom列表中
任意一个元素被修改,diff算法没办法找到它,只能重新循环渲染一份新的dom。加了key之后,每个dom有了自己唯一的标识,这样修改的时候可以
精准的找到并修改,从而节省了性能。所以,key的值必须唯一,而且不可以用随机数,用时间,不建议用下标
生命周期
4个阶段8个函数,其最大的问题是自动发起ajax请求问题,如果是在浏览器中运行,则应该在mounted发起,如果是服务端渲染,应该在created发起。
//创建阶段
beforeCreate(){
//骨架屏来占位
//日志上传
},
created(){
//发起ajax请求，【不推荐】因为ajax异步，生命周期同步
//在服务器端渲染的时候，这个函数是最后一个生命周期
//技术胖
},
// 挂载阶段
beforeMount(){
// 可以对一些数据进行格式化
},
mounted(){
// 发起ajax【推荐】前端项目大多数都是运行在浏览器，极少数是服务器渲染
},
// 更新阶段
beforeUpdate(){
// 可以二次对数据进行修改
},
updated(){
// 只能观察到更新的数据
},
// 销毁阶段
beforeDestroy(){
//清除常驻内存的垃圾
//对用户的离开行为进行提示
},
destroyed(){
}
内置组件
solt 插槽
是自定义组件的高级形式,多用于模板复用,动态渲染传入的内容或组件。
使用场景：插件的封装,网站解构布局等。
匿名插槽
插槽组件中传入的散内容被solt标签接收
具名插槽
使用template标签,用v-solt指令绑定名字,插槽组件中slot组件使用用name属性给插槽取名字
插槽传参
slot组件传递参数,上游组件的template接收
v-slot：的缩写是#
keep-alive 缓存组件
语法:`<keep-alive excludes='MyDom'>
<MYDom>
</keep-alive>`
凡是被它包裹的组件,都会被缓存
- includes 只缓存被指定的组件
- excludes 不缓存指定的组件
keep-alive生命周期
- activated 缓存的组件被激活了
- deactivated 缓存的组件被停用了
component 动态加载组件
必须使用is属性动态加载组件名称,解放了大量书写v-if或v-show问题。
transition 动画组件
使用name属性控制动画类名的前缀,从而可以产生不同的动画效果。
一般用于嵌套在路由视图组件或动态组件。
template 模板
第一种作为vue模板标签使用,第二种作为插槽的模板。
nextTick
保证所有dom全部更新完毕之后才会触发,用于获取dom更新后的获取dom1节点数据
指令
html
专门用于渲染字符串dom片段,底层做了防止注入攻击,会将js内容转义
text
只能渲染文本内容
for
字符串,数字,对象,数组
遍历数组和对象的区别是对象有三个参数,分别是值,键,下标
model
数据双向绑定指令,专门用在表单元素上
on
缩写是@,两种用法,绑定原生事件,自定义事件
bind
可以绑定原生的属性,
绑定自定义属性
绑定给自定义组件上是传参方式
动态绑定属性
v-bind:[name]='data'
动态绑定属性值
v-bind:checked='state'
绑定class
v-bind:class='{active:true/false}'
绑定style
v-bind:style='{color:color}'
once
让元素内的值永远保持第一次渲染,优化性能的一个手段,比如给固定写死的静态dom加上之后,这里的dom将不会在更新了,不参与diff重算。
pre
不会使用vue去解析里面的内容,而是当字符串渲染了,
clock
防止闪烁，当一个值在页面中使用的时候,如果该值是ajax的返回值,那么值初始化的时候为空,则会导致页面闪烁。
show
控制元素的显示与隐藏,原理是css的display:none;
if
控制元素的加载与销毁,如果频繁切换应该使用v-show
slot
插槽的指令,缩写是#
在vue中为啥v-for和v-if不能一起使用
因为v-for优先级比v-if高
<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
{{item}}
</div>
1
2
3
上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：
<div v-for="item in list">
{{item}}
</div>
computed() {
list() {
return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
}
}