vue总结

微信扫一扫,分享到朋友圈

vue总结

vue

vue是一套用于构建用户界面的渐进式框架(渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分)

一、 v-if和v-show的区别

v-show=false,元素存是display:none

v-if=false,元素不存在

二、v-for使用key

key是为了添加唯一标识,让Diff算法可以正确识别节点并把它插入正确的位置,提高Vue对虚拟DOM的更新效率。

比如:

无key,逐条更新值

有key,只需要增加个F节点,插入到B和C之间

三、v-if不能和v-for不能放在同一标签上

v-for优先级高于v-if,当v-for和v-if放在同一标签上时,会先执行v-for,再执行v-if,这样会导致不符合v-if条件的元素也会被v-for

如:

<div id="app">
<ul>
<li v-for="value in testData">
<div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div>
<div id="test1" v-else>{{value}}</div>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
testData:  {
name: 'TESTOBJECT',
id: 5,
data: [1.67, 1.33, 0.98, 2.21]
}
}
})
</script>
打印结果:
TEST,TEST,TEST,TEST,3,3,3,1.67,1.33,0.98,2.21

TEST打印 4 次,是因为字符大小是 4 ;3显示 3 次,是数字大小

上例是这个结果的原因:

  • valueTEST 时,v-for先遍历TEST,结果为T,E,S,T(4次);执行Array.isArray(TEST) == false,执行v-else,所以显示4次TEST
  • value3 时,v-for遍布3,结果为:1,2,3(3次);执行Array.isArray(3) == false;执行v-else,结果为3
  • value 为 [1.67, 1.33, 0.98, 2.21],遍历数组,Array.isArray([1.67, 1.33, 0.98, 2.21]) == true;结果是每一次的值

四、命令注意

vue组件名和prop都可以用驼峰命名和短横线命名,

但html里面只能使用短横线。

(js中的驼峰命名会自动转换成短横线命名。)

字符串模板只能用驼峰。

五、组件之间通信

(1)父子组件之间通信

  • 父组件:通过v-bind动态绑定父组件传来的内容(count-val,html里要用短横线分隔命名法)

<Count :count-val="count" @change="changeFn"/>

  • 子组件:通过props接收父组件传过来的值

props: ['countVal']
父组件prop变化,子组件prop会跟着变,但是子组件变化,不会影响到父组件

  • 子组件通过&dollar;emit(事件名, 传递参数)触发父组件的自定义事件

<Count :count-val="count" @change="changeFn"/> 此处change就是自定义事件

this.$emit('change',this.count); 合作$emit触发自定义事件change

App.vue

(2)通过ref通信,

  • ref在子组件上使用,相当于子组件的索引,通过$refs可以调用子组件的属性和方法
  • ref在普通的 DOM 元素上使用,通过$refs可以获取DOM元素的集体,作用与jquery选择器类似

(3)非父子组件间的通信

main.js中

new Vue({
render: h => h(App),
data: {
eventHub: new Vue()  // 给data加个vue实例
}
}).$mount('#app')

组件1

methods: {
changeFn(count) {
console.log('count', count);
this.count = count;
}
},
mounted: function() {
// 绑定
this.$root.eventHub.$on('changeEvent', (count) => {
this.changeFn(count);
});
},
beforeDestory: function() {
// 解除绑定,避免内存泄漏
this.$root.eventHub.$off('changeEvent');
}

组件2

this.$root.eventHub.$emit('changeEvent', this.count);

六、vue响应式

1.双向绑定

采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。就必须要实现以下几点:

1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

4、mvvm入口函数,整合以上三者

Vue2.0双向绑定原理

2.数组变异方法

3.存在的问题

深度监听,如果对象很大的话,一次性监听到底

无法监听新增、删除属性(可以通过Vue.set,Vue.delete实现监听),这个问题在vue3中通过proxy解决

七、diff算法

虚拟dom就是用js模拟dom结构

diff算法

patch

  • oldVnode是真实dom,创建空的vnode,关联dom元素
  • 新不存在,旧存在,删除旧
  • 新存在,旧不存在,新增vnode
  • 新旧都存在,且是相同节点,调用patchVnode

patchVnode

  • 新旧相同,return
  • 新旧不同,但都是文本节点,替换文本
  • 新有子节点,旧没有,新增子节点
  • 旧有子节点,新没有,删除子节点
  • 新旧都有子节点,且子节点不同,执行updateChildren

updateChildren

开始是递增,结束是递减

新开始->旧开始

新结束->旧结束

新开始->旧结束

新结束->旧结束

有key就根据key,更新到指定位置

没有key就直接更新

如果旧开始>旧结束,说明旧先遍历完,新增vnode中新开始->新结束之间的节点

如果新开始>新结束,说明新先遍历完,移除oldVnode中旧开始->旧结束之间的节点

八、computed和watch

  • computed有缓存,值不变不重新计算
  • watch

watch不支持缓存,有数据变化直接触发

watch监听引用类型,拿不到oldVal

九、vue样式穿透

在组件作用域内的 CSS中,修改外部引入插件样式,需要用到样式穿透

  • scss 使用 ::v-deep
  • stylus使用>>>
  • sass和less使用/deep/
<style lang="scss" scoped>
// scss
.wrapper::v-deep .el-input__inner{
padding-right: 5px!important;
}
// stylus
.wrapper >>> .el-input__inner{
padding-right: 5px!important;
}
// sass和less
.wrapper /deep/.el-input__inner{
padding-right: 5px!important;
}
<style>

十、 vue生命周期

  • beforecreate ->created
    初始化事件,进行数据的观测
  • created

data和method已经初始化好了,如果调用method和data最早可以在这里调用

  • created -> beforeMount

el选项(el: ‘#app’)

没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。此时生命周期到created就停止了

有的话就继续向下编译

  • beforeMount

模板已经常在内存中编译好了,还未挂载到页面,页面还是模板语法

  • beforeMount -> mounted

添加$el,并将其挂载到DOM元素,在beforeMount之前,打印this.$el是undefined

  • mounted

页面渲染完成,最早操作dom,DOM中的模板语法替换成真实数据

  • beforeupdate

数据变化触发

  • updated

页面数据已经被更新

  • beforeDestory

vue实例进入销毁阶段,data,methods还都可用,还没有被销毁

  • destoryed

组件已经被销毁了

  • 父子组件生命周期执行顺序(加载渲染过各)

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

  • 更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

  • 销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

十一、 data为什么用函数

  • 不用function return每个组件的data都在内存的同一个地址,那一个data改变,就会影响其他组件的data
  • 用function return相当于新建了个对象,分配新的内存地址,这样每个组件之间的data都是相互独立

十二、$event

  • 原生 的event对象
  • 事件被挂载到当前元素

event.target在什么地方监听

event.currentTarget在什么地方触发的

十三、v-model

textarea,checkbox,radio也是用v-model

微信扫一扫,分享到朋友圈

vue总结

丰巢风波后 快递系、外卖系抢着投放智能柜

上一篇

杰克·多西向杨安泽的全民基本收入和COVID-19救济基金会捐赠500万美元

下一篇

你也可能喜欢

vue总结

长按储存图像,分享给朋友